如何在 Vercel 上实现 CI/CD 流程？

Vercel 提供了强大的 CI/CD（持续集成/持续部署）功能，使开发者能够自动化构建、测试和部署流程。以下是实现 Vercel CI/CD 流程的详细指南。

Vercel CI/CD 基础

1. 自动化部署

Vercel 通过 Git 集成实现自动化部署：

支持的 Git 提供商：

GitHub
GitLab
Bitbucket

部署触发条件：

推送代码到仓库
创建 Pull Request
合并 Pull Request 到主分支
推送标签

2. 部署环境

Vercel 支持三种部署环境：

Production（生产环境）：

部署到主域名
使用生产环境变量
URL: https://your-project.vercel.app

Preview（预览环境）：

为每个分支或 PR 生成唯一 URL
使用预览环境变量
URL: https://your-project-branch.vercel.app

Development（开发环境）：

本地开发使用
使用开发环境变量
通过 Vercel CLI 访问

配置 CI/CD 流程

1. Git 集成设置

连接 Git 仓库：

在 Vercel Dashboard 创建新项目
选择 "Import Git Repository"
授权 Vercel 访问你的 Git 账户
选择要部署的仓库
配置构建设置

配置构建设置：

javascript
// vercel.json
{
  "version": 2,
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "devCommand": "npm run dev",
  "installCommand": "npm install",
  "framework": null
}

2. 环境变量配置

在 Dashboard 中配置：

进入项目设置
选择 "Environment Variables"
添加环境变量
选择适用的环境（Production、Preview、Development）

通过 CLI 配置：

bash
# 添加生产环境变量
vercel env add API_KEY production

# 添加预览环境变量
vercel env add API_KEY preview

# 添加开发环境变量
vercel env add API_KEY development

在代码中使用：

javascript
const apiKey = process.env.API_KEY;

测试集成

1. 单元测试

配置测试脚本：

json
// package.json
{
  "scripts": {
    "test": "jest",
    "test:watch": "jest --watch",
    "test:coverage": "jest --coverage"
  }
}

在 CI 中运行测试：

javascript
// vercel.json
{
  "buildCommand": "npm run build",
  "installCommand": "npm install",
  "scripts": {
    "postinstall": "npm run test"
  }
}

2. 集成测试

使用 Playwright：

bash
npm install -D @playwright/test

javascript
// tests/example.spec.js
import { test, expect } from '@playwright/test';

test('homepage has title', async ({ page }) => {
  await page.goto('https://your-project.vercel.app');
  await expect(page).toHaveTitle(/Your Project/);
});

配置测试命令：

json
{
  "scripts": {
    "test:e2e": "playwright test"
  }
}

3. Linting 和代码质量检查

配置 ESLint：

bash
npm install -D eslint

javascript
// .eslintrc.js
module.exports = {
  extends: ['next/core-web-vitals', 'prettier'],
  rules: {
    'no-console': 'warn',
  },
};

配置 Prettier：

bash
npm install -D prettier

json
// .prettierrc
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2
}

在 CI 中运行：

json
{
  "scripts": {
    "lint": "eslint .",
    "format": "prettier --write .",
    "format:check": "prettier --check ."
  }
}

高级 CI/CD 配置

1. 自定义构建钩子

使用 GitHub Actions：

yaml
# .github/workflows/ci.yml
name: CI

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

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '18'
      - run: npm ci
      - run: npm test
      - run: npm run lint

2. 部署前检查

使用 Vercel CLI：

bash
# 构建检查
vercel build --yes

# 部署到预览环境
vercel --yes

# 部署到生产环境
vercel --prod --yes

3. 条件部署

基于分支的部署：

javascript
// vercel.json
{
  "git": {
    "deploymentEnabled": {
      "main": true,
      "develop": true,
      "feature/*": false
    }
  }
}

部署策略

1. 蓝绿部署

Vercel 支持蓝绿部署策略：

配置蓝绿部署：

javascript
// vercel.json
{
  "alias": ["your-project.vercel.app"],
  "domains": ["your-project.com"]
}

工作流程：

部署新版本到预览环境
测试新版本
切换流量到新版本
如有问题，快速回滚

2. 金丝雀发布

使用 Vercel 的流量分割：

javascript
// vercel.json
{
  "alias": ["your-project.vercel.app"],
  "domains": ["your-project.com"],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "/$1"
    }
  ]
}

实现金丝雀发布：

部署新版本
逐步增加流量到新版本
监控指标
完全切换或回滚

3. 滚动更新

Vercel 自动处理滚动更新：

零停机部署
逐步替换旧版本
自动健康检查
失败自动回滚

监控和通知

1. 部署状态监控

查看部署状态：

bash
# 查看最新部署
vercel ls

# 查看部署详情
vercel inspect <deployment-url>

# 查看部署日志
vercel logs <deployment-url>

2. 通知配置

Slack 通知：

在 Vercel Dashboard 中配置 Slack 集成
选择要通知的事件（部署成功、失败等）
配置通知频道

Email 通知：

在项目设置中配置邮件通知
选择要通知的事件
添加收件人邮箱

Webhook 通知：

javascript
// vercel.json
{
  "webhooks": [
    {
      "url": "https://your-webhook-endpoint.com/deploy",
      "events": ["deployment.success", "deployment.error"]
    }
  ]
}

性能优化

1. 构建缓存

Vercel 自动缓存以下内容：

node_modules
构建产物
依赖下载

优化缓存：

javascript
// vercel.json
{
  "build": {
    "env": {
      "CACHE_KEY": "custom-cache-key"
    }
  }
}

2. 增量构建

配置增量构建：

javascript
// next.config.js
module.exports = {
  experimental: {
    incrementalCacheHandlerPath: './cache-handler.js',
  },
};

3. 并行构建

Vercel 支持并行构建：

同时构建多个项目
并行执行构建步骤
提高构建速度

安全最佳实践

1. 环境变量安全

不要在代码中硬编码密钥：

javascript
// ❌ 不好
const apiKey = 'your-api-key-here';

// ✅ 好
const apiKey = process.env.API_KEY;

使用环境变量：

在 Dashboard 中配置
使用 CLI 添加
定期轮换密钥

2. 访问控制

配置团队权限：

设置团队成员角色
限制部署权限
审计部署历史

使用 SSO：

启用单点登录
集中管理访问
提高安全性

3. 依赖安全

使用 Dependabot：

yaml
# .github/dependabot.yml
version: 2
updates:
  - package-ecosystem: "npm"
    directory: "/"
    schedule:
      interval: "weekly"

定期更新依赖：

使用 npm audit 检查漏洞
及时更新依赖
使用 npm ci 安装依赖

故障排除

1. 构建失败

常见原因：

依赖版本冲突
环境变量缺失
测试失败
内存不足

解决方案：

查看构建日志
检查依赖版本
验证环境变量
增加内存限制

2. 部署超时

原因：

构建时间过长
网络问题
资源限制

解决方案：

优化构建流程
使用增量构建
检查网络连接
升级到付费计划

3. 环境变量问题

原因：

变量未设置
变量名称错误
环境不匹配

解决方案：

检查环境变量配置
验证变量名称
确认环境设置
重新部署项目

最佳实践总结

1. 分支策略

Git Flow：

main：生产环境
develop：开发环境
feature/*：功能分支
hotfix/*：紧急修复

Trunk-Based Development：

所有开发在主分支
使用功能标志
频繁部署

2. 测试策略

测试金字塔：

单元测试：快速、大量
集成测试：中等数量
E2E 测试：少量、关键路径

测试覆盖率：

设置覆盖率目标
监控覆盖率变化
定期审查测试质量

3. 部署频率

持续部署：

自动部署通过测试的代码
快速反馈
小步快跑

持续交付：

自动构建和测试
手动触发部署
更好的控制

4. 监控和告警

关键指标：

部署成功率
构建时间
测试通过率
错误率

告警配置：

部署失败告警
错误率告警
性能下降告警

通过以上配置和最佳实践，可以在 Vercel 上建立高效、可靠的 CI/CD 流程，提高开发效率和代码质量。