透過 Github Action 設定 React web app 的 CI/CD 流程(包含GitHub Pages 和 Codecov)

許聖泉 Michael Hsu
10 min readApr 13, 2021

--

在 Github 推出自家的 Github Action 後,使用 Github 當作 Git 儲存庫的開發者,可以不需要再仰賴其他第三方的 CI/CD 服務平台,準備好 Yaml 檔以後,直接在 Github 上就可以輕鬆的進行 CI/CD 流程。

接下來講解在 GitHub Action 上創建的 CI/CD 流程將負責自動測試程式碼,生成測試報告並將其上傳到 Codecov 上,並且在 GitHub Pages 上部屬 React web app,而這些所有的作業,都由 Master 主分支上的 push 或是 pull request 事件來自動觸發和執行。

開始吧

以下我們將不在贅述如何創建 React web app 專案,以及 CI/CD 的概念,我們將專注在 GitHub Action 的流程上,順代一提其他網頁框架或是程式碼的專案,也都適用。

首先前往你的 React web app 專案的 Repo,選擇上方的 Actions 進入分頁,底下你會看到許多 Github 預設的 Workflows,這邊我們選擇 Node.js。

你會看到預設的 Yaml 檔

# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
name: Node.js CIon:
push:
branches: [ master ]
pull_request:
branches: [ master ]
jobs:
build:
runs-on: ubuntu-lateststrategy:
matrix:
node-version: [10.x, 12.x, 14.x, 15.x]
# See supported Node.js release schedule at https://nodejs.org/en/about/releases/
steps:
- uses: actions/checkout@v2
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v2
with:
node-version: ${{ matrix.node-version }}
- run: npm ci
- run: npm run build --if-present
- run: npm test

上半部是設定的部分,看到下半部 steps 的區域,就是我們 Workflows 所有會做的事情。

第一個 actions/checkout@v2 是一種既定的標準流程,在 Workflows 需要存儲 Repo 的程式碼時,必須先在 Workflows 中包含此標準流程,然後再執行其他操作。

第二個 actions/setup-node@v2 是針對Node.js的設定,妳可以前面的設定中,指定適合的版本。

最後面的三個 run,便是大家熟悉的執行 npm 指令,我們稍會再做修改。

Test coverage report

針對剛剛那份 Yaml 檔,我們修改一下 npm 的指令。

name: CI/CDon:
push:
branches: [ master ]
pull_request:
branches: [ master ]
jobs:
build:
runs-on: ubuntu-lateststrategy:
matrix:
node-version: [12.x]
steps:
- name: Checkout repository
uses: actions/checkout@v2
- name: Set up Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v1
with:
node-version: ${{ matrix.node-version }}
- name: Install dependencies
run: npm install
- name: Run the tests
run: npm test
- name: Build
run: npm run build

可以看到,我們修改了 npm 的指令部分,這已經是一份可以正常編譯和測試 React web app 的 Yaml 檔。

但我們想記錄我的測試報告和 code coverage,登入 Codecov 並且使用,登入後可以在 Add new repository 中,加入你的 React app web 專案的 Github repo。

Codecov 設定到這邊,回到 Yaml 檔。

我們要在 Yaml 檔加一個動作,進行 code coverage 測試。

- name: Run the tests and generate coverage report
run: npm test -- --coverage

然後為了上傳到 Codecov,我們需要一個他專屬的動作。

- name: Upload coverage to Codecov
uses: codecov/codecov-action@v1

Codecov 的全部設定就到這邊都完成了。

GitHub Pages

測試搞定了,接下來我們希望可以自動幫我們部屬網站到 Github pages 上。

第一步到專案中的 package.json 中,加入這一行。

"homepage": "https://myusername.github.io/my-app",

其中自行替換你的 Github 名稱和專案名稱。

接著下 command 安裝 gh-pages。

$ npm install --save gh-pages

並且因為是使用 gh-pages 進行部屬,稍微修改一下 package.json 中 scripts 的部分,加入這兩個指令。

"predeploy": "npm run build", 
"deploy": "gh-pages -d build",

回到 Github 網站,我們需要一組專屬的 Token。

前往 https://github.com/settings/tokens,創立新的 Token。

將下圖中的權限開啟,並把 Token 先存下來。

回到專案中,將剛剛產生的 Token 設定進專案的 Secret,名稱設定為 ACTIONS_DEPLOY_ACCESS_TOKEN。

回到 Yaml 檔,把部屬的動作補上去。

- name: Deploy
run: |
git config --global user.name $user_name
git config --global user.email $user_email
git remote set-url origin @github.com/${repository">https://${github_token}@github.com/${repository}
npm run deploy
env:
user_name: 'github-actions[bot]'
user_email: 'github-actions[bot]@users.noreply.github.com'
github_token: ${{ secrets.ACTIONS_DEPLOY_ACCESS_TOKEN }}
repository: ${{ github.repository }}

最終這份 Yaml 檔會長這樣子

name: CI/CDon:
push:
branches: [ master ]
pull_request:
branches: [ master ]
jobs:
build:
runs-on: ubuntu-lateststrategy:
matrix:
node-version: [12.x]
steps:
- name: Checkout repository
uses: actions/checkout@v2
- name: Set up Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v1
with:
node-version: ${{ matrix.node-version }}
- name: Install dependencies
run: npm install
- name: Run the tests and generate coverage report
run: npm test -- --coverage
- name: Upload coverage to Codecov
uses: codecov/codecov-action@v1
- name: Build
run: npm run build
- name: Deploy
run: |
git config --global user.name $user_name
git config --global user.email $user_email
git remote set-url origin @github.com/${repository">https://${github_token}@github.com/${repository}
npm run deploy
env:
user_name: 'github-actions[bot]'
user_email: 'github-actions[bot]@users.noreply.github.com'
github_token: ${{ secrets.ACTIONS_DEPLOY_ACCESS_TOKEN }}
repository: ${{ github.repository }}

把他存到專案跟目錄的 .github/workflows 底下。

接下來每次對 Master 分支的 commit 都會觸發 CI/CD 流程囉。

--

--

許聖泉 Michael Hsu
許聖泉 Michael Hsu

No responses yet