前言

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

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

實現(xiàn)思路

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

工作原理

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

一些常見的使用場景：

• 自動化測試：在提交代碼或者拉取請求時自動運(yùn)行測試，以確保代碼質(zhì)量和穩(wěn)定性
• 自動化部署：在代碼合并到主分支后，自動部署應(yīng)用程序到生產(chǎn)環(huán)境
• 自動化構(gòu)建：自動化構(gòu)建和打包應(yīng)用程序，以便進(jìn)行部署或發(fā)布
• 自動化通知：根據(jù)事件觸發(fā)發(fā)送通知和提醒
• 自動化文生成：在代碼合并后自動生成和發(fā)布文檔

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

• GitHub Actions 快速入門[2]

使用方法

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

• 在項目的根目錄創(chuàng)建.github文件夾
• 在.github文件夾內(nèi)創(chuàng)建workflows文件夾
• 在workflows文件夾內(nèi)創(chuàng)建build-release.yml文件

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

實現(xiàn)過程

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

創(chuàng)建token

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

首先，我們登錄GitHub，進(jìn)入settings-tokens[4]面板。

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

在打開的新面板中，填寫相關(guān)信息：

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

創(chuàng)建完成后，你會看到成功的提示并附帶著token，將這個token復(fù)制下來。

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

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

image-20230404071035745

實現(xiàn)自動構(gòu)建與部署

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

• 構(gòu)建項目

執(zhí)行項目的構(gòu)建命令

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

• 在GitHub上創(chuàng)建Release

• 設(shè)置tag

• 填寫release名

• 將zip包上傳到剛才創(chuàng)建好的Release中

• 填寫更新日志

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

• 打開我們在使用方法章節(jié)創(chuàng)建好的build-release.yml文件
• 填寫工作流的名字
• 定義此工作流需要對倉庫中的文件進(jìn)行寫入的操作權(quán)限
• 定義此工作流的觸發(fā)條件

• 當(dāng)推送的tag中以v開頭就執(zhí)行

• 編寫此工作流需要執(zhí)行的任務(wù)

• 構(gòu)建項目、創(chuàng)建release、上傳zip包

• 生成更新日志

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

• 構(gòu)建與上傳
• 創(chuàng)建更新日志

name: Build and Release

# 定義本Action需要對倉庫中的文件進(jìn)行寫操作的權(quán)限。
permissions:
  contents: write

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

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

      # 設(shè)置node版本
      - name: "Set up Node.js"
        uses: actions/setup-node@v3
        with:
          node-version: '14.18.0'
      # 安裝依賴
      - name: "Install dependencies"
        run: npm install
      # 執(zhí)行構(gòu)建命令
      - name: "Install dependencies"
        run: npm run build-rollup:prod
      # 將dist目錄打成zip包
      - name: Zip Dist
        run: zip -r dist.zip dist
      # 創(chuàng)建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結(jié)束后才執(zhí)行此處
    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}}

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

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

項目的Releases中也出現(xiàn)了我們構(gòu)建好的壓縮包以及更新日志。

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

實現(xiàn)issue創(chuàng)建模版

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

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

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

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

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

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

實現(xiàn)issue的自動回復(fù)

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

在workflows文件夾下創(chuàng)建issue-reply.yml文件。

• 監(jiān)聽有l(wèi)abel的 issue 創(chuàng)建時觸發(fā)工作流程
• 根據(jù)不同的label創(chuàng)建對應(yīng)的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區(qū)域通知你。

      - 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區(qū)域通知你。

將上述配置推送至GitHub后，我們創(chuàng)建一個新issue后，就能立即得到對應(yīng)類型的回復(fù)。

image-20230404170847132

項目地址

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

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

寫在最后

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

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

如果你對我感興趣，請移步我的個人網(wǎng)站[14]，進(jìn)一步了解。

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

參考資料

[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]個人網(wǎng)站: https://www.kaisir.cn/