11.7 CI CD配置

---

1. 为什么要学这个?

手动时代的噩梦： 你改了一行代码，觉得没问题，直接 Push 到 main。 结果这一行代码引入了一个 Bug，导致生产环境白屏。 原因：你忘了在本地跑测试 (npm test)，或者你本地的环境和线上不一样。

CI (Continuous Integration) 就像工厂的全自动质检流水线。 不管你是谁，不管你多自信，代码想入库，必须先经过机器人的检查。

---

2. 核心概念：GitHub Actions

这是目前最流行、免费额度最慷慨的 CI/CD 工具。 只要你在项目里放一个 .yml 文件，GitHub 就会免费送你一台虚拟电脑（Runner）来跑你的脚本。

核心术语

• Workflow: 一整套流程 (比如 "每次 Push 时运行")。
• Job: 具体的任务 (比如 "Build Job", "Test Job")。
• Step: 任务里的步骤 (比如 "安装 Node.js", "安装依赖")。

---

3. 解决方案 (HOW)

1. 创建 Workflow 文件

在项目根目录创建 .github/workflows/ci.yml。

name: CI Quality Gate

# 触发条件：当推送到 main 或者提交 PR 时
on: [push, pull_request]

jobs:
  build-and-test:
    runs-on: ubuntu-latest # 申请一台 Ubuntu 虚拟机
    
    steps:
      - name: Checkout code
        uses: actions/checkout@v4 # 1. 拉取你的代码
        
      - name: Install Node.js
        uses: actions/setup-node@v4 # 2. 安装 Node.js
        with:
          node-version: 20
          cache: 'npm' # 自动缓存依赖，加速
          
      - name: Install Dependencies
        run: npm ci # 3. 严格安装依赖 (比 npm install 更安全)
        
      - name: Lint Check
        run: npm run lint # 4. 检查代码风格
        
      - name: Type Check
        run: npm run type-check # 5. 检查 TypeScript 类型 (如果有)
        
      - name: Build Test
        run: npm run build # 6. 试运行构建 (确保能 Build 通)

2. 为什么是 npm ci 而不是 npm install?

• npm install: 会根据 package.json 更新 package-lock.json。这在 CI 环境是不允许的。
• npm ci: 严格按照 package-lock.json 安装。如果 lock 文件和 json 文件不一致，直接报错。这是 CI 环境的标准动作。

流水线示意图

graph TD
    Push["git push"] --> GitHub["GitHub Actions 触发"]
    
    subgraph CI ["自动质检工厂"]
        GitHub --> Install["npm ci (装依赖)"]
        Install --> Lint["ESLint (查风格)"]
        Lint --> Test["Vitest (跑测试)"]
        Test --> Build["Next Build (试构建)"]
    end
    
    Build -- Fail --> Reject["❌ 变红: 禁止合并"]
    Build -- Pass --> Approve["✅ 变绿: 允许合并"]
    
    style Reject fill:#ffcdd2,stroke:#c62828
    style Approve fill:#c8e6c9,stroke:#2e7d32

---

4. 真实案例

---

5. 本章小结

1. 自动化：不要让"跑测试"变成靠自觉的道德约束。
2. npm ci：这是 CI 环境的唯一指定安装命令。
3. CI 必须绿：团队协作的第一条铁律——Never merge a broken build。