使用 Github Actions 自动化部署 next.js 项目

  • 尝新
  • Github Actions

发布于 2020-06-02

前提

我们在服务器上已经有了一个 next.js 项目,并且能够通过 yarn start 来启动服务,即已经配置好了 node.js 的环境。

在 Github 上配置 Actions

选择新建 workflow 后可以看到一些推荐的 workflow,这里我们需要的是 node.js 的 workflow。

通过 set up this workflow 会看到一个 node.js.yml 文件的编辑页

这是一个 node.js 的模版配置文件,首先我们不需要测试,可以把 npm test 的部分删除;其次我们通过 pm2 来管理,所以我们还需要添加 pm2 reload;同时我们也是自有部署,将 runs-on 改成 self-hosted,我们先将配置文件改成如下:

name: Node.js CI

on: [push]

jobs:
  build:

    runs-on: self-hosted

    strategy:
      matrix:
        node-version: [12.x]

    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}
    - run: yarn
    - run: yarn build --if-present
    - run: pm2 reload myblog
      env:
        CI: true

设置 Runner

Settings -> Actions 里可以添加 Runner。

这里有个坑,因为我是用 root 登陆的,而 config.shrun.sh 都限制了 root 权限,在脚本中把相关的代码注释即可。

开启 pm2

actions-runner 文件夹中有 _work,里面存放了和你项目名同名的文件夹,该文件夹中还有一个同名的文件夹,这个文件夹就是你项目仓库,在这个文件夹中

pm2 start yarn --name "myblog" -- start

这时,我们就用 pm2 运行了我们的项目。

但是我们访问相应的页面,发现并没有生效,查看对应端口,该服务也没有启起来,通过 pm2 list 看一下当前的状态,果然 myblog 的 status 是 error,通过 pm2 logs myblog 看一下报错,

看起来是 yarn 的问题,但是本地通过 yarn start 是好的,具体原因不明,换成 npm 即可。

后台运行

回到 actions-runner,会看到一个 svc.sh 文件,这个文件让我们可以后台运行这个 action runner

sudo ./svc.sh install
sudo ./svc.sh start

此时,回到 Github Settings -> Actions 可以看到 self-hosted 的 runner。

Push 一下

整个流程我们都设置完成了,push 一个尝试一下,发现 CI 构建任务失败了。

但是服务器上通过 pm2 list 明明是可以看到这个的。根据它的提示,猜测是配置的问题,GitHub Actions 默认选择了 /etc/.pm,但实际上我们的配置是在 /root 下,那么我们在 yml 配置文件中给 pm2 的命令添加环境变量 HOME: /root,同时添加上 --update-env 的参数。

至此大功告成。

吐槽

  1. 使用国内的服务器下载 runner 相应的文件时慢的很,一共大概几十兆花了我 40 分钟。
  2. 由于国内的服务器连接 GitHub 很不稳定,经常在构建任务第一步就失败了,头疼。

参考

  1. Deploy Next.js Apps using Github Actions

欢迎使用由 A2OS 开发的产品

SafeU|云U盘

隐私、安全、易用的文件分享服务