Github Action X React App 將專案導入 Github Action 並自動定期更新專案

Lin Yen-Cheng on 2020-06-08 5 min. read

本篇文章將提到怎麼透過 Github Action 來自動定期建置並發佈更新後的專案

CI/CD 工具簡介

CI/CD 工具非常多元,常見的的服務常見的像是第三方的 Travis CI、Circle CI 或是版控平台自己提供的 Github Action、Gitlab CI,常見的使用方法都是在專案中加入一個 yml 設定檔進行配置,這樣的服務在整合過後也會提供一個可以嵌入的 CI/CD 狀態標籤,讓我們嵌入在網頁或是 README.md 裡面,顯示目前專案的狀態。

  • CI 持續整合,目的是讓經過測試的程式碼用最快的時間回到主幹中
  • CD 持續發布,更快速且頻繁的去更新我們的服務

專案導入 Github Action

如果專案是在 Github 的話,直覺要透過第三方服務遠端 Push 新的檔案會有些困難跟疑慮,由於之前實作武漢肺炎疫情地圖的專案是放在 github 所以就直接選用了 Github Action。

導入的步驟首先要挑選 market 中相關的 actions,如果使用預設產生的會自動帶有 actions/checkout 主要用來 checkout Repo 的程式碼。

market 的傳送門如下:
https://github.com/marketplace?type=actions

因為我們需要定期更新自動 push 新的資料,所以我們會需要 token 還有了解 cron job 的寫法,Linux 設定 crontab 也是一樣的概念,通常有五個數字 分 時 天 周 月 可以填入相關數字或判斷式簡易寫法如下:

  • 每時 0 * * * *
  • 每天 0 0 * * *
  • 每周 0 0 0 * *
  • 每月 0 0 0 0 *

判斷式相關寫法如下:

  • * 任何值都會執行
  • , 設定多個數字們可以用逗號分隔
  • - 設定數字區間
  • / 除法每八小時就可以 */8

這次疫情地圖專案導入的步驟如下:

  • 專案 => 設定 => Secrets => 加入 github-token
  • 專案中的 /.github/workflows 加入 {name}.yml 檔案
  • 設定 Github Action 的 Cron Job 還有需要更新的分支
  • 執行產生 JSON 檔的 JS
  • Push 到專案中
    • 需要 github-actions-x/commit 一樣也是直接使用加上相關配置
  • github page 預設推薦兩種方式
    • 專案中的 docs 資料夾
    • gh-pages branch
  • 測試覆蓋率
  • 快取 actions/cache
    • 透過把 node_modules 快取可以避免每次執行都重新安裝
# 給一個名字
name: Node CI

# 設定 Github Action 的 Cron Job 還有需要更新的分支
on:
  schedule:
    # * is a special character in YAML so you have to quote this string
    - cron: "1 2-6/2 * * *"
  push:
    branches:
      - master

jobs:
  build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version:
          - 12.x
    steps:
      - name: Checkout repository
        uses: actions/checkout@v1

      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node-version }}

      - name: Cache dependencies
        uses: actions/cache@v2
        with:
          path: |
            **/node_modules
          key: ${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}

      - name: Install dependencies
        run: npm install

      - name: generate new build
        run: |
          npm run generate
          npm run build

      - name: push
        # Push 到專案中
        uses: github-actions-x/commit@v2.5
        with:
          github-token: ${{ secrets.TOKEN }}
          push-branch: "master"
          commit-message: "publish with new data"
          force-add: "true"
          files: docs/

喜歡這篇文章,請幫忙拍拍手喔 🤣

share