Vercel deployment with preview URLs and production promotion

Vercel deployments triggered from GitHub require the Vercel GitHub integration, which gives limited control over when and how deployments happen. Teams need to run custom pre-deployment steps or gate production on CI results.

Use the Vercel CLI in GitHub Actions for full control:

jobs:
  deploy-preview:
    runs-on: ubuntu-latest
    if: github.event_name == 'pull_request'
    steps:
      - uses: actions/checkout@v4
      - run: npm ci && npm run build
      - name: Deploy preview
        id: deploy
        run: |
          URL=$(npx vercel deploy --token=${{ secrets.VERCEL_TOKEN }})
          echo "url=$URL" >> $GITHUB_OUTPUT
      - uses: actions/github-script@v7
        with:
          script: |
            github.rest.issues.createComment({
              issue_number: context.issue.number,
              owner: context.repo.owner,
              repo: context.repo.repo,
              body: `Preview: ${{ steps.deploy.outputs.url }}`
            })

  deploy-production:
    runs-on: ubuntu-latest
    if: github.ref == 'refs/heads/main'
    environment: production
    steps:
      - uses: actions/checkout@v4
      - run: npm ci && npm run build
      - run: npx vercel deploy --prod --token=${{ secrets.VERCEL_TOKEN }}

CLI-driven deployment lets you run tests before deploying, post preview URLs as PR comments, and require environment approval before promoting to production—none of which the automatic GitHub integration supports natively.