前言

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

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

實(shí)現(xiàn)思路

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

工作原理

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

一些常見(jiàn)的使用場(chǎng)景：

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

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

• GitHub Actions 快速入門[2]

使用方法

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

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

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

實(shí)現(xiàn)過(guò)程

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

創(chuàng)建token

在工作流中，我們需要對(duì)項(xiàng)目做操作就得擁有完整的倉(cāng)庫(kù)操作權(quán)限，它的原理是通過(guò)讀取存儲(chǔ)在secrets?環(huán)境變量中的字段來(lái)完成鑒權(quán)的。我們?cè)谂渲梦募型ㄟ^(guò)GITHUB_TOKEN字段來(lái)指定即可完成這一操作。

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

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

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

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

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

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

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

image-20230404071035745

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

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

• 構(gòu)建項(xiàng)目

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

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

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

• 設(shè)置tag

• 填寫release名

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

• 填寫更新日志

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

• 打開(kāi)我們?cè)谑褂梅椒ㄕ鹿?jié)創(chuàng)建好的build-release.yml文件
• 填寫工作流的名字
• 定義此工作流需要對(duì)倉(cāng)庫(kù)中的文件進(jìn)行寫入的操作權(quán)限
• 定義此工作流的觸發(fā)條件

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

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

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

• 生成更新日志

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

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

name: Build and Release

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

# 推送的tag中以v開(kāi)頭則執(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)程倉(cāng)庫(kù)就完成了這個(gè)工作流的創(chuàng)建。我們只需要給分支上的提交記錄打上tag，命名時(shí)以v開(kāi)頭，將tag推送至遠(yuǎn)程倉(cāng)庫(kù)，這套工作流就會(huì)自動(dòng)執(zhí)行。

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

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

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

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

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

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

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

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

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

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

實(shí)現(xiàn)issue的自動(dòng)回復(fù)

通常情況下，我們收到issue后都會(huì)簡(jiǎn)單的回一下對(duì)方，幸運(yùn)的是這個(gè)流程我們也可以通過(guò)GitHub Actions來(lái)實(shí)現(xiàn)。

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

• 監(jiān)聽(tīng)有l(wèi)abel的 issue 創(chuàng)建時(shí)觸發(fā)工作流程
• 根據(jù)不同的label創(chuàng)建對(duì)應(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 }}，已收到你的建議，評(píng)估完成后將在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 }}，已收到你反饋的問(wèn)題，問(wèn)題解決后將在issue區(qū)域通知你。

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

image-20230404170847132

項(xiàng)目地址

本文列舉到的所有工作流配置文件，請(qǐng)移步：

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

寫在最后

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

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

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

• 公眾號(hào)無(wú)法外鏈，如果文中有鏈接，可點(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/{用戶名}/{項(xiàng)目名}/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]個(gè)人網(wǎng)站: https://www.kaisir.cn/