[AgileConfig](https://github.com/kklldog/AgileConfig) 在使用 react 編寫UI後，變成了一個徹徹底底的前後端分離的專案，上一次解決了把react spa 跟asp.net core 站點整合起來 [asp.net core 整合 react spa](https://www.cnblogs.com/kklldog/p/netcore-embed-react.html)。本來我每次提交程式碼的時候都需要手動執行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程式拉，美滋滋。 最後推廣一波我的開源專案，開源不易，希望多多