Next.js 项目部署到云服务器

type

status

date

slug

summary

准备工作

在有了云服务器之后，首先安装操作系统，我选择的是 CentOS Stream 9。

接下来使用 dnf 包管理器来安装需要的软件，因此在连接到服务器之后，先更新一下 dnf：

环境安装

要用到的软件很简单，只有三个：

Node.js：用来运行 Next.js 项目

nginx：做为反向代理服务器

git：用来拉取项目代码

1. 安装 Node.js

CentOS 安装 Node.js 很简单，可以参考 Node.js 安装文档。

首先查看可用的版本：

之后选择一个版本安装，我这里安装了 Node.js v20.

安装完成之后，运行 node -v 看到版本号输出，说明安装成功。

2. 安装 nginx

接下来安装 nginx，只需要按照官方文档操作即可。

安装和更新 EPEL 仓库:

安装 nginx

查看版本，输出版本号，说明安装成功

nginx 默认的配置路径在 /etc/nginx/nginx.conf，稍后我们会用到。

3. 安装 git

接下来安装 git，用来从 GitHub 拉取项目代码。

安装完成之后查看版本：

如果输出类似于 git version 2.43.0 说明安装成功。

安装完成之后配置用户信息：

之后需要配置 SSH key。

到 GitHub setting 页面添加复制的 SSH key。

创建项目

接下来创建项目。为了演示简单，我使用 create-next-app 创建了一个空项目：

接下来会提示你输入项目名，之后一路回车选择默认选项就可以。创建项目之后推送到 GitHub。

推送到 GitHub 之后登录服务器，到 /usr/www 目录（按个人喜好，随便某个目录，用来拉取项目文件），将项目 clone 下来。

之后到项目的目录，安装依赖、打包、启动项目。

现在应该可以在控制台看到启动成功，就像平时在本地启动项目一样。但现在是访问不到的，因为云服务器默认不会开启 3000 端口。我们需要到云服务器的防火墙配置一下，开启 3000 端口，具体的添加方式取决于使用的云服务商。之后用浏览器访问一下（xxx 是你的公网 IP）项目地址：

已经可以访问到项目页面了！

自动化部署

到现在为止，我们通过手动克隆代码、手动打包并启动的方式把项目在云服务器跑起来了。但我们肯定不希望每次有代码改动都登录服务器重新操作一遍。接下来使用 PM2 和 GitHub actions 来自动化这个过程。

安装 PM2

PM2（Process Manager 2）是一个用于管理和监控 Node.js 应用程序的进程管理器。它简化了在生产环境中部署、运行和维护 Node.js 应用的过程。

我们将通过 PM2 来启动我们的应用。

首先安装 PM2:

安装完成之后可以通过 pm2 -version 查看版本，之后运行以下命令启动项目：

会看到类似上图中的输出，继续通过 IP 加端口号访问应用，应用照常运行。

配置 GitHub Actions

GitHub Actions 是 GitHub 提供的一项功能，用于自动化软件开发工作流程。它允许我们在 GitHub 上设置和执行自定义的 CI/CD（持续集成/持续部署）工作流。通过 GitHub Actions，我们可以在代码存储库中设置各种自动化任务，例如构建、测试、部署、发布和其他自定义工作流程。

打开代码仓库页面，点击 Settings -> Sectets and variables -> Actions -> New repository sectet

依次添加以下变量：

在代码仓库页面点击 Actions -> set up a workflow yourself

在编辑窗口写入以下代码：

注意 workflow 中最后一行代码：

因为我们已经在服务器通过 pm2 启动了项目了，因此这里用的是 restart，即使应用程序已经在运行，也会停止当前的进程并重新启动。

记得把 branches 和项目目录替换为你自己的值，点击保存。保存之后 GitHub 就会按照我们写的 workflow 开始拉取代码、构建并重启项目。

要查看构建进度的话，可以访问 https://github.com/<username>/<project-name>/actions 页面，会列出所有的 workflow。