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@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大概流程如下：
- 安裝dotnet
- dotnet build & publish
- download-artifact
- 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 - 一個輕量級配置中心，
關注我的公眾號一起玩轉技術
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/271804.html
標籤：.NET技术