CI/CD 集成 #

┌─────────────────────────────────────────┐
│        Vercel CI/CD 选项                │
├─────────────────────────────────────────┤
│  内置 CI/CD    →  自动构建部署           │
│  GitHub Actions →  自定义工作流          │
│  GitLab CI     →  GitLab 集成           │
│  其他工具      →  通过 API 集成          │
└─────────────────────────────────────────┘

Git Push → Vercel 检测 → 触发构建 → 自动部署

┌──────────────────────────────────────────────────────┐
│                                                      │
│  main 分支 push                                      │
│       │                                              │
│       ▼                                              │
│  ┌─────────┐    ┌─────────┐    ┌─────────┐          │
│  │ 触发构建 │ ──▶│ 执行构建 │ ──▶│ 生产部署 │          │
│  └─────────┘    └─────────┘    └─────────┘          │
│                                                      │
│  PR 创建/更新                                        │
│       │                                              │
│       ▼                                              │
│  ┌─────────┐    ┌─────────┐    ┌─────────┐          │
│  │ 触发构建 │ ──▶│ 执行构建 │ ──▶│ 预览部署 │          │
│  └─────────┘    └─────────┘    └─────────┘          │
│                                                      │
└──────────────────────────────────────────────────────┘

Project Settings → Git
├── Production Branch    # 生产分支
├── Ignored Build Step   # 忽略构建条件
├── Auto Job Cancelation # 自动取消旧构建
└── Skipped Build Steps  # 跳过构建条件

┌─────────────────────────────────────────┐
│  Production Branch                      │
├─────────────────────────────────────────┤
│  Branch: [main ▼]                       │
│                                         │
│  当此分支有新提交时，自动部署到生产环境   │
└─────────────────────────────────────────┘

{
  "git": {
    "deploymentEnabled": {
      "exclude": [
        "README.md",
        "docs/**",
        ".vscode/**",
        "LICENSE"
      ]
    }
  }
}

Project Settings → Git → Ignored Build Step

git diff --quiet HEAD^ HEAD ./src/

Repository → Settings → Secrets and variables → Actions

vercel link

{
  "orgId": "team_xxx",
  "projectId": "prj_xxx"
}

name: Vercel Deployment

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

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Install Vercel CLI
        run: npm install --global vercel@latest

      - name: Pull Vercel Environment Information
        run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}

      - name: Build Project Artifacts
        run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}

      - name: Deploy Project Artifacts to Vercel
        run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}

name: Preview Deployment

on:
  pull_request:
    branches: [main]

jobs:
  preview:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Install Vercel CLI
        run: npm install --global vercel@latest

      - name: Pull Vercel Environment Information
        run: vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }}

      - name: Build Project Artifacts
        run: vercel build --token=${{ secrets.VERCEL_TOKEN }}

      - name: Deploy Project Artifacts to Vercel
        run: vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }} > deployment-url.txt

      - name: Comment PR with Deployment URL
        uses: actions/github-script@v6
        with:
          script: |
            const fs = require('fs');
            const url = fs.readFileSync('deployment-url.txt', 'utf8').trim();
            github.rest.issues.createComment({
              issue_number: context.issue.number,
              owner: context.repo.owner,
              repo: context.repo.repo,
              body: `🚀 Preview deployed to: ${url}`
            });

name: CI/CD Pipeline

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

env:
  VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}

jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'
      - run: npm ci
      - run: npm run lint

  test:
    runs-on: ubuntu-latest
    needs: lint
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'
      - run: npm ci
      - run: npm run test

  deploy-preview:
    runs-on: ubuntu-latest
    needs: test
    if: github.event_name == 'pull_request'
    steps:
      - uses: actions/checkout@v4
      - run: npm install --global vercel@latest
      - run: vercel pull --yes --environment=preview --token=$VERCEL_TOKEN
      - run: vercel build --token=$VERCEL_TOKEN
      - run: vercel deploy --prebuilt --token=$VERCEL_TOKEN

  deploy-production:
    runs-on: ubuntu-latest
    needs: test
    if: github.event_name == 'push' && github.ref == 'refs/heads/main'
    steps:
      - uses: actions/checkout@v4
      - run: npm install --global vercel@latest
      - run: vercel pull --yes --environment=production --token=$VERCEL_TOKEN
      - run: vercel build --prod --token=$VERCEL_TOKEN
      - run: vercel deploy --prebuilt --prod --token=$VERCEL_TOKEN

- name: Deploy to Vercel
  uses: amondnet/vercel-action@v25
  with:
    vercel-token: ${{ secrets.VERCEL_TOKEN }}
    vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
    vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
    vercel-args: '--prod'

Settings → CI/CD → Variables

stages:
  - test
  - deploy

variables:
  NODE_VERSION: '20'

.test_template:
  image: node:${NODE_VERSION}
  before_script:
    - npm ci
  cache:
    paths:
      - node_modules/

lint:
  extends: .test_template
  stage: test
  script:
    - npm run lint

test:
  extends: .test_template
  stage: test
  script:
    - npm run test

deploy_preview:
  stage: deploy
  image: node:${NODE_VERSION}
  rules:
    - if: $CI_MERGE_REQUEST_IID
  script:
    - npm install --global vercel@latest
    - vercel pull --yes --environment=preview --token=$VERCEL_TOKEN
    - vercel build --token=$VERCEL_TOKEN
    - vercel deploy --prebuilt --token=$VERCEL_TOKEN

deploy_production:
  stage: deploy
  image: node:${NODE_VERSION}
  rules:
    - if: $CI_COMMIT_BRANCH == 'main'
  script:
    - npm install --global vercel@latest
    - vercel pull --yes --environment=production --token=$VERCEL_TOKEN
    - vercel build --prod --token=$VERCEL_TOKEN
    - vercel deploy --prebuilt --prod --token=$VERCEL_TOKEN

curl -X POST "https://api.vercel.com/v13/deployments" \
  -H "Authorization: Bearer $VERCEL_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "name": "my-project",
    "gitSource": {
      "type": "github",
      "repo": "username/repo",
      "ref": "main"
    }
  }'

curl "https://api.vercel.com/v13/deployments/$DEPLOYMENT_ID" \
  -H "Authorization: Bearer $VERCEL_TOKEN"

curl "https://api.vercel.com/v6/deployments?projectId=$PROJECT_ID" \
  -H "Authorization: Bearer $VERCEL_TOKEN"

Project Settings → Git → Deploy Hooks

┌─────────────────────────────────────────┐
│  Create Deploy Hook                     │
├─────────────────────────────────────────┤
│  Name: [Deploy from CMS      ]          │
│  Branch: [main ▼]                       │
│                                         │
│  Hook URL:                              │
│  https://api.vercel.com/deploy...       │
│                                         │
│  [Create Hook]                          │
└─────────────────────────────────────────┘

curl -X POST "https://api.vercel.com/integrations/deploy/$HOOK_ID"

┌─────────────────────────────────────────┐
│        部署钩子使用场景                  │
├─────────────────────────────────────────┤
│  CMS 更新    →  内容更新后自动部署       │
│  定时任务    →  定期重新部署             │
│  外部系统    →  第三方触发部署           │
│  Webhook    →  事件触发部署             │
└─────────────────────────────────────────┘

- name: Cache node modules
  uses: actions/cache@v3
  with:
    path: ~/.npm
    key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
    restore-keys: |
      ${{ runner.os }}-node-

- name: Notify Slack
  if: always()
  uses: 8398a7/action-slack@v3
  with:
    status: ${{ job.status }}
    fields: repo,message,commit,author
  env:
    SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK }}

[![Deploy](https://vercel.com/button)](https://vercel.com)

┌─────────────────────────────────────────┐
│        推荐分支策略                      │
├─────────────────────────────────────────┤
│  main       →  生产环境                 │
│  develop    →  预览环境                 │
│  feature/*  →  PR 预览                  │
│  hotfix/*   →  紧急修复                 │
└─────────────────────────────────────────┘

deploy-staging:
  environment: staging
  steps:
    - run: vercel deploy --env STAGE=staging

deploy-production:
  environment: production
  steps:
    - run: vercel deploy --prod

rollback:
  runs-on: ubuntu-latest
  steps:
    - name: Rollback to previous deployment
      run: |
        vercel rollback ${{ inputs.deployment-url }} --token=$VERCEL_TOKEN