前言

這幾天玩了下GitHub的自動化構建與部署，實現了給分支打上tag執行構建命令，構建完成之后將其上傳到releases并生成更新日志。

本文就跟大家分享下我是如何實現這套CI的，歡迎各位感興趣的開發者閱讀本文。

實現思路

在GitHub的項目倉庫中有一個Actions模塊，它是一個持續集成（CI）和持續部署（CD）平臺，開發者可以利用它提供的配置規則，通過編寫yaml文件[1]來自定義工作流程，實現代碼的構建、測試、打包、發布等。

工作原理

GitHub Actions的核心是工作流程（Workflow）。它是由一個或多個步驟（step）組成的一系列自動化任務，可以使用三大平臺（MacOS/Windows/Linux）的操作系統，運用各種編程語言和工具實現項目的構建。工作流程可以根據事件觸發，例如在代碼提交、拉取請求、新增tag時觸發，也可以手動觸發。

一些常見的使用場景：

• 自動化測試：在提交代碼或者拉取請求時自動運行測試，以確保代碼質量和穩定性
• 自動化部署：在代碼合并到主分支后，自動部署應用程序到生產環境
• 自動化構建：自動化構建和打包應用程序，以便進行部署或發布
• 自動化通知：根據事件觸發發送通知和提醒
• 自動化文生成：在代碼合并后自動生成和發布文檔

GitHub Actions的官方文檔中有豐富的例子和使用教程，感興趣的開發者請移步：

• GitHub Actions 快速入門[2]

使用方法

閱讀官方文檔后，我們知道了應該如何編寫一個工作流配置，如下所示：

• 在項目的根目錄創建.github文件夾
• 在.github文件夾內創建workflows文件夾
• 在workflows文件夾內創建build-release.yml文件

這個后綴為.yml的文件就是我們實現想法的地方，根據文檔中所羅列的可供我們使用的方法，結合自己的需求完成配置的編寫，GitHub Action就會按照我們的命令去做事情（命令式編程）。

實現過程

本文就以我的截圖插件[3]為例，跟大家分享下我是如何用這套CI/CD工具來簡化我的工作流提升效率的。

創建token

在工作流中，我們需要對項目做操作就得擁有完整的倉庫操作權限，它的原理是通過讀取存儲在secrets?環境變量中的字段來完成鑒權的。我們在配置文件中通過GITHUB_TOKEN字段來指定即可完成這一操作。

首先，我們登錄GitHub，進入settings-tokens[4]面板。

• 點擊頁面右上角的Generate new token
• 在彈出的菜單中選擇Generate new token (classic)

在打開的新面板中，填寫相關信息：

• Note，你的token名
• Expiration，過期時間，我這里選擇的是No expiration永不過期
• Select scopes，選擇你這個token可以使用哪些功能，按需選擇即可，當然為了省事你也可以全選。

創建完成后，你會看到成功的提示并附帶著token，將這個token復制下來。

打開項目的settings模塊，進入settings/secrets/actions[5]面板。

• 點擊右上角的New repository secret
• 填寫Name，你在yml配置文件里通過secrets變量訪問時的屬性名。
• 填寫Secret，在上一步拿到的token。

image-20230404071035745

實現自動構建與部署

通常情況下，我的截圖插件[6]開發完成之后，發布到GitHub的Releases的流程為：

• 構建項目

執行項目的構建命令

將生成的dist文件夾打成zip包

• 在GitHub上創建Release

• 設置tag

• 填寫release名

• 將zip包上傳到剛才創建好的Release中

• 填寫更新日志

那么，我們只需要將上述流程轉換為GitHub Actions的workflows即可，步驟如下：

• 打開我們在使用方法章節創建好的build-release.yml文件
• 填寫工作流的名字
• 定義此工作流需要對倉庫中的文件進行寫入的操作權限
• 定義此工作流的觸發條件

• 當推送的tag中以v開頭就執行

• 編寫此工作流需要執行的任務

• 構建項目、創建release、上傳zip包

• 生成更新日志

下屬配置中，我們上述工作流拆分成了2個串行任務：

• 構建與上傳
• 創建更新日志

name: Build and Release

# 定義本Action需要對倉庫中的文件進行寫操作的權限。
permissions:
  contents: write

# 推送的tag中以v開頭則執行此action
on:
  push:
    tags:
      - "v*"

jobs:
  build-release:
    runs-on: "ubuntu-latest"
    steps:
      - name: "Checkout code"
        uses: actions/checkout@v3

      # 設置node版本
      - name: "Set up Node.js"
        uses: actions/setup-node@v3
        with:
          node-version: '14.18.0'
      # 安裝依賴
      - name: "Install dependencies"
        run: npm install
      # 執行構建命令
      - name: "Install dependencies"
        run: npm run build-rollup:prod
      # 將dist目錄打成zip包
      - name: Zip Dist
        run: zip -r dist.zip dist
      # 創建Release
      - name: Create Release
        id: create_release
        uses: actions/create-release@v1
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUBTOKEN }}
        with:
          tag_name: ${{ github.ref }}
          release_name: ${{ github.ref }}
          draft: false
          prerelease: false
      # 上傳zip包
      - name: Upload Release Asset
        uses: actions/upload-release-asset@v1
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUBTOKEN }}
        with:
          upload_url: ${{ steps.create_release.outputs.upload_url }}
          asset_path: ./dist.zip
          asset_name: js-screen-shot-dist.zip
          asset_content_type: application/zip


  create-changelog:
    runs-on: ubuntu-latest
    # 需要等build結束后才執行此處
    needs: build-release
    steps:
      - uses: actions/checkout@v3
        with:
          fetch-depth: 0

      - uses: actions/setup-node@v3
        with:
          node-version: 16.x

      # 生成版本更新日志
      - run: npx changelogithub
        env:
          GITHUB_TOKEN: ${{secrets.GITHUBTOKEN}}

配置編寫完成后，提交代碼并推送至遠程倉庫就完成了這個工作流的創建。我們只需要給分支上的提交記錄打上tag，命名時以v開頭，將tag推送至遠程倉庫，這套工作流就會自動執行。

最后，在項目的actions面板就能看到此工作流的運行日志了。

項目的Releases中也出現了我們構建好的壓縮包以及更新日志。

如果你使用的webstorm可以通過安裝GitHub Actions Manager插件來快速查看和管理每個工作流的執行情況。

實現issue創建模版

GitHub的默認issue在創建時并沒有分的很細，雖然它提供了很多選項給提問者，但是大多數人在提問問題的時候，都不會注意到這些選項。因此，我們希望在提問時可以把issue進行細分，比如：

• Bug，使用插件的過程中遇到了一些問題
• Feature，使用插件的過程中希望可以加入某個功能
• General，其他有關插件的問題（比如插件的xx功能怎么用）

要實現這些，我們需要在項目的.github目錄下創建ISSUE_TEMPLATE文件夾，通過創建.yml文件編寫配置來實現。

• bug-report.yml[7]
• feature-request.yml[8]
• general.yml[9]

將這些文件放入指定目錄推送至GitHub后，我們再去創建issue，就能看到如下所示的界面了。

有關這一塊的配置GitHub的官方文檔[10]已經講的很清楚了，此處我們就不做過多的介紹了。你可以直接點擊上方的鏈接把相關的yml文件下載下來稍作修改，放到你項目的指定目錄即可。

實現issue的自動回復

通常情況下，我們收到issue后都會簡單的回一下對方，幸運的是這個流程我們也可以通過GitHub Actions來實現。

在workflows文件夾下創建issue-reply.yml文件。

• 監聽有label的 issue 創建時觸發工作流程
• 根據不同的label創建對應的comment

name: Issue Reply

on:
  issues:
    types: [labeled]

jobs:
  reply-helper:
    runs-on: ubuntu-latest
    steps:
      - name: feature request
        if: github.event.label.name == 'enhancement'
        uses: actions-cool/issues-helper@v2.5.0
        with:
          actions: 'create-comment'
          token: ${{ secrets.GITHUBTOKEN }}
          issue-number: ${{ github.event.issue.number }}
          body: |
            Hello @${{ github.event.issue.user.login }}. Your suggestion has been received, and you will be notified in the issue area after the evaluation is completed.
            你好 @${{ github.event.issue.user.login }}，已收到你的建議，評估完成后將在issue區域通知你。

      - name: need reproduction
        if: github.event.label.name == 'bug'
        uses: actions-cool/issues-helper@v2.5.0
        with:
          actions: 'create-comment'
          token: ${{ secrets.GITHUBTOKEN }}
          issue-number: ${{ github.event.issue.number }}
          body: |
            Hello @${{ github.event.issue.user.login }}. Your feedback has been received, and you will be notified in the issue area when the problem is resolved.
            你好 @${{ github.event.issue.user.login }}，已收到你反饋的問題，問題解決后將在issue區域通知你。

將上述配置推送至GitHub后，我們創建一個新issue后，就能立即得到對應類型的回復。

image-20230404170847132

項目地址

本文列舉到的所有工作流配置文件，請移步：

• .github[11]
• workflows[12]
• ISSUE_TEMPLATE[13]

寫在最后

至此，文章就分享完畢了。

我是神奇的程序員，一位前端開發工程師。

如果你對我感興趣，請移步我的個人網站[14]，進一步了解。

• 公眾號無法外鏈，如果文中有鏈接，可點擊下方閱讀原文查看??

參考資料

[1]yaml文件: https://yaml.org/

[2]GitHub Actions 快速入門: https://docs.github.com/zh/actions/quickstart

[3]截圖插件: https://github.com/likaia/js-screen-shot

[4]settings-tokens: https://github.com/settings/tokens

[5]settings/secrets/actions: https://github.com/{用戶名}/{項目名}/settings/secrets/actions

[6]截圖插件: https://github.com/likaia/js-screen-shot

[7]bug-report.yml: https://github.com/likaia/js-screen-shot/blob/master/.github/ISSUE_TEMPLATE/bug-report.yml

[8]feature-request.yml: https://github.com/likaia/js-screen-shot/blob/master/.github/ISSUE_TEMPLATE/feature-request.yml

[9]general.yml: https://github.com/likaia/js-screen-shot/blob/master/.github/ISSUE_TEMPLATE/general.yml

[10]GitHub的官方文檔: https://docs.github.com/zh/communities/using-templates-to-encourage-useful-issues-and-pull-requests/configuring-issue-templates-for-your-repository

[11].github: https://github.com/likaia/js-screen-shot/tree/master/.github

[12]workflows: https://github.com/likaia/js-screen-shot/tree/master/.github/workflows

[13]ISSUE_TEMPLATE: https://github.com/likaia/js-screen-shot/tree/master/.github/ISSUE_TEMPLATE

[14]個人網站: https://www.kaisir.cn/