前端人需要了解的 CI/CD

CICD

字數統計: 818閱讀時間: 3 min

 2025/08/30 

CICD

什麼是 CI/CD ？

協助開發者自動化軟體開發的工作流程，自動完成檔案上傳、測試機…..的工具，成功或失敗都會通知。
白話的說就是：「原本手工要做完的事情，改用電腦自動幫你完成。」

重點就是要簡化並自動化繁瑣的工作，尤其是大型專案、遊戲專案，這類需要頻繁修改與測試的專案，幫助開發者提高工作效率，減少錯誤，並確保程式的品質和穩定性。

CI/CD 解釋

CI 持續整合（Continuous Integration 自動化整合）

在系統每一次變動時，能持續且自動地進行驗證，確保程式碼品質和可建置性。
每一次程式碼提交會觸發自動測試和驗證過程，也有助於多人協作時能最大限度地減少程式碼衝突的可能性，並主動回報錯誤。

其行為包含：

程式碼提交(Commit)
自動構建(Build)
自動測試(Test)

CD 持續部署（Continuous Deployment 自動化部屬）

程式碼在 CI 流程完成驗證後，透過自動化方式，部署到任何環境。
保持每次更新程式都可順暢完成，和確保服務存活。

其行為包含：

自動部署到測試環境
使用者驗收測試(UAT)
部署到生產環境

CI/CD Toos

Jenkins: 最知名常見的開源 CI/CD 工具，可在本地端或 Docker 安裝執行，有豐富的套件生態，自定義擴展性高。
GitHub Action: 專案放上 GitHub 才可以使用，小型專案能在免費額度(2000分鐘)內滿足基本需求。
GitLab: 使用者直接在官網上將 CI/CD 流程建置上去。

CICD 實作，以 GitHub Actions 為例

執行步驟

第一步：創建 Workflow 文件

新增資料夾 .github/workflows

第二步：編寫 Workflow 配置

新增 .yaml 檔

第三步：推送到 GitHub

設定好 github repository 遠端倉庫，在每一次 git commit、git push 後會直接執行 GitHub Actions。

YAML 語法指令說明

YAML 是一種 data serialisation 語言，可讀性高，GitHub Actions 的 workflow 以 YAML 檔案進行設定(副檔名為.yml或.yaml)。

在 YAML 常用的指令：

name: Workflow 名稱，也是在 Action 操作頁面中，工作流程清單的顯示名稱；如果沒有設定名稱，則會以文件路徑 + 檔案名稱命名。
on: 必填，觸發在 workflow 的 Event 名稱，可以設定為每當有程式被推送（push）到倉庫時觸發。
job: 定義 workflow 的任務，預設情況下是平行(並行)執行，例如: build、testing，進而設定循序執行。
runs-on: 設定任務執行的環境，例如: ubuntu-latest、window-latest。
step:定義了任務中要執行的步驟。step 內不一定只能執行 action，但 action要作為 step 執行。每個步驟皆在 Runner 上執行，可以存取資料區與文件系統。

撰寫範例

name: Test
on:
  push:
    branches: ["main"]

jobs:
  build:
    name: build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout to Repo Directory
        uses: actions/checkout@v2
      - name: Use Node.js 18.16.0
        uses: actions/setup-node@v2
        with:
          node-version: "18.16.0"
      - name: NPM ci and cacheing
        uses: bahmutov/npm-install@v1
        with:
          useRollingCache: true

檢核通過畫面

參考資料

Workflow syntax for GitHub Actions

發佈日期：2025-08-30

更新日期：2025-08-30

Previous Post

【刷題】CodeWars-6kyu

CATALOG

1. CICD
2. 什麼是 CI/CD ？
3. CI/CD 解釋
1. 3.1. CI 持續整合（Continuous Integration 自動化整合）
2. 3.2. CD 持續部署（Continuous Deployment 自動化部屬）
4. CI/CD Toos
5. CICD 實作，以 GitHub Actions 為例
1. 5.1. 執行步驟
2. 5.2. YAML 語法指令說明
6. 參考資料