22.10-CI/CD流水线

要点

  • CI/CD 是 Continuous Integration / Continuous Deployment 的缩写
  • CI 解决「代码合并前自动检查」的问题，CD 解决「检查通过后自动部署」的问题
  • 主流工具：GitHub Actions、GitLab CI、Jenkins
  • 这个系列用 GitHub Actions 做示例，因为它是目前最流行的选择

内容

1. CI/CD 是什么

开发者 push 代码
  │
  ├── CI（持续集成）
  │     ├── 拉取代码
  │     ├── 安装依赖
  │     ├── 类型检查
  │     ├── Lint
  │     ├── 测试
  │     └── 构建
  │
  └── CD（持续部署）
        ├── 部署到 staging
        ├── 集成测试
        └── 部署到 production

CI 的目标：在代码合并前发现问题。如果类型检查或测试失败，PR 不能合并。

CD 的目标：自动化部署流程。CI 通过后，自动把代码部署到目标环境。

2. GitHub Actions 基础

GitHub Actions 是 GitHub 内置的 CI/CD 工具，用 YAML 文件定义工作流：

# .github/workflows/ci.yml
name: CI
 
on:
  push:
    branches: [main]
  pull_request:
    branches: [main]
 
jobs:
  check:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
 
      - uses: actions/setup-node@v4
        with:
          node-version: 22
 
      - run: npm install
      - run: npm run check-types
      - run: npm run lint
      - run: npm test

2.1 核心概念

概念说明
Workflow工作流，定义在 .github/workflows/ 目录下
Event触发事件（push、pull_request、schedule 等）
Job任务，一个 workflow 可以有多个 job
Step步骤，一个 job 由多个 step 组成
Action可复用的步骤（如 actions/checkout@v4）
Runner运行 job 的虚拟机

3. PR 检查

每个 PR 自动跑类型检查和测试：

# .github/workflows/pr-check.yml
name: PR Check
 
on:
  pull_request:
    branches: [main]
 
jobs:
  check:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
 
      - uses: pnpm/action-setup@v4
 
      - uses: actions/setup-node@v4
        with:
          node-version: 22
          cache: pnpm
 
      - run: pnpm install --frozen-lockfile
      - run: pnpm check-types
      - run: pnpm lint
      - run: pnpm test

如果任何一个 step 失败，PR 不能合并。

4. 自动部署

push 到 main 后自动部署：

# .github/workflows/deploy.yml
name: Deploy
 
on:
  push:
    branches: [main]
 
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
 
      - uses: pnpm/action-setup@v4
 
      - uses: actions/setup-node@v4
        with:
          node-version: 22
          cache: pnpm
 
      - run: pnpm install --frozen-lockfile
      - run: pnpm check-types
      - run: pnpm test
 
      - name: Deploy to Cloudflare Workers
        env:
          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
        run: npx wrangler deploy --env production --minify

5. 多环境部署

staging 和 production 分开部署：

# .github/workflows/deploy-staging.yml
name: Deploy Staging
 
on:
  push:
    branches: [develop]
 
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 22
          cache: pnpm
      - run: pnpm install --frozen-lockfile
      - name: Deploy to Staging
        env:
          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
        run: npx wrangler deploy --env staging --minify
 
---
# .github/workflows/deploy-production.yml
name: Deploy Production
 
on:
  push:
    branches: [main]
 
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 22
          cache: pnpm
      - run: pnpm install --frozen-lockfile
      - name: Deploy to Production
        env:
          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
        run: npx wrangler deploy --env production --minify

6. 矩阵构建

测试多个 Node.js 版本：

jobs:
  test:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [18, 20, 22]
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: ${{ matrix.node-version }}
      - run: npm install
      - run: npm test

7. Secrets 管理

敏感信息（API Token、密码）存在 GitHub Secrets 里：

  1. Repository → Settings → Secrets and variables → Actions
  2. 点击 "New repository secret"
  3. 输入名称和值

在 workflow 里引用：

env:
  CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}

8. 缓存加速

缓存依赖安装，加速 CI：

- uses: actions/setup-node@v4
  with:
    node-version: 22
    cache: pnpm  # 自动缓存 pnpm 的依赖
 
# 或者手动缓存
- uses: actions/cache@v4
  with:
    path: ~/.pnpm-store
    key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }}
    restore-keys: |
      ${{ runner.os }}-pnpm-

9. 通知

部署成功或失败时通知：

- name: Notify Slack
  if: always()
  uses: rtCamp/action-slack-notify@v2
  env:
    SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK }}
    SLACK_MESSAGE: ${{ job.status == 'success' && '✅ 部署成功' || '❌ 部署失败' }}

10. 小结

CI/CD 流水线的核心：

  1. PR 检查：类型、lint、测试不过不让合并
  2. 自动部署：push 到 main 自动部署
  3. Secrets：敏感信息存在 CI 平台
  4. 缓存：加速依赖安装
  5. 通知：部署结果通知团队

GitHub Actions 是目前最流行的 CI/CD 工具，和 GitHub 深度集成，配置简单。