使用 Github Actions artifact 在 workflow job 之间共享数据

Question

AgileConfig 在使用 react 编写 UI 后，变成了一个彻彻底底的前后端分离的项目，上一次解决了把 react spa 跟 asp.net core 站点集成起来 ASP.NET Core 集成 React SPA 应用 。本来我每次提交代码的时候都需要手动运行 npm run build,然后把 dist 的内容复制到 asp.net core 网站的 wwwroot/ui 目录下。这样显然太麻烦了，于是尝试使用 github actions 来自动化这些步骤。

我们要实现的目标是：提交代码后自动运行 npm run build，自动把 dist 内容复制到 wwwroot 目录下，自动 build dotnet 程序，自动打包 docker 镜像，自动推送到 dockerhub 。

本来以为把这个 actions 分成两个 job，job1 负责编译 react app，等 job1 完成后运行 job2 编译 dotnet 程序就可以了，但尝试下来并没有那么简单。其中有个问题就是 job1 生成的 dist 内容没有办法被 job2 使用，即使在 job1 里使用命令复制 dist 的内容到相应目录，job2 还是无法使用这些内容，貌似每个 job 之间文件是隔离的。
在经过咨询大佬后得知了 Github Actions Artifact 这个功能。这样我们只需要把 job1 的产物先存储在 Artifact 内，job2 去下载到指定目录就可以了。

Github Actions

Github actions 是 github 官方的 CICD 服务。它跟 github 无缝集成，使得用户无需第三方服务就可以体验完整的 CICD 服务。Github actions 可以完成很多功能，比如当你提交代码后自动 build，test，然后打包 docker 镜像，发布到机器。这些功能只需要一个 yml 来描述就可以。

Github actions 主要结构如下：

name:
on:
  job1:
    steps:
    ...
  job2：
    steps
    ...

Artifact

Github actions Artifact 可以用来存储 action 生产出来的产物，比如 npm build 生成的静态文件。比如 dotnet publish 生成的文件等等。当你上传成功后，后续的流程就可以下载这些文件来使用。

job1 编译 react app

我们的 workflow 分两个 job。第一个 job 用来编译 react app，并且上传 dist 的内容到 artifact 存储起来，以便第二个 job 使用它。这个 job 大概流程如下：

1. 安装 nodejs
2. run npm install
3. run npm run build
4. upload artifact

actions/upload-artifact@ v2

- uses: actions/upload-artifact@v2
    with:
      name: agileconfig-ui
      path: AgileConfig.Server.UI/react-ui-antd/dist/

主要解释下 actions/upload-artifact@ v2 这个命令。
name：上传的 artifact 的名称，下载的时候需要使用。
path：需要上传的文件夹的 path。需要注意的是，这个 path 是相对 repository 的路径。因为使用 npm 命令的时候需要使用 working-directory 命令指定工作目录 AgileConfig.Server.UI/react-ui-antd，所以不要觉得这个上传的 path 是相对 working-directory 的，如果只写 dist 是上传不了什么东西的。

job2 编译发布 asp.net core

在编译完 react app 后我们得到了 dist 文件夹的内容。我们需要把这些内容复制到 wwwroot/ui 目录下面，之后进行 docker 镜像的打包工作。这个 job 大概流程如下：

1. 安装 dotnet
2. dotnet build & publish
3. download-artifact
4. docker build & push

actions/download-artifact@ v2

- uses: actions/download-artifact@v2
  with:
    name: agileconfig-ui
    path: AgileConfig.Server.Apisite/wwwroot/ui

这个命令跟上面的 upload 一样简单。
name：需要下载的 artifact 的名称
path：下载后存储数据的 path。这个 path 还是相对 repository 的。

完整的 yml

下面是 workflow 的完整 yml 配置：

name: master ci workflow
on:
  push:
    branches: [ master ]
    paths-ignore: 
      - '**/README.md'
      - '**/*.yml'
  pull_request:
    branches: [ master ]
jobs:
  build-reactapp:
    runs-on: ubuntu-latest
    defaults:
      run:
        working-directory: AgileConfig.Server.UI/react-ui-antd
    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: npm install
    - run: npm run build
    - uses: actions/upload-artifact@v2
      with:
        name: agileconfig-ui
        path: AgileConfig.Server.UI/react-ui-antd/dist/
  build-dotnet:
    needs: build-reactapp
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - name: Setup .NET Core
      uses: actions/setup-dotnet@v1
      with:
        dotnet-version: 3.1.301
    - name: Install dependencies
      run: dotnet restore
    - name: Build
      run: dotnet build --configuration Release --no-restore
    - uses: actions/download-artifact@v2
      with:
        name: agileconfig-ui
        path: AgileConfig.Server.Apisite/wwwroot/ui
    - name: Push to Docker Hub
      uses: docker/build-push-action@v1
      with:
        username: ${{ secrets.DOCKER_HUB_NAME }}
        password: ${{ secrets.DOCKER_HUB_PASSWORD }}
        repository: kklldog/agile_config
        tags: test

总结

通过以上一番折腾，当我们提交代码后会自动运行这个 github actions，在执行完后，我们的程序直接被打包成了 docker image 并且自动上传到了 dockerhub。这样就可以直接通过 docker 命令来运行了。从此再也不用人肉编译 react app，人肉编译 dotnet core 程序了。