如何为每个PR在Vercel生成两个不同环境变量的预览部署？

完全可以实现你的需求，下面是两种经过验证的可行方案：

方案一：Build Hooks + GitHub Actions #

这是最省心的实现方式，利用Vercel的Build Hooks功能配合GitHub Actions自动触发两个独立部署：

1. 先在Vercel项目后台创建两个Build Hook：
   • 第一个命名为pr-staging-qa，配置时绑定环境变量BACKEND_API_URL=https://staging-api...（在Vercel的环境变量设置中，给这个Hook单独配置即可）
   • 第二个命名为pr-e2e-test，绑定环境变量BACKEND_API_URL=https://e2e-api...
2. 把两个Hook的URL复制出来，添加到GitHub仓库的Secrets中，分别命名为VERCEL_STAGING_HOOK和VERCEL_E2E_HOOK
3. 在仓库的.github/workflows目录下新建vercel-dual-deploy.yml文件，内容如下：

name: 双环境预览部署
on:
  pull_request:
    types: [opened, synchronize, reopened]

jobs:
  staging-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: 触发Staging预览部署
        uses: fjogeleit/http-request-action@v1
        with:
          url: ${{ secrets.VERCEL_STAGING_HOOK }}
          method: POST
          data: '{"ref": "${{ github.head_ref }}"}'

  e2e-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: 触发E2E测试预览部署
        uses: fjogeleit/http-request-action@v1
        with:
          url: ${{ secrets.VERCEL_E2E_HOOK }}
          method: POST
          data: '{"ref": "${{ github.head_ref }}"}'

此后每次PR创建、更新时，GitHub Actions会自动触发两个独立的Vercel预览部署，各自使用对应的后端地址。

方案二：Vercel CLI + GitHub Actions #

如果需要更灵活的环境变量控制，直接用Vercel CLI在Actions中触发部署：

1. 在GitHub Secrets中添加三个值：VERCEL_TOKEN（你的Vercel账号令牌）、VERCEL_PROJECT_ID（项目ID）、VERCEL_ORG_ID（组织ID，个人项目可使用账号ID）
2. 新建工作流文件.github/workflows/vercel-cli-deploy.yml：

name: CLI触发双环境部署
on:
  pull_request:
    types: [opened, synchronize, reopened]

jobs:
  deploy-staging:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: 安装Vercel CLI
        run: npm install -g vercel
      - name: 部署到Staging预览环境
        run: vercel deploy --prebuilt --env BACKEND_API_URL=https://staging-api... --token ${{ secrets.VERCEL_TOKEN }} --project ${{ secrets.VERCEL_PROJECT_ID }} --scope ${{ secrets.VERCEL_ORG_ID }}

  deploy-e2e:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: 安装Vercel CLI
        run: npm install -g vercel
      - name: 部署到E2E测试预览环境
        run: vercel deploy --prebuilt --env BACKEND_API_URL=https://e2e-api... --token ${{ secrets.VERCEL_TOKEN }} --project ${{ secrets.VERCEL_PROJECT_ID }} --scope ${{ secrets.VERCEL_ORG_ID }}

这个方案可以在命令行直接指定环境变量，无需预先在Vercel后台配置Hook，适合需要动态调整变量的场景。

额外提示 #

• 两个部署会在Vercel的预览列表中分开显示，你可以在部署命令里加上--description "Staging QA"或--description "E2E Test"来快速区分
• 针对E2E测试的部署，可以在同一个Actions工作流中接着触发Playwright测试，直接使用部署返回的URL运行；测试完成后还能添加vercel remove步骤删除该部署，节省预览配额
• 注意Vercel的预览部署配额，两个部署会占用两个名额，确保你的账号配额足够

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