2025 iThome 鐵人賽

DAY 9

自我挑戰組

30天 Git 版本控制實戰筆記系列第 13 篇

Day 13：GitHub Actions 基礎 CI/CD - 自動化測試與部署

17th鐵人賽

sharon_peng

2025-09-28 23:29:19

12 瀏覽

分享至

今日目標
• 理解 CI/CD 的概念與重要性
• 學習 GitHub Actions 的基本使用
• 建立自動化測試和部署流程
• 提升專案的專業度和可靠性
什麼是 CI/CD？
職場真實情況：
❌ 傳統手動部署：
開發者：「我改好了，來部署吧」
→ 手動測試 30 分鐘
→ 手動上傳檔案
→ 發現 bug，回頭修復
→ 又要重新測試和部署
→ 客戶：「網站怎麼還是壞的？」

✅ 自動化 CI/CD：
開發者：git push
→ GitHub Actions 自動測試
→ 測試通過自動部署
→ 5 分鐘後網站更新完成
→ 客戶：「哇，更新好快！」
CI/CD 簡介：
• CI (Continuous Integration)：持續整合
o 每次程式碼變更都自動測試
o 及早發現問題
o 確保程式碼品質
• CD (Continuous Deployment)：持續部署
o 測試通過後自動部署
o 快速交付新功能
o 減少人為錯誤
操作步驟
步驟1：了解 GitHub Actions 概念
GitHub Actions 是什麼？
GitHub Actions = GitHub 內建的自動化工具

觸發條件 → 執行工作 → 完成任務
↓ ↓ ↓
git push → 運行測試 → 部署網站
建立 PR → 檢查程式碼 → 合併分支
發布 Tag → 建立發布包 → 發送通知
基本概念：
• Workflow（工作流程）：自動化的完整流程
• Job（工作）：workflow 中的一個任務群組
• Step（步驟）：job 中的具體執行步驟
• Action（動作）：可重複使用的步驟組件
步驟2：建立第一個 Workflow
在你的專案中建立 GitHub Actions：

確保在你的專案目錄

cd company-website

建立 GitHub Actions 資料夾

mkdir -p .github/workflows

建立第一個 workflow 檔案

touch .github/workflows/ci.yml
編輯 .github/workflows/ci.yml：
name: CI - 持續整合

觸發條件

on:
push:
branches: [ main ]
pull_request:
branches: [ main ]

工作流程

jobs:
test:
name: 測試和檢查
runs-on: ubuntu-latest

steps:
# 步驟1：檢出程式碼
- name: 檢出程式碼
  uses: actions/checkout@v3

# 步驟2：檢查 HTML 語法
- name: 檢查 HTML 語法
  run: |
    echo "檢查 HTML 檔案語法..."
    # 檢查是否有基本的 HTML 結構
    for file in *.html; do
      if [ -f "$file" ]; then
        echo "檢查 $file"
        # 簡單檢查是否包含基本標籤
        if ! grep -q "<html>" "$file"; then
          echo "錯誤: $file 缺少 <html> 標籤"
          exit 1
        fi
        if ! grep -q "<head>" "$file"; then
          echo "錯誤: $file 缺少 <head> 標籤"
          exit 1
        fi
        if ! grep -q "<body>" "$file"; then
          echo "錯誤: $file 缺少 <body> 標籤"
          exit 1
        fi
        echo "✅ $file 語法正確"
      fi
    done

# 步驟3：檢查 CSS 檔案
- name: 檢查 CSS 檔案
  run: |
    echo "檢查 CSS 檔案..."
    if [ -d "css" ]; then
      for file in css/*.css; do
        if [ -f "$file" ]; then
          echo "檢查 $file"
          # 檢查檔案是否為空或格式基本正確
          if [ ! -s "$file" ]; then
            echo "警告: $file 是空檔案"
          else
            echo "✅ $file 存在且非空"
          fi
        fi
      done
    fi

# 步驟4：檢查連結
- name: 檢查內部連結
  run: |
    echo "檢查內部連結..."
    # 檢查 HTML 檔案中的內部連結是否存在
    for file in *.html; do
      if [ -f "$file" ]; then
        echo "檢查 $file 中的連結"
        # 提取 href 屬性中的 .html 檔案
        grep -o 'href="[^"]*\.html"' "$file" | sed 's/href="//g' | sed 's/"//g' | while read link; do
          if [ ! -f "$link" ]; then
            echo "錯誤: $file 中的連結 $link 不存在"
            exit 1
          else
            echo "✅ 連結 $link 正確"
          fi
        done
      fi
    done

# 步驟5：模擬部署測試
- name: 模擬部署測試
  run: |
    echo "模擬部署到測試環境..."
    echo "📦 準備部署檔案..."
    
    # 檢查必要檔案是否存在
    required_files=("index.html")
    for file in "${required_files[@]}"; do
      if [ ! -f "$file" ]; then
        echo "錯誤: 必要檔案 $file 不存在"
        exit 1
      fi
    done
    
    echo "✅ 所有檢查通過！"
    echo "🚀 準備部署到生產環境"

步驟3：建立部署 Workflow
建立 .github/workflows/deploy.yml：
name: Deploy - 自動部署

只在 main 分支有新提交時觸發

on:
push:
branches: [ main ]

jobs:
deploy:
name: 部署到 GitHub Pages
runs-on: ubuntu-latest

steps:
# 檢出程式碼
- name: 檢出程式碼
  uses: actions/checkout@v3

# 準備部署檔案
- name: 準備部署檔案
  run: |
    echo "準備部署檔案..."
    # 建立部署目錄
    mkdir -p deploy
    
    # 複製網站檔案
    cp *.html deploy/ 2>/dev/null || echo "沒有 HTML 檔案"
    cp -r css deploy/ 2>/dev/null || echo "沒有 CSS 資料夾"
    cp -r js deploy/ 2>/dev/null || echo "沒有 JS 資料夾"
    cp -r images deploy/ 2>/dev/null || echo "沒有 images 資料夾"
    cp -r assets deploy/ 2>/dev/null || echo "沒有 assets 資料夾"
    
    # 建立部署資訊檔案
    echo "# 部署資訊

部署時間: $(date)
Git Commit: ${{ github.sha }}
分支: ${{ github.ref }}
觸發者: ${{ github.actor }}

這是自動部署的網站！" > deploy/DEPLOY_INFO.md

    echo "📁 部署檔案準備完成"
    ls -la deploy/

# 部署到 GitHub Pages
- name: 部署到 GitHub Pages
  uses: peaceiris/actions-gh-pages@v3
  with:
    github_token: ${{ secrets.GITHUB_TOKEN }}
    publish_dir: ./deploy
    commit_message: "🚀 自動部署: ${{ github.event.head_commit.message }}"

步驟4：建立發布 Workflow
建立 .github/workflows/release.yml：
name: Release - 版本發布

當建立新 tag 時觸發

on:
push:
tags:
- 'v*'

jobs:
release:
name: 建立版本發布
runs-on: ubuntu-latest

steps:
- name: 檢出程式碼
  uses: actions/checkout@v3

- name: 準備發布檔案
  run: |
    echo "準備發布檔案..."
    
    # 建立發布目錄
    mkdir -p release
    
    # 打包網站檔案
    zip -r release/website-${{ github.ref_name }}.zip . \
      -x "*.git*" "*.github*" "node_modules/*" "*.md"
    
    # 建立版本說明
    echo "# 網站版本 ${{ github.ref_name }}

📦 發布內容

完整的網站檔案
所有頁面和樣式
靜態資源檔案

🚀 部署方式

下載 website-${{ github.ref_name }}.zip
解壓縮到網站目錄
配置網頁伺服器指向 index.html

📋 版本資訊

發布時間: $(date)
Git 提交: ${{ github.sha }}
發布者: ${{ github.actor }}

🔗 線上展示

網站已自動部署到 GitHub Pages！" > release/RELEASE_NOTES.md

    echo "✅ 發布檔案準備完成"

- name: 建立 GitHub Release
  uses: softprops/action-gh-release@v1
  with:
    files: |
      release/website-${{ github.ref_name }}.zip
    body_path: release/RELEASE_NOTES.md
    draft: false
    prerelease: false
  env:
    GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

步驟5：提交並觀察 Actions 運行
提交 Workflow 檔案：

檢查新增的檔案

git status

加入所有 workflow 檔案

git add .github/

提交

git commit -m "feat: 新增 GitHub Actions CI/CD workflow

新增持續整合檢查 (ci.yml)
新增自動部署流程 (deploy.yml)
新增版本發布自動化 (release.yml)
包含 HTML/CSS 語法檢查
自動部署到 GitHub Pages
自動建立版本發布"

推送到 GitHub

git push origin main
觀察 Actions 執行：

推送後，前往 GitHub 查看：

1. 進入你的 repository

2. 點選 "Actions" 標籤

3. 你會看到工作流程正在執行

4. 點選進入查看詳細執行過程

GitHub Pages 部署設定
步驟6：啟用 GitHub Pages
在 GitHub 網頁設定：

進入你的 repository
點選 "Settings" 標籤
滾動到 "Pages" 區域
Source 選擇 "GitHub Actions"
儲存設定
測試部署：

做一個小修改觸發部署

echo "" >> index.html

git add index.html
git commit -m "test: 測試自動部署功能"
git push origin main

幾分鐘後，你的網站就會自動更新！

進階 Actions 應用
步驟7：新增狀態徽章
在 README.md 加入狀態徽章：

公司網站專案

專案特色

✅ 自動化測試
🚀 持續部署
📦 版本發布自動化
🔍 程式碼品質檢查

線上展示

🌐 查看網站

技術特色

GitHub Actions CI/CD
自動化部署到 GitHub Pages
HTML/CSS 語法檢查
自動版本發布
步驟8：測試版本發布
建立新版本標籤：

建立版本標籤

git tag -a v1.3.0 -m "Release v1.3.0: 新增 GitHub Actions CI/CD

🚀 新功能：

完整的 CI/CD 流程
自動化測試檢查
自動部署到 GitHub Pages
版本發布自動化

🔧 技術改進：

HTML/CSS 語法驗證
內部連結檢查
部署流程優化
專業的 DevOps 實踐"

推送標籤（會觸發發布 workflow）

git push origin v1.3.0
CI/CD 最佳實踐
✅ Workflow 設計原則：
□ 快速執行（< 10 分鐘）
□ 可靠穩定（不會隨機失敗）
□ 清楚的錯誤訊息
□ 適當的通知機制
□ 安全的秘密管理
✅ 測試策略：
□ 語法檢查（HTML, CSS, JS）
□ 連結驗證（內部連結存在性）
□ 檔案完整性檢查
□ 部署前的煙霧測試
□ 效能基準測試（可選）
✅ 部署策略：
□ 分階段部署（測試 → 正式）
□ 回滾機制（出問題能快速恢復）
□ 健康檢查（部署後驗證）
□ 通知機制（成功/失敗都要通知）
□ 監控警報（持續監控運行狀態）
職場價值與應用
✨ 履歷加分項目：
「建立完整的 CI/CD 流程，包含：

自動化測試和程式碼檢查
持續部署到生產環境
版本發布自動化
提升團隊開發效率 50%」
🎯 面試談話重點：
面試官：「你有 DevOps 經驗嗎？」

你可以說：
「我使用 GitHub Actions 建立了完整的 CI/CD 流程，
包含自動測試、程式碼檢查和部署自動化。
這讓我們能夠快速且安全地交付功能，
大幅減少手動操作的錯誤。」
今日重點回顧
• ✅ 理解 CI/CD 的概念和價值
• ✅ 學會建立 GitHub Actions workflow
• ✅ 實作自動化測試和部署
• ✅ 建立專業的 DevOps 實踐
核心檔案總結
.github/workflows/
├── ci.yml # 持續整合檢查
├── deploy.yml # 自動部署
└── release.yml # 版本發布

觸發條件：

Push 到 main → 執行測試和部署
建立 PR → 執行測試檢查
建立 Tag → 自動發布版本

Day 12：Fork 與開源貢獻 - 參與開源社群

系列文

30天 Git 版本控制實戰筆記共 13 篇

RSS系列文訂閱系列文

0 人訂閱

完整目錄

熱門推薦

{{ item.channelVendor }} | {{ item.webinarstarted }} |

直播中

尚未有邦友留言

立即登入留言

參賽組數

902 組

團體組數

37 組

累計文章數

13055 篇

完賽人數

114 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 17th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react

IT邦幫忙

30天 Git 版本控制實戰筆記系列 第 13 篇