Sign in Subscribe
寫程式

CI/CD: GitHub Actions 自動部署到 GitHub Page

在這篇文章中，我探討了如何在 GitHub 上使用 GitHub Actions 來實施 CI/CD，重點介紹了如何撰寫用於持續部署的工作流程腳本。透過簡單的實例，我說明了從建立專案、手動部署、到設定自動化部署的全過程，並提供了 GitHub Actions 腳本的具體配置方法，以幫助讀者能夠更好地利用這一功能來自動化他們的部署過程。

Boison

• 3 min read
CI/CD: GitHub Actions 自動部署到 GitHub Page
Photo by NOAA / Unsplash

GitHub Actions 是透過設定一系列的腳本來運行 CI/CD 的流程，因此我們需要將腳本的內容寫在一個 workflow.yml 的檔案中。(名稱自訂不一定要是 workflow)

此處不多解釋 CI/CD 原理，會把重點放在如何在 GitHub 上用 Actions 撰寫 CICD 的腳本 Workflows，不過練習為了簡化邏輯，並沒有撰寫測試和程式碼檢測等內容，因此 Workflows 其實只撰寫持續交付(Continuous Deployment, CD) 的自動部署的部分。

※ CI/CD 原理請見 CI/CD 原理: 持續集成&持續交付/部署

1. 建置專案

  • npx create-react-app my-app-cicd
  • cd my-app-cicd
  • npm run start
  • git init
  • git add .
  • git commit -m “first commit“
  • 在 GitHub 上開設 repo 取名 my-app-cicd
  • git remote add origin <https://github.com/BoisonChang/my-app-cicd.git>
  • git push -u origin main

2. 手動建立部署一次 GitHub Pages

  • npm install --save gh-page
  • 設定 package.json 檔案內容
    • 加上 “name”: “OOXX“
    • 加上 “homepage” : “https://myusername.github.io/name“
    • scripts 中加上 "predeploy": "npm run build"
    • scripts 中加上 "deploy": "gh-pages -d build"
{
  "name": "my-app-cicd",
  "homepage": "https://BoisonChang.github.io/my-app-cicd",
  // ...
}
...
  "scripts": {
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build",
  "start": "react-scripts start",
  "build": "react-scripts build",
    ...
}

3. 設定 GitHub Actions

  1. 先到連結中 Setting 產生一組可以訪問 repo 的 token
  2. 到 GitHub 的repo 中的 Settings 選擇 Secrets
    • 點擊 new secret
    • 貼上我們剛剛複製的 access token 在 value
    • 其他隨意命名後 Add secret
  3. 到 GitHub 的 repo 中的 Actions 中建立腳本 Workflows
    • 點擊 New workflow
    • 點擊 set up a workflow yourself
    • 貼上下面寫好的腳本內容後點擊 Start commit
      • 注意: 此腳本內容有時效性，可能因版本更新而需要自行修改內容
name: Github Pages Deployment

on:
  push:
    branches:
      - "main"

jobs:
  deploy:
    name: deploy GH pages
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3
      - name: Setup node
        uses: actions/setup-node@v3
        with:
          node-version: 16.x
      - name: Install and build
        run: npm install && npm run build
      - name: Deploy
        uses: JamesIves/github-pages-deploy-action@4.1.1
        with:
          branch: gh-pages
          folder: build

4. 自動部署到 gh-page 分支

  • 修改 app.js 內容
  • git commit -am “edit content“
  • git push -u origin main
  • 此時到 repo 的 Actions 頁面會自動執行腳本開始部署成功後頁面更新

5. Workflow 設定

  1. name
    • 這個 Workflow 腳本的名稱
  2. on
    • 執行這個腳本的「執行條件」
    • 推送 main 這個分支啟動這個 Workflow 運作腳本
  3. jobs
    • 不同的工作流都會寫在 jobs ，將編譯、測試、部署等等的工作各自寫成不同的工作流
    • 此處只撰寫了 deploy 部署的工作流
    • runs-on
      • 設置腳本運行時的 Docker base-image
    • steps
      • name: 動作命令名稱為 Checkout
        • uses: 使用 actions/checkout@v2 來設置 GitHub Actions 的相關環境
      • name: 動作命令名稱為 Setup node
        • uses: 使用 actions/setup-node@v3 來設置使用的 Node.js 版本
      • name: 動作命令名稱為 Install and build
        • run: 執行 npm install && npm run build
      • name: 動作命令名稱為 Deploy
        • uses: 使用 JamesIves/github-pages-deploy-action@4.1.1 部署
參考資料作为前端，要学会用Github Action给自己的项目加上CICD前端工程師在GitHub上持續整合與部署(CI/CD)搭配Github actions建立一套 CI/CD系統5 分钟教你快速掌握 GitHub Actions 自动发布 Npm 包和网站用GitHub Actions 簡易的 CI 來發布GitPagesGitHub Actions 的 Workflow 設定檔解析

Sign up for more like this.

Enter your email
Subscribe