Next.js的操作步骤

前提条件 tí

前提条件是已经安装了Nginx的Ubuntu环境。请参考”搭建Nginx、PHP、MariaDB的步骤”以获取更详细信息。

环境

    • OS Ubuntu 22.04 LTS

Nginx 80、443の管理

Node.js ブログ環境

Next.js+React ブログサイト

任务

建立必要环境

1.1 Nginx的安装情况 de

使用”nginx -v”命令进行确认。

# 下記の様にバージョン番が出てくる →  Nginxインストール済確定
nginx version: nginx/1.18.0 (Ubuntu)

1. 安装 Node.js 的步骤

只需要一种选择,用中文将以下内容改写:
$ curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash –
使用curl命令以及管道符号将链接中的内容下载,并通过sudo命令以root权限执行所下载的bash脚本文件。

请使用以下命令安装Node.js:
$ sudo apt安装nodejs

用$ node -v命令进行确认。

# 下記の様にバージョン番が出てくる →  Node.jsインストール済確定
#  Node.js バージョン14.6.0以降が必要
v18.12.1

1.3 npm安装情况

请以中文本地方式复述以下内容,仅需要一个选项:
使用命令 $ npm -v 进行确认。

# 下記の様にバージョン番が出てくる →  npmインストール済確定
8.19.2

2. 运营博客页面比使用Next.js更好。

2.1 创建Next.js应用程序

/var/www/に移動する
$ cd /var/www

次のコマンドを実行して、Next.js アプリを作成する
$ sudo npx create-next-app@latest nextjs-blog –use-npm –example “https://github.com/vercel/next-learn/tree/master/basics/learn-starter”

nextjs-blogという名前の新しいディレクトリが作成された。それに入りましょう
$ cd nextjs-blog

次に、次のコマンドを実行する
$ sudo npm run build

2.2 Nginx的配置

    1. 创建nextjs-blog.conf文件并添加配置

 

    1. $ sudo vim /etc/nginx/sites-available/nextjs-blog.conf

 

    1. server {

 

    1. listen 80;

 

    1. listen [::]:80;

 

    1. server_name blog.sample.com www.blog.sample.com;

location / {
proxy_pass http://localhost:3000;
proxy_redirect off;
}
}

创建符号链接文件
$ sudo ln -s /etc/nginx/sites-available/nextjs-blog.conf /etc/nginx/sites-enabled/

重新启动Nginx
$ sudo systemctl restart nginx

使用 PM2 将 Node 服务器持久化.

pm2 を環境にインストール
$ sudo npm install -g pm2

pm2でnext jsを永続化
$ sudo pm2 start npm –name “next” — start

ドメインを入力しブラウザで確認する

 

辛苦了。

广告
将在 10 秒后关闭
bannerAds