使用github actions 部署 next.js静态页面到

github actions是github提出的一个用于自动化构建,部署或者测试的功能.

有很多现成的actions,比如我们部署到github pages这个就有一个现成的actions,甚至给了你完整的脚本,各种静态生成器部署的例子.

实际上这类actions写起来也太麻烦了,比shell脚本要麻烦很多,因为我不知道有什么测试脚本的办法,写的是配置文件,shell好歹是一门编程语言,还有代码提示,可以检查错误之类的.(还不如我自己用powershell写脚本部署,部署这种静态页面反正也没有什么兼容性的问题,在自己的机器上也没什么问题.)

所以以后这类需求尽量找别人现成的actions改成自己的需求就可以了.

下面是部署nest.js到github的配置

你在项目根目录创建一个.gihub文件夹,再在下面创建一个workflow文件夹,然后在里面放yaml配置文件,随便起一个文件名就行.

有以下的注意点:

1. 默认部署到当前项目的gh-pages分支
2. 用到了,yarn export之类的,记得在package.json scripts里定义好,不然会出错
3. git默认不区分文件名大小写,这可能造成你本地测试build成功的项目,因为你改过大小写,导致actions build的时候报文件名相关的错误.

name: GitHub Pages

on:
  push:
    branches:
      - main
  pull_request:

jobs:
  deploy:
    runs-on: ubuntu-20.04
    concurrency:
      group: ${{ github.workflow }}-${{ github.ref }}
    steps:
      - uses: actions/checkout@v2

      - name: Setup Node
        uses: actions/setup-node@v2
        with:
          node-version: '14'

      - name: Get yarn cache
        id: yarn-cache
        run: echo "::set-output name=dir::$(yarn cache dir)"

      - name: Cache dependencies
        uses: actions/cache@v2
        with:
          path: ${{ steps.yarn-cache.outputs.dir }}
          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
          restore-keys: |
            ${{ runner.os }}-yarn-

      - run: yarn install --frozen-lockfile
      - run: yarn build
      - run: yarn export

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        if: ${{ github.ref == 'refs/heads/main' }}
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./out