服务端部署 Next.js（附宝塔面板上部署方法）本文介绍在阿里云上部署 next.js，以及在宝塔面板上配置 Node

next.js 是一个轻量的 React 服务端渲染的框架，除了 SSR 和 SSG 它还可以做很多事儿，本文主要聊聊怎么在 阿里云服务器 Centos 环境上部署 next.js 应用

安装 nodejs

先在命令行登录到服务器，可以使用 XShell、FinalShell
使用 curl 获取 nodejs 安装包

curl --silent --location https://rpm.nodesource.com/setup_14.x | bash -

安装 nodejs

sudo yum install -y nodejs

nodejs 多版本管理

npm install -g n

切换当前版本和切换指定版本

n
n 14.17.6

npm 更改为淘宝镜像可以加快下载速度，其他国内镜像 npmmirror.com

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

将 Next.js 应用上传至服务器

比如在服务器指定目录里新建目录 next，然后上传文件（上传图中框出的文件，node_modules 不要上传!）

微信截图_20211210094609.png

npm 安装 项目依赖包

cd /var/www/next
npm i

构建生产环境的应用程序

npm run build

安装 PM2，启动 Next.js 应用

用 pm2 可以很方便的管理 NodeJs 应用的进程，pm2官网

npm i pm2 -g

启动应用，这里的入口文件是 server.js

pm2 start server.js

微信截图_20211210100418.png

OK，我们的 next.js 项目已经 成功运行，可以打开浏览器查看了
注意，要在阿里云后台放行应用里设置的端口号（如何在阿里云设置端口），如果出现问题也可以使用 lsof 命令查看端口号被占用的情况来进行排查，这里是查看 58880

lsof -i:58880

微信截图_20211210100953.png

常用的 pm2 命令：

pm2 list         列出所有进程
pm2 monit        监听每个进程cpu使用情况
pm2 start xx.js  启动进程
pm2 stop all     停止所有进程
pm2 restart all  重启所有进程
pm2 stop 0       停止指定进程 0是id
pm2 restart 0    重启指定进程
pm2 start npm -- run start 没有入口文件时比如nextjs应用 直接输入package.json里的npm命令

一些补充：

PS：红帽公司已经停止对 centos8 的维护，建议使用 centos7。不用担心，即使 centos 没了也会有替代的，国内可以选择 openeuler，其他如 ubuntu、suse、debian 都可以选择

阿里云服务器ECS Ubuntu 部署 Apache

本文demo的代码地址

本文 Demo 的码云地址：https://gitee.com/mrfront/nextjs-ssr-test

你也可以自己快速创建一个官方简单demo：

npx create-next-app@latest

宝塔面板启动 nextjs 服务

有不少人用 宝塔面板 部署和运维项目，我也用过操作比较方便，省去了繁琐的 Linux 命令
这里就说说关于在宝塔上部署 next.js 应用

1.首先在左侧菜单的网站里添加站点，会自动生成项目文件目录比如 /wwwroot/next-test.abc.cn/

微信截图_20220831152232.png

2.在菜单文件中打开这个目录，把你们自己的 next.js 应用代码上传进去

微信截图_20220831153632.png

3.打开终端手动输入命令安装依赖和构建生产环境应用

npm i
npm run build

可以看到项目文件夹里有了 /node_modules

4.安装pm2管理器插件

打开菜单 软件商店，搜 PM2管理器 点击安装，接口点添加项目，这里我用自定义的node入口文件 server.js，如果没有直接填到目录即可比如 /www/wwwroot/test-next.abc.cn/，根据自己的项目来

微信截图_20220831154347.png

也可以在启动文件一栏直接输入 npm 命令

360截图20220901155840878.jpg

如果启动失败，要看下端口有没放行，这里是 :3000，在菜单安全里填写放行的端口。再进去pm2管理器可以看到应用可以启动成功，注意端口里有值才表示成功！

微信截图_20220831155043.png

未标题-1.jpg

应用于生成环境时一般都需要浏览器url中隐藏端口号，只需要在 Nginx 做下反向代理

location ~ / {
  proxy_pass  http://127.0.0.1:3000;
}

在宝塔中选择网站点某个域名的设置 -> 配置文件，手动添加语句

微信截图_20220831160112.png

如果是 80 端口就不用设置

注意下有时需要切换更高的 node 版本

微信截图_20230116163710.png

这样在浏览地址输入域名不用添加端口号就能正常访问了

宝塔面板 v8.0+ 配置并启动 next.js 项目（NEW）

宝塔面板新版已经下架了 PM2管理器，需要在 "网站—Node项目" 栏目中添加站点

首先在本地快速创建一个next.js官方demo

npx create-next-app@latest

一路敲回车就行，然后进入项目目录

npm i
npm run dev

访问 http://localhost:3000 能看到内容说明项目运行OK

去宝塔面板安装 node

点击栏目 "网站—Node项目"，点 "Node版本管理器"，选择一个 Node 版本安装（注意 next.js v14 需要 Node.js 18.17+ 及更新的版本）

微信截图_20240605160909.png

上传项目文件，并打包应用

在栏目 "文件" 下新建目录，将demo中除了 node_modules 的全部文件上传进去

微信截图_20240605162821.png

进入项目目录，安装依赖和打包应用，点击终端输入命令：

npm i
npm run build

微信截图_20240605163855.png

配置 Node 服务，安全组放行端口

demo 里默认启用的端口是 3000，需要在栏目 "安全" 中添加新的端口规则：

微信截图_20240605164351.png

（注意！在阿里云服务器上的 "安全组规则" 中需要放行这个3000端口！）

在栏目 "网站—Node项目" 添加一个Node项目：

微信截图_20240605165808.png

别忘了一定要绑定一个你自己注册的域名

微信截图_20240605170213.png

宝塔面板会自动配置当访问域名会使用nginx反向代理到域名:3000 端口上，点击 "配置文件" 会在下面看到 location / { proxy_pass http://127.0.0.1:3000; ... }

点确定，完成配置后，列表里会显示项目的状态，如果是"运行中" 就OK

微信截图_20240605170526.png

访问你的域名测试下，成功了会看到

微信截图_20240605171405.png

踩坑：

（1）如果宝塔面板终端中提示 "Unable to find node command" 的解决办法

其实就是创建一个 linux 符号链接来解决

在栏目 "网站" —> "Node项目" —> "Node版本管理器" 中，点击已安装node版本的 "环境变量"，可以看到 prefix = /www/server/nodejs/v20.10.0/

在文件目录中点击终端找到 nodejs 的 /bin 目录

cd /
ls
cd /www/server/nodejs/v20.10.0/bin
ls

能看到 node npm pnpm yarn 等。
接着创建一个链接，前面是源文件，后面是目标文件

ln -s /www/server/nodejs/v20.10.0/bin/node /usr/bin/node

最后输入 node -v 能看到 node 版本号就表示成功了！

服务端部署 Next.js（附宝塔面板上部署方法）

目录：