如何在Vercel PR部署中使用分支名生成预览URL？

要让GitHub Actions部署的Vercel预览URL用分支名替代哈希值，只需修改vercel deploy命令，添加指定分支名的环境变量参数，无需配置DNS别名。

修改后的GitHub Actions配置 #

name: Vercel PR Deployment
env:
  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
on:
  pull_request:
    types: [opened, synchronize, reopened]
jobs:
  Deploy-Preview:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Install Vercel CLI
        run: npm install --global vercel@latest
      - name: Extract branch name
        shell: bash
        run: echo "branch=${GITHUB_HEAD_REF:-${GITHUB_REF#refs/heads/}}" >> $GITHUB_OUTPUT
        id: extract_branch
      - name: Pull Vercel Environment Information
        run: vercel pull --yes --environment=preview --git-branch=${{steps.extract_branch.outputs.branch}} --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 --build-env VERCEL_GIT_COMMIT_REF=${{steps.extract_branch.outputs.branch}} --token=${{ secrets.VERCEL_TOKEN }}

关键说明 #

• 在vercel deploy命令中添加--build-env VERCEL_GIT_COMMIT_REF=${{steps.extract_branch.outputs.branch}}：这个参数会传递分支名给Vercel，让它按照官方集成的逻辑生成[project-name]-[branch-name]-[scope-slug].vercel.app格式的预览URL。
• Vercel会自动处理分支名中的特殊字符：比如把分支名里的/替换成-，过滤非法子域名字符，不需要你额外处理分支名格式。
• 确认Vercel项目设置：在Vercel控制台的「Git」选项卡下，确保「Preview Deployments」功能正常启用，默认配置即可支持分支名格式的URL。

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