Deploy to Vercel with GitHub Actions

Vercel Deployment via GitHub Actions

While Vercel offers built-in Git integration, using GitHub Actions for deployment gives you more control over the build pipeline — you can run tests, linting, and custom checks before deploying.

Workflow YAML

name: Deploy to Vercel

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

env:
  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20

      - name: Install Vercel CLI
        run: npm install -g vercel@latest

      - name: Pull Vercel Environment
        run: vercel pull --yes --environment=${{ github.event_name == 'push' && 'production' || 'preview' }} --token=${{ secrets.VERCEL_TOKEN }}

      - name: Build
        run: vercel build ${{ github.event_name == 'push' && '--prod' || '' }} --token=${{ secrets.VERCEL_TOKEN }}

      - name: Deploy
        run: vercel deploy --prebuilt ${{ github.event_name == 'push' && '--prod' || '' }} --token=${{ secrets.VERCEL_TOKEN }}

Required Secrets

Secret	Where to Find
VERCEL_TOKEN	Vercel Dashboard > Settings > Tokens
VERCEL_ORG_ID	Run vercel link locally, check .vercel/project.json
VERCEL_PROJECT_ID	Same .vercel/project.json file

Preview vs Production

The workflow uses GitHub Actions expressions to determine the deployment type:

• Push to main: Triggers a production deployment with --prod
• Pull requests: Creates a preview deployment (without --prod), giving reviewers a live preview URL

Why Use Actions Instead of Vercel Git Integration?

• Run tests and linting before deployment
• Deploy only when specific checks pass
• Use custom build steps or environment setup
• Integrate with other CI/CD steps (database migrations, notifications)
• More control over deployment timing and conditions