使用 Github Actions artifact 在 workflow job 之間共享數據

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程序拉，美滋滋。

最后推廣一波我的開源項目，開源不易，希望多多🌟🌟🌟。
AgileConfig - 一個輕量級配置中心。

關注我的公眾號一起玩轉技術