iT邦幫忙

0

前端人需要了解的 CI/CD

  • 分享至 

  • xImage
  •  

CICD

什麼是 CI/CD ?

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

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

CI/CD 解釋

CI 持續整合(Continuous Integration 自動化整合)

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

其行為包含:

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

CD 持續部署(Continuous Deployment 自動化部屬)

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

其行為包含:

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

CI/CD Toos

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

CICD 實作,以 GitHub Actions 為例

執行步驟

第一步:創建 Workflow 文件

新增資料夾 .github/workflows

第二步:編寫 Workflow 配置

新增 .yaml

第三步:推送到 GitHub

設定好 github repository 遠端倉庫,在每一次 git commitgit 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


圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言