5 分鐘教你快速掌握 GitHub Actions 自動釋出 Npm 包和網站

wscats發表於2022-04-25
GithubNPM網站

自從 GitHub 宣佈 GitHub Actions 在平臺上對所有開發人員和儲存庫可用以來，GitHub Actions 越來越受歡迎。很多第三方平臺在生態系統中有速度等限制，將進一步推動開發人員將他們的軟體自動化遷移到 GitHub Actions。

在本文中，我想向你展示我如何使用 GitHub Actions 釋出我在開源專案中維護的 npm 包。如果你遵循由 GitHub 拉取請求工作流程組成的 GitHub 流程，那麼這將進一步統一團隊和社群貢獻者的工作流程的和提升他們的體驗。

GitHub Actions

GitHub Actions 是 GitHub 開發的一項技術，旨在為開發人員提供一種圍繞持續整合自動化其工作流程的方法——幫助他們構建、部署、安排重複性任務等。GitHub Actions 原生可用並整合到 GitHub 儲存庫中，並具有來自社群貢獻者的許多可重用工作流，例如釋出 npm 包、釋出 docker 影像、執行安全測試等等。

Github Action 本質就是 Github 推出的持續整合工具, 每次提交程式碼到 Github 的倉庫後，Github 都會自動建立一個虛擬機器（例如 Mac / Windows / Linux），來執行一段或多段指令，例如：

npm install
npm run build

我們整合 Github Action 的做法，就是在我們倉庫的根目錄下，建立一個 .github 資料夾，裡面放一個 *.yaml 檔案, 這個 Yaml 檔案就是我們配置 Github Action 所用的檔案。

Github Action 的使用限制

  • 每個 Workflow 中的 job 最多可以執行 6 個小時
  • 每個 Workflow 最多可以執行 72 小時
  • 每個 Workflow 中的 job 最多可以排隊 24 小時
  • 在一個儲存庫所有 Action 中，一個小時最多可以執行 1000 個 API 請求
  • 併發工作數：Linux：20，Mac：5

什麼是 GitHub Workflow？

GitHub 工作流是一組基於觸發器或基於 cron 的計劃執行的 job 作業。作業由組成自動化工作流程的一個或多個步驟組成。我們通過建立 YAML 檔案來建立 Workflow 配置。

從零搭建 Npm 包持續整合

在瞭解了基本的知識之後，我將通過一個實際的專案來帶大家快速上手 Github Action，最終實現的目標: 當我們將程式碼推送到 github 上後, 通過 Github Action 自動打包專案，並一鍵釋出到 npm 上和釋出一個 Github Page 網站。

獲取 Npm Access Token

要想讓 Github Action 能有權利釋出指定的 npm 包, 需要獲取 npm 的 通行證. 這個通行證就是 npm token, 所以我們需要登入 npm 官網, 生成一個 token。

獲取 Personal Access Token

點選 Generate new token 生成一個新的 token 並複製，需要注意的事，這個 Personal Access Token 跟上面 Npm Access Token 一樣只會在生成成功的時候展示，一旦退出就無法再檢視，所以要記得儲存。

設定 Github Secret

我們在拿到 npm token 後, 開啟對應專案的 Github 倉庫, 切換到 settings 皮膚, 找到 secrets 子選單, 建立一個新的 secret, 將 npm token 複製到內容區並命名

填寫 Name 和 Value 欄位，Name 為 ACCESS_TOKEN 和 NODE_AUTH_TOKEN，Value 為剛剛儲存的 Personal Access Token 和 Npm Access Token 值。

Token NameKeyVale
Personal Access TokenACCESS_TOKEN${{ secrets.ACCESS_TOKEN }}
Npm Access TokenNODE_AUTH_TOKEN${{secrets.NPM_TOKEN}}

使用 Workflows 模板

我們切換到 actions 皮膚可以看到很多 workflows 模版，我們選擇如下模版:

當然如果屬性 yaml 配置的也可以自己建立一個 workflow 供他人使用。

我們點選安裝按鈕之後會跳轉到編輯介面，我們可以直接點選右上放的提交按鈕:

此時就建立了一個 workflow。

配置 workflows

這裡我列一下 github-actions-tutorial 的 workflow：

name: Node.js Package

# 觸發工作流程的事件
on:
  push:
    branches:
      - main
      - "releases/**"
      - dev

# 按順序執行作業
jobs:
  publish-gpr:
    # 指定的執行器環境
    runs-on: ubuntu-latest
    # 設定 node 版本
    strategy:
      matrix:
        node-version: [16]
    steps:
      # 拉取 github 倉庫程式碼
      - uses: actions/checkout@v3
      # 設定 node 環境
      - uses: actions/setup-node@v3
        with:
          node-version: ${{ matrix.node-version }}
          # 設定發包 npm 地址倉庫
          registry-url: https://registry.npmjs.org
      # 安裝依賴，相當於 npm ci
      - name: Install dependencies ?️
        run: npm install
      # 執行構建步驟
      - name: 構建
        run: |
          npm run build
      # 執行部署
      - name: 部署
        # 這個 action 會根據配置自動推送程式碼到指定分支
        uses: JamesIves/github-pages-deploy-action@releases/v3
        with:
          # 指定金鑰，即在第一步中設定的
          ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
          # 指定推送到的遠端分支
          BRANCH: pages
          # 指定構建之後的產物要推送哪個目錄的程式碼
          FOLDER: build
      - run: npm publish
        env:
          # 剛剛設定的 NPM_TOKEN
          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

其中有幾個術語和大家介紹一下:

  • name Workflow 的名稱，Github 在儲存庫的 Action 頁面上顯示 Workflow 的名稱
  • on 觸發 Workflow 執行的 event 名稱，比如 on: push(單個事件)，on: push, workflow_dispatch(多個事件)
  • jobs 一個 Workflow 由一個或多個 jobs 構成，含義是一次持續整合的執行，可以完成多個任務
  • steps 每個 job 由多個 step 構成，它會從上至下依次執行
  • env 環境變數, secrets.NPM_TOKEN 就是我們之前定義的 secret

提交測試

我們修改一下專案的程式碼, 然後執行:

git add .
git commit -m ':new: your first commit'
git push

提交成功之後我們開啟專案的 github action 皮膚:

點開對應 Github 倉庫的 Actions 選項卡就可以看到每步的構建過程。可以看到我們在 *.yml 中的定義的 push 事件被觸發，執行了 jobs 中的所有步驟，打包並將打包後到 build 資料夾中的內容推送到了 github 倉庫的 pages 分支。

當 job 選項完成的時候，進入倉庫的 Settings => Pages 選單下，將 Source Branch 欄位設定為 pages，資料夾選擇 root 根目錄就好：

點選 Save 按鈕稍等片刻，等到上面出現通知表示已經構建成功。點選連結進入即可看到自動構建完成的應用了，從此以後，你只需要推送到 yml 檔案中指定的分支，就可以自動觸發構建，自動更新你的網站了。

檢視釋出的 NPM 包和網站

參考文件

如果文章和筆記能帶您一絲幫助或者啟發，請不要吝嗇你的贊和收藏，你的肯定是我前進的最大動力?

附筆記連結，閱讀往期更多優質文章可移步檢視，喜歡的可以給我點贊鼓勵哦：
https://github.com/Wscats/git...

相關文章