AgileConfig 在使用 react 編寫UI后，變成了一個(gè)徹徹底底的前后端分離的項(xiàng)目，上一次解決了把react spa 跟asp.net core 站點(diǎn)集成起來ASP.NET Core 集成 ?React SPA 應(yīng)用。本來我每次提交代碼的時(shí)候都需要手動(dòng)運(yùn)行npm run build,然后把dist的內(nèi)容復(fù)制到asp.net core網(wǎng)站的wwwroot/ui目錄下。這樣顯然太麻煩了，于是嘗試使用 github actions 來自動(dòng)化這些步驟。
我們要實(shí)現(xiàn)的目標(biāo)是：提交代碼后自動(dòng)運(yùn)行npm run build，自動(dòng)把dist內(nèi)容復(fù)制到wwwroot目錄下，自動(dòng)build dotnet程序，自動(dòng)打包docker鏡像，自動(dòng)推送到dockerhub 。
本來以為把這個(gè)actions分成兩個(gè)job，job1負(fù)責(zé)編譯react app，等job1完成后運(yùn)行job2編譯dotnet程序就可以了，但嘗試下來并沒有那么簡單。其中有個(gè)問題就是job1生成的dist內(nèi)容沒有辦法被job2使用，即使在job1里使用命令復(fù)制dist的內(nèi)容到相應(yīng)目錄，job2還是無法使用這些內(nèi)容，貌似每個(gè)job之間文件是隔離的。
在經(jīng)過咨詢大佬后得知了Github Actions Artifact 這個(gè)功能。這樣我們只需要把job1的產(chǎn)物先存儲(chǔ)在Artifact內(nèi)，job2去下載到指定目錄就可以了。

Github Actions

Github actions 是 github 官方的 CICD 服務(wù)。它跟github 無縫集成，使得用戶無需第三方服務(wù)就可以體驗(yàn)完整的CICD 服務(wù)。
Github actions 可以完成很多功能，比如當(dāng)你提交代碼后自動(dòng)build，test，然后打包docker鏡像，發(fā)布到機(jī)器。這些功能只需要一個(gè)yml來描述就可以。
Github actions 主要結(jié)構(gòu)如下：

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

Artifact

Github actions Artifact 可以用來存儲(chǔ)action生產(chǎn)出來的產(chǎn)物，比如npm build生成的靜態(tài)文件。比如dotnet publish 生成的文件等等。當(dāng)你上傳成功后，后續(xù)的流程就可以下載這些文件來使用。

job1 編譯 react app

我們的workflow分兩個(gè)job。第一個(gè)job用來編譯 react app，并且上傳dist的內(nèi)容到artifact存儲(chǔ)起來，以便第二個(gè)job使用它。這個(gè)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這個(gè)命令。
name：上傳的artifact的名稱，下載的時(shí)候需要使用。
path：需要上傳的文件夾的path。需要注意的是，這個(gè)path是相對(duì)repository的路徑。因?yàn)槭褂胣pm命令的時(shí)候需要使用working-directory命令指定工作目錄AgileConfig.Server.UI/react-ui-antd，所以不要覺得這個(gè)上傳的path是相對(duì)working-directory的，如果只寫dist是上傳不了什么東西的。

job2 編譯發(fā)布 asp.net core

在編譯完 react app 后我們得到了dist文件夾的內(nèi)容。我們需要把這些內(nèi)容復(fù)制到wwwroot/ui目錄下面，之后進(jìn)行docker鏡像的打包工作。這個(gè)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

這個(gè)命令跟上面的upload一樣簡單。
name：需要下載的artifact的名稱
path：下載后存儲(chǔ)數(shù)據(jù)的path。這個(gè)path還是相對(duì)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

總結(jié)

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

最后推廣一波我的開源項(xiàng)目，開源不易，希望多多????????????。
AgileConfig - 一個(gè)輕量級(jí)配置中心。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。