測驗：CI/CD 是什麼？為什麼全端專案需要自動部署？
共 5 題，點選答案後會立即顯示結果
1. CI（Continuous Integration）的主要功能是什麼？
2. 在 GitHub Actions 中，Workflow 檔案應該放在哪個路徑？
3. 以下哪個是 GitHub Actions 四個核心概念中，代表「執行環境」的術語？
4. YAML 檔案中，以下哪個說法是正確的？
5. 以下哪個觸發條件可以讓 Workflow 在 GitHub 網頁上手動點按鈕執行？
on:
???
一句話說明
CI/CD 讓代碼推上去後，自動測試、自動部署，不用手動操作。
這篇在講什麼
你用 AI 寫完代碼，想部署到伺服器，傳統做法是：
- 手動跑測試
- 手動打包
- 手動上傳到伺服器
- 手動重啟服務
這個流程重複 100 次後，你會開始懷疑人生。
CI/CD 就是把這些「手動」變成「自動」。
CI 和 CD 的差異
CI（Continuous Integration）持續整合
你推代碼 → 自動跑測試 → 告訴你有沒有壞掉
翻譯：每次 push 代碼，自動檢查有沒有搞砸。
CD（Continuous Deployment）持續部署
測試通過 → 自動部署到伺服器 → 用戶馬上看到新版本
翻譯：測試過了，自動幫你上線。
一張圖看懂
推代碼 → [CI] 自動測試 → [CD] 自動部署 → 上線
↓ ↓
測試失敗？ 部署失敗？
↓ ↓
通知你修 通知你修
Code language: CSS (css)為什麼全端專案需要自動部署？
手動部署的三大痛點
| 痛點 | 描述 | 後果 |
|---|---|---|
| 忘記步驟 | 今天忘記跑測試，明天忘記更新設定 | 上線出包 |
| 浪費時間 | 每次部署花 30 分鐘做重複的事 | 一天部署 3 次 = 浪費 1.5 小時 |
| 人為錯誤 | 手滑打錯指令、上傳錯檔案 | 網站掛掉 |
自動部署的好處
你：git push
GitHub Actions：我來處理剩下的
10 分鐘後：新版本已上線
真正的好處：你可以專心寫代碼，不用管部署。
GitHub Actions 核心概念
GitHub Actions 就是 GitHub 內建的 CI/CD 工具。免費，不用額外設定伺服器。
四個核心名詞
# 這是 Workflow（工作流程）
name: Deploy My App
on: push # 觸發條件：有人 push 時執行
jobs: # Jobs（工作）：要做的事
build: # 這是一個 Job，叫做 build
runs-on: ubuntu-latest # Runner（執行環境）：用 Ubuntu
steps: # Steps（步驟）：這個 Job 裡的步驟
- name: 第一步
run: echo "Hello"
- name: 第二步
run: echo "World"
Code language: PHP (php)翻譯成白話
| 術語 | 白話 | 比喻 |
|---|---|---|
| Workflow | 整個自動化流程 | 一份食譜 |
| Job | 流程裡的一個工作 | 食譜裡的一道菜 |
| Step | 工作裡的一個步驟 | 做這道菜的步驟 |
| Runner | 執行這些步驟的電腦 | 負責做菜的廚師 |
檔案放哪裡？
你的專案/
├── .github/
│ └── workflows/
│ └── deploy.yml ← Workflow 檔案放這裡
├── src/
└── package.json
YAML 語法：3 分鐘看懂
GitHub Actions 用 YAML 格式。不用背，看懂就好。
最小範例
name: My Workflow
on: push
jobs:
say-hello:
runs-on: ubuntu-latest
steps:
- run: echo "Hello World"
Code language: PHP (php)逐行翻譯
name: My Workflow # 這個 workflow 叫什麼名字（顯示用）
on: push # 什麼時候執行？push 的時候
jobs: # 開始定義要做的工作
say-hello: # 第一個工作，叫 say-hello
runs-on: ubuntu-latest # 用最新版 Ubuntu 執行
steps: # 這個工作的步驟
- run: echo "Hello World" # 執行這個指令
Code language: PHP (php)YAML 縮排很重要
# 正確：用 2 個空格縮排
jobs:
build:
steps:
- run: echo "ok"
# 錯誤：縮排不一致會報錯
jobs:
build:
steps: # 少一個空格，會壞掉
Code language: PHP (php)實作：建立你的第一個 Workflow
步驟 1：建立檔案
在你的專案裡建立這個路徑的檔案：
.github/workflows/hello.yml
步驟 2：貼上這段代碼
name: Hello World
on:
push:
branches: [main] # 只有 push 到 main 分支時才執行
jobs:
greet:
runs-on: ubuntu-latest
steps:
- name: Say Hello
run: echo "Hello from GitHub Actions!"
- name: Show Date
run: date
- name: Show Current Directory
run: pwd
Code language: PHP (php)步驟 3：推上去
git add .github/workflows/hello.yml
git commit -m "Add first GitHub Actions workflow"
git push origin main
Code language: JavaScript (javascript)步驟 4：看結果
去 GitHub 你的 repo，點上面的 Actions 標籤頁。
你會看到：
Hello World
greet
✓ Say Hello
✓ Show Date
✓ Show Current Directory
Code language: JavaScript (javascript)常見的觸發條件
# 只有 push 到 main 時執行
on:
push:
branches: [main]
# push 或開 PR 時執行
on:
push:
branches: [main]
pull_request:
branches: [main]
# 手動執行（在 GitHub 網頁上點按鈕）
on:
workflow_dispatch:
# 定時執行（每天早上 9 點）
on:
schedule:
- cron: '0 9 * * *'
Code language: PHP (php)翻譯：
| 觸發條件 | 什麼時候執行 |
|---|---|
push |
有人推代碼 |
pull_request |
有人開 PR |
workflow_dispatch |
手動點按鈕 |
schedule |
定時（用 cron 語法） |
Vibe Coder 檢查點
看到 GitHub Actions workflow 時確認：
- [ ] 檔案位置對嗎？ 必須在
.github/workflows/資料夾裡 - [ ] 觸發條件對嗎？
on:後面寫的是什麼時候執行 - [ ] 有
runs-on嗎？ 沒指定 Runner 會報錯 - [ ] 縮排正確嗎？ YAML 對縮排很敏感，用 2 個空格
這篇學到什麼
| 概念 | 一句話記憶 |
|---|---|
| CI | 自動跑測試 |
| CD | 自動部署 |
| Workflow | 整個自動化流程 |
| Job | 流程裡的一個工作 |
| Step | 工作裡的一個步驟 |
| Runner | 執行的電腦（通常用 ubuntu-latest） |
下一篇預告
學會基本概念後，下一篇我們會看真正的部署 workflow：
- 如何用 SSH 連到伺服器
- 如何安全地存放密碼（GitHub Secrets）
- 實作一個完整的前端部署流程
進階測驗：CI/CD 是什麼？為什麼全端專案需要自動部署？
測驗目標：驗證你是否能在實際情境中應用所學。
共 5 題，包含情境題與錯誤診斷題。
共 5 題，包含情境題與錯誤診斷題。
1. 你剛加入一個全端專案團隊，發現目前的部署流程是這樣的：情境題
1. 開發者手動在本地跑測試
2. 手動打包前端程式碼
3. 用 FTP 上傳到伺服器
4. SSH 進伺服器重啟服務
團隊一天需要部署 3-4 次，每次約花 30 分鐘。你會建議導入什麼來改善這個問題？
2. 你想讓 GitHub Actions 在以下兩種情況執行：(1) 推送到 main 分支時 (2) 有人開 PR 到 main 分支時。應該如何設定觸發條件？情境題
3. 你需要建立一個 Workflow，包含兩個步驟：先顯示目前時間，再顯示目前目錄。以下哪個設定是正確的？情境題
4. 小明建立了以下 Workflow 檔案，但 push 後 GitHub Actions 完全沒有執行。最可能的原因是什麼？錯誤診斷
檔案位置：workflows/deploy.yml
name: Deploy
on: push
jobs:
deploy:
runs-on: ubuntu-latest
steps:
– run: echo “Deploying…”
5. 小華的 Workflow 出現錯誤訊息：「yaml: line 5: mapping values are not allowed in this context」。以下是他的設定檔，問題出在哪裡？錯誤診斷
name: Test Workflow
on: push
jobs:
test:
runs-on: ubuntu-latest
steps:
– run: echo “Hello”