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大概流程如下：

安裝nodejs

run npm install

run npm run build

upload artifact

actions/upload-artifact@v2

- uses: actions/upload-artifact@v2with:name: agileconfig-uipath: 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大概流程如下：

安裝dotnet

dotnet build & publish

download-artifact

docker build & push

actions/download-artifact@v2

- uses: actions/download-artifact@v2with:name: agileconfig-uipath: 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-latestdefaults:run:working-directory: AgileConfig.Server.UI/react-ui-antdstrategy:matrix:node-version: [12.x]steps:- uses: actions/checkout@v2- name: Use Node.js ${{ matrix.node-version }}uses: actions/setup-node@v1with:node-version: ${{ matrix.node-version }}- run: npm install- run: npm run build- uses: actions/upload-artifact@v2with:name: agileconfig-uipath: AgileConfig.Server.UI/react-ui-antd/dist/build-dotnet:needs: build-reactappruns-on: ubuntu-lateststeps:- uses: actions/checkout@v2- name: Setup .NET Coreuses: actions/setup-dotnet@v1with:dotnet-version: 3.1.301- name: Install dependenciesrun: dotnet restore- name: Buildrun: dotnet build --configuration Release --no-restore- uses: actions/download-artifact@v2with:name: agileconfig-uipath: AgileConfig.Server.Apisite/wwwroot/ui- name: Push to Docker Hubuses: docker/build-push-action@v1with:username: ${{ secrets.DOCKER_HUB_NAME }}password: ${{ secrets.DOCKER_HUB_PASSWORD }}repository: kklldog/agile_configtags: test

總結

通過以上一番折騰，當我們提交代碼后會自動運行這個github actions，在執行完后，我們的程序直接被打包成了docker image 并且自動上傳到了dockerhub。這樣就可以直接通過docker 命令來運行了。從此再也不用人肉編譯react app，人肉編譯dotnet core程序拉，美滋滋。

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

總結

以上是生活随笔為你收集整理的使用 Github Actions artifact 在 workflow job 之间共享数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。