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的配置
-
- 创建nextjs-blog.conf文件并添加配置
-
- $ sudo vim /etc/nginx/sites-available/nextjs-blog.conf
-
- server {
-
- listen 80;
-
- listen [::]:80;
-
- 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
ドメインを入力しブラウザで確認する
辛苦了。