如何配置Vercel CLI对接CircleCI实现staging与生产环境部署

完全可以通过Vercel CLI实现你的需求，以下是具体配置步骤：

1. 前置Vercel项目配置 #

• 在Vercel后台创建项目后，进入Settings > Git，关闭Auto Deployment，确保只有CircleCI能触发部署
• 进入Settings > Domains，添加自定义staging域名（如myApp-staging.vercel.app），将其关联到staging环境
• 生成Vercel Token：进入Account Settings > Tokens，创建一个拥有部署权限的token，将其存入CircleCI项目的环境变量（命名为VERCEL_TOKEN），同时记录你的Vercel项目ID和团队ID（可在Vercel项目设置中找到）

2. CircleCI配置文件编写 #

在项目根目录创建.circleci/config.yml，按分支区分staging和生产环境的部署流程，先执行测试再部署：

version: 2.1
jobs:
  test:
    docker:
      - image: cimg/node:20
    steps:
      - checkout
      - run: npm install
      - run: npm test # 替换成你的测试命令

  deploy-staging:
    docker:
      - image: cimg/node:20
    steps:
      - checkout
      - run: npm install --global vercel@latest
      # 拉取staging环境配置
      - run: vercel pull --yes --environment=staging --token=$VERCEL_TOKEN --project-id=<你的Vercel项目ID> --team-id=<你的Vercel团队ID>
      # 构建staging环境产物
      - run: vercel build --environment=staging --token=$VERCEL_TOKEN
      # 部署到staging环境，关联自定义域名
      - run: vercel deploy --prebuilt --environment=staging --token=$VERCEL_TOKEN --domain=myApp-staging.vercel.app

  deploy-production:
    docker:
      - image: cimg/node:20
    steps:
      - checkout
      - run: npm install --global vercel@latest
      # 拉取生产环境配置
      - run: vercel pull --yes --environment=production --token=$VERCEL_TOKEN --project-id=<你的Vercel项目ID> --team-id=<你的Vercel团队ID>
      # 构建生产环境产物
      - run: vercel build --prod --token=$VERCEL_TOKEN
      # 部署到生产环境
      - run: vercel deploy --prebuilt --prod --token=$VERCEL_TOKEN

workflows:
  build-and-deploy:
    jobs:
      - test
      - deploy-staging:
          requires:
            - test
          filters:
            branches:
              only: main
      - deploy-production:
          requires:
            - test
          filters:
            branches:
              only: prod

关键配置说明 #

• 分支过滤：通过filters.branches.only指定main分支触发staging部署，prod分支触发生产部署
• 环境区分：使用--environment参数指定拉取、构建、部署对应的环境，staging环境无需加--prod参数
• 自定义域名绑定：在staging部署命令中加入--domain=myApp-staging.vercel.app，确保每次部署都指向该固定域名
• 前置测试：将test job设为部署job的依赖，只有测试通过才会执行部署

注意事项 #

• 确保Vercel项目的环境变量（如API密钥等）已在Vercel后台对应环境中配置完成
• 若使用monorepo，需在vercel pull和vercel build命令中加入--cwd指定项目目录
• 定期更新Vercel CLI版本，避免兼容性问题

内容的提问来源于stack exchange，提问作者Martin