Day 14：第二週總複習 - 協作流程整合 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2025 iThome 鐵人賽

DAY 9

自我挑戰組

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

Day 14：第二週總複習 - 協作流程整合

17th鐵人賽

sharon_peng

2025-09-29 23:03:05

25 瀏覽

分享至

Git 完整工作流程視覺化圖解

📋 一、基本 Git 工作流程

┌──────────────┐      ┌──────────────┐      ┌──────────────┐      ┌──────────────┐
│  工作目錄    │  →    │   git add   │  →    │  git commit  │  →   │   git push   │
│  編輯檔案    │       │  加入暫存區  │       │  提交到本地   │      │  推送到遠端   │
└──────────────┘      └──────────────┘      └──────────────┘      └──────────────┘

操作指令：

# 步驟1：修改檔案
編輯 index.html...

# 步驟2：加入暫存區
git add index.html

# 步驟3：提交到本地
git commit -m "feat: 新增首頁"

# 步驟4：推送到 GitHub
git push origin main

🌿 二、分支開發完整流程

分支結構：

main (主分支 - 正式版本)
│
├── ● ─── ● ─── ● ─── ● ───────────────────────────►
│
└── feature/homepage (功能分支 - 開發中)
    │
    ├── ● ─── ● ─── ● ───────────────►
    │
    └── hotfix/bug-123 (緊急修復分支)
        │
        └── ● ─── ● ───────►

8 步驟流程：

┌────────────────────────────────────────────────────────────────┐
│  步驟1：建立分支                                                │
│  git checkout -b feature/homepage                              │
│  → 建立並切換到新分支，開始獨立開發                               │
└────────────────────────────────────────────────────────────────┘
         ↓
┌────────────────────────────────────────────────────────────────┐
│  步驟2：開發功能                                                │
│  修改檔案、測試功能                                             │
│  → 可以多次 commit，紀錄開發過程                                 │
└────────────────────────────────────────────────────────────────┘
         ↓
┌────────────────────────────────────────────────────────────────┐
│  步驟3：整理歷史                                                │
│  git rebase -i HEAD~3                                          │
│  → 用 squash 合併零碎的提交                                     │
└────────────────────────────────────────────────────────────────┘
         ↓
┌────────────────────────────────────────────────────────────────┐
│  步驟4：推送分支                                                │
│  git push origin feature/homepage                              │
│  → 將分支推送到 GitHub                                          │
└────────────────────────────────────────────────────────────────┘
         ↓
┌────────────────────────────────────────────────────────────────┐
│  步驟5：建立 PR                                                 │
│  在 GitHub 建立 Pull Request                                    │
│  → 請求合併到 main 分支                                         │
└────────────────────────────────────────────────────────────────┘
         ↓
┌────────────────────────────────────────────────────────────────┐
│  步驟6：Code Review                                            │
│  團隊成員檢查程式碼                                             │
│  → 提出建議和修改意見                                           │
└────────────────────────────────────────────────────────────────┘
         ↓
┌────────────────────────────────────────────────────────────────┐
│  步驟7：合併分支                                                │
│  Review 通過後合併                                             │
│  → 功能正式加入 main 分支                                       │
└────────────────────────────────────────────────────────────────┘
         ↓
┌────────────────────────────────────────────────────────────────┐
│  步驟8：版本標記                                                │
│  git tag -a v1.0.0                                             │
│  → 為重要版本打標籤                                             │
└────────────────────────────────────────────────────────────────┘

🚨 三、緊急修復工作流程（Stash 應用）

情境：正在開發功能時，突然需要緊急修復 bug

時間軸：

【1】正在開發新功能
    │
    ├─ git checkout -b feature/user-profile
    └─ 編輯檔案中... (程式碼寫到一半)
    
         ↓
         
【2】😱 突然！緊急狀況
    │
    └─ 主管：「網站登入壞了！立刻修復！」
    
         ↓
         
【3】暫存目前工作
    │
    ├─ git stash push -u -m "開發中：使用者資料頁面"
    └─ 工作目錄變乾淨了！
    
         ↓
         
【4】處理緊急修復
    │
    ├─ git checkout main
    ├─ git checkout -b hotfix/login-fix
    ├─ 修復 bug...
    ├─ git commit -m "hotfix: 修復登入問題"
    └─ git push origin hotfix/login-fix
    
         ↓
         
【5】✅ 修復完成，回到原本工作
    │
    ├─ git checkout feature/user-profile
    ├─ git stash pop
    └─ 之前的工作完整恢復！

🔄 四、Rebase 整理提交歷史

問題：提交歷史很亂

整理前（混亂）                          整理後（清晰）
━━━━━━━━━━━━━━━                        ━━━━━━━━━━━━━━━
A: feat: 新增登入頁面                    A: feat: 完成使用者登入功能
B: fix: 修正錯字                         
C: fix: 又修正錯字                       包含：
D: style: 調整樣式             ──►       - 登入頁面設計
E: fix: 忘記加檔案                       - 表單驗證
F: feat: 完成登入功能                    - API 整合

操作方式：

# 使用 interactive rebase 整理最近 6 個提交
git rebase -i HEAD~6

# 在編輯器中：
pick A feat: 新增登入頁面
squash B fix: 修正錯字         ← 合併到 A
squash C fix: 又修正錯字       ← 合併到 A
squash D style: 調整樣式       ← 合併到 A
squash E fix: 忘記加檔案       ← 合併到 A
squash F feat: 完成登入功能    ← 合併到 A

# 結果：6 個提交合併成 1 個乾淨的提交

🌍 五、Fork 開源貢獻流程

┌─────────────────────────────────────┐
│  原專案 (upstream)                   │
│  github.com/author/project          │
└─────────────────────────────────────┘
              ↓ (Fork)
┌─────────────────────────────────────┐
│  Fork 到你的帳號                     │
│  github.com/你/project              │
└─────────────────────────────────────┘
              ↓
┌─────────────────────────────────────┐
│  Clone 到本地                       │
│  git clone your-fork                │
└─────────────────────────────────────┘
              ↓
┌─────────────────────────────────────┐
│  設定 upstream                      │
│  git remote add upstream            │
└─────────────────────────────────────┘
              ↓
┌─────────────────────────────────────┐
│  建立分支開發                        │
│  git checkout -b fix/bug            │
└─────────────────────────────────────┘
              ↓
┌─────────────────────────────────────┐
│  推送到你的 Fork                     │
│  git push origin fix/bug            │
└─────────────────────────────────────┘
              ↓
┌─────────────────────────────────────┐
│  建立 Pull Request                  │
│  請求合併到原專案                    │
└─────────────────────────────────────┘

完整指令：

# 1. Fork 專案（在 GitHub 網頁上點 Fork）

# 2. Clone 你的 Fork
git clone https://github.com/你的帳號/project.git

# 3. 設定原專案為 upstream
git remote add upstream https://github.com/原作者/project.git

# 4. 同步最新版本
git fetch upstream
git merge upstream/main

# 5. 建立分支貢獻
git checkout -b fix/bug-123
# 修改檔案...
git commit -m "fix: 修復問題"
git push origin fix/bug-123

# 6. 在 GitHub 建立 Pull Request

📚 六、常用指令快速對照

┌─────────────────────────┬──────────────────────────────────┬───────────────────────┐
│ 情境                    │ 指令                              │ 說明                  │
├─────────────────────────┼──────────────────────────────────┼───────────────────────┤
│ 建立並切換分支          │ git checkout -b feature/xxx      │ 一次完成建立和切換       │
├─────────────────────────┼──────────────────────────────────┼───────────────────────┤
│ 暫存未完成工作          │ git stash push -u -m "描述"      │ 包含新檔案的暫存         │
├─────────────────────────┼──────────────────────────────────┼───────────────────────┤
│ 恢復暫存工作            │ git stash pop                    │ 恢復並刪除 stash        │
├─────────────────────────┼──────────────────────────────────┼───────────────────────┤
│ 整理提交歷史            │ git rebase -i HEAD~5             │ 整理最近 5 個提交       │
├─────────────────────────┼──────────────────────────────────┼───────────────────────┤
│ 建立版本標籤            │ git tag -a v1.0.0 -m "說明"      │ 註解標籤（推薦）         │
├─────────────────────────┼──────────────────────────────────┼───────────────────────┤
│ 設定 upstream           │ git remote add upstream URL      │ 連接原專案             │
├─────────────────────────┼──────────────────────────────────┼───────────────────────┤
│ 同步 upstream           │ git fetch upstream               │ 拉取並合併更新          │
│                         │ git merge upstream/main          │                       │
└─────────────────────────┴──────────────────────────────────┴───────────────────────┘

🎯 七、完整實戰流程總結

企業級開發完整流程（8 步驟）：

┌────────┐    ┌────────┐    ┌────────┐    ┌────────┐
│ 1️⃣ 開始 │ →  │ 2️⃣ 開發 │ →  │ 3️⃣ 整理 │ →  │ 4️⃣ 推送 │
│checkout│    │ commit │    │ rebase │    │  push  │
└────────┘    └────────┘    └────────┘    └────────┘
                                ↓
┌────────┐    ┌────────┐    ┌────────┐    ┌────────┐
│ 8️⃣ 發版 │ ←  │ 7️⃣ 合併 │ ←  │6️⃣Review│ ←  │  5️⃣ PR │
│  tag   │    │ merge  │    │ review │    │   PR   │
└────────┘    └────────┘    └────────┘    └────────┘

詳細步驟：

1️⃣ 開始：git checkout -b feature/xxx
2️⃣ 開發：多次 commit
3️⃣ 整理：git rebase -i
4️⃣ 推送：git push origin
5️⃣ PR：建立 Pull Request
6️⃣ Review：Code Review
7️⃣ 合併：Merge PR
8️⃣ 發版：git tag v1.0.0

🔄 完整工作流程三種情境

情境A：開發新功能流程

1. git checkout -b feature/xxx        → 建立功能分支
2. 開發 + 多次 commit                 → 開發功能
3. git rebase -i HEAD~n              → 整理提交歷史
4. git push origin feature/xxx        → 推送分支
5. 在 GitHub 建立 Pull Request       → 建立 PR
6. Code Review                        → 團隊檢查
7. 合併到 main                        → 完成功能
8. git tag -a v1.x.x                 → 標記版本

情境B：緊急修復流程

1. git stash push -u                 → 暫存目前工作
2. git checkout main                 → 切換到 main
3. git checkout -b hotfix/xxx        → 建立修復分支
4. 修復 + commit                     → 快速修復
5. 建立 PR 並快速合併                → 緊急處理
6. git checkout feature/xxx          → 回到原分支
7. git stash pop                     → 恢復工作

情境C：開源貢獻流程

1. 在 GitHub Fork 專案               → 複製專案
2. git clone your-fork               → 下載到本地
3. git remote add upstream           → 設定上游
4. git fetch upstream                → 同步最新
5. git checkout -b fix/issue         → 建立修復分支
6. 修改 + commit                     → 貢獻程式碼
7. git push origin fix/issue         → 推送到 Fork
8. 建立 PR 到原專案                  → 提交貢獻

📊 Git 指令層級關係圖

                    ┌─────────────────┐
                    │   遠端倉庫       │
                    │   (GitHub)      │
                    └─────────────────┘
                            ↑ ↓
                    git push / git pull
                            ↑ ↓
                    ┌─────────────────┐
                    │   本地倉庫       │
                    │   (.git)        │
                    └─────────────────┘
                            ↑ ↓
                      git commit
                            ↑ ↓
                    ┌─────────────────┐
                    │   暫存區         │
                    │   (Staging)     │
                    └─────────────────┘
                            ↑ ↓
                       git add
                            ↑ ↓
                    ┌─────────────────┐
                    │   工作目錄       │
                    │   (Working Dir) │
                    └─────────────────┘