next.js打包部署至云服务器的简要流程

next.js打包部署至云服务器的简要流程

Next.js 打包部署的流程大致可以分为以下几个步骤：

前言

网上类似的教程也有不少，但是零零散散不完整，且有一些细节并没有说，
该章节中您将学会如何将 NextJS 项目部署自己的 Linux 云服务器中。

1.安装 Node 环境

根据本地项目自行选择对应版本，“next”: “11.0.1”，“react”: "17.0.2"需要使用Node 12.22 或 更高。

我们将使用 nvm 来管理 Node 版本，该工具也支持安装多个 Node 版本，并可以使用 nvm use 命令来切换不同版本，非常好用~

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

离线安装nvm（完全断网环境）

在有网络的机器下载安装脚本：

wget https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh

将install.sh拷贝到目标机器, 执行安装：

bash install.sh

执行安装后，执行一下刷新 nvm 命令才可用

source ~/.bashrc

设置nvm 镜像源

export NVM_NODEJS_ORG_MIRROR=https://npmmirror.com/mirrors/node/

然后挑一个你要的版本，install 后面不用带 v 只要数字

nvm install 12.22.12

顺带切换一下 Node 版本到你刚安装的

nvm use 12.22.12

设置node镜像源

npm config set registry https://registry.npmmirror.com

2.安装 Nginx

看我另外一篇 服务器部署内容
服务器部署

3. 设置反向代理（Nginx/Apache）

server {
    listen 80;
    server_name yourdomain.com;

    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

示例操作说明

1. liunx 服务器部署说明

把项目源码文件复制到服务器，然后执行 npm install, node 版本 12 node版本要与本地环境一致

npm install

执行 npm run build 来生成 .next 文件夹。

npm run build

安装 pm2 要求 node 版本最低16，npm install -g pm2

pm2 可以用来管理你的 node 项目，本地开发的时候你也知道，Terminal 是不能关闭的，关了项目就停止运行了，pm2 就相当于帮你在后台跑

npm install -g pm2

查看 pm2 是否成功

pm2 status

项目运行要有以下包 .next, public, package.json, package-lock.json, 环境变量文件以及任何必要的配置文件。
接下来，在该项目目录下运行：

pm2 start npm --name "points-pc" -- start

启动成功后，访问 http://localhost:3000 默认端口

查看运行状态

pm2 list

停止服务

pm2 stop points-pc

启动服务

pm2 start points-pc

删除服务

pm2 delete points-pc

顺带提一嘴，重启系统的话实例是会丢失的，如果你需要持久化，你可以执行一下该命令，可将当前 pm2 list 中你能看到的所有实例保存起来，会生成一个文件，可以用该文件来恢复

保存命令

pm2 save

恢复命令 和 save 配套使用

pm2 resurrect