Next JS 部署到 Linux

---

前言

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

前期准备工作：

1. 购买一台 Linux 云服务，学习用，低配置，价格不贵，学生党价格能更低。至于使用哪一家服务提供商，您自行选择。不同服务商价格也不同，甚至有提供免费试用1-3个月的。
2. 写好一个 NextJS 项目，或者直接用官方 Next官网 提供的学习 Demo

本文章所用到的相关内容以及对应版本

• NextJS : 14
• Linux : Ubuntu 20.04 LTS
• node : v20.17.0
• nvm : 0.39.1
• pm2 : 5.4.2
• nginx : 1.18
• git: 2.25.1

不同版本可能会有些许差异，请自行判断并做出相应调整

一、Next 官方推荐的部署方式是使用 Vercel 进行托管，为什么还要部署到 Linux ？

因为截至写本文章时，如果您没有科学上网是无法访问部署后的实例地址的。所以放弃该方式。不知道后续会不会放开限制 -。-

二、安装 Node 环境

根据 官方文档 提示，NEXT JS 14，需要使用Node 18.17 或 更高。

ubuntu 虽然 apt-package manager 可以安装 node 但是你会发现安装后版本是 10.19 是一个长期支持的稳定版本，并不适用于我们

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

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

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

source ~/.bashrc

3. 列出所有 Node 版本

nvm list-remote

4. 然后挑一个你要的版本（大于 NextJS14 要求的18.17即可，install 后面不用带 v 只要数字

nvm install 20.17.0

5. 顺带切换一下 Node 版本到你刚安装的 （ 如果你的系统就只有一个 Node 版本这步骤可以省略

nvm use 20.17.0

6. 检查一下当前版本是否切换成功，会输出当前版本号

nvm current

三、安装 Nginx

这个就借助 apt-package manager 来安装吧，安装步骤就 2 步

1. 连接软件源，获取一下软件包信息和更新

apt update

2. 安装

apt-get install nginx

安装完后 Nginx 配置文件在 /etc/nginx/nginx.conf

3. 修改 Nginx 配置

• 如果是以往传统的前端项目打包出来是全静态的通常就使用以下配置即可

location / {
	alias /xxx/xxx;  # 前端文件你的目录
}

虽然 NextJS 也支持全静态的，但由于用到 SSR 时需要动态生成页面，该方法不适用于我们。
感兴趣的话可以去官网看静态相关介绍，静态导出

• 我们需要使用这种

location ^~ {
	proxy_pass http://127.0.0.1:3000;  # NextJS 默认启动端口 3000， 如果你改了配置记得同步修改这里
}

四、安装 Git 并用 Git 拉取你的项目源代码

安装 git 就不赘述了，云服务构建后基本都默认安装好了，如果没有，使用 apt-get install git 安装一下，参考上面的安装 Nginx

然后就跟你在本地开发代码时一样。

1. 拉取你 Next 项目源代码到一个空白文件夹。
2. 然后切到对应分支。
3. 进入 package.json 那级目录，执行 npm install 安装依赖包。
4. npm run build 执行打包。

五、安装 PM2

依旧是在 package.json 这级目录执行 pm2 安装

npm install pm2 -g

安装好 pm2 后切到 .next 文件夹那一级目录

如果你没改过 next.config 配置的话 打包之后的 .next 文件夹默认是在根目录和 package.json 在同一级，如果你有改请切到对应目录去

然后执行

pm2 start npm --name "your name" -- start

至此，项目就算启动完毕了，快试试是否可以访问了。congratulation ~

---

补充：

后续你项目代码有更新，则再次来到该源文件目录

1. git pull
2. npm run build
3. pm2 restart “your name”

即可更新部署新代码

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

该命令可以查看你的 node 项目，可以管理多个

pm2 list

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

pm2 save # 保存命令

pm2 resurrect # 恢复命令 和 save 配套使用

更多命令请看官网
或者PM2中文网

恭喜你已经掌握如何部署 Next JS 项目到自己的云服务器。希望该文章对你所有帮助 😃