Migrating from Vercel's native GitHub integration to GitHub Actions for deployments

instruction.md

Migrating from Vercel's native GitHub integration to GitHub Actions for deployments involves several steps to ensure a smooth transition without disrupting your deployment history. Here's how you can proceed:

1. Disable Vercel's GitHub Integration:

   • In your Vercel project, navigate to the Settings tab.

   • Under the Git section, set the github.enabled property to false in your vercel.json file:

     {
       "github": {
         "enabled": false
       }
     }

     This configuration prevents Vercel from automatically deploying your project upon GitHub events.

2. Set Up Vercel CLI and Link Your Project:

   • Install the Vercel CLI globally if you haven't already:

     npm install -g vercel

   • In your project directory, link your project to Vercel:

     vercel link

     Follow the prompts to select the appropriate scope and project. This command creates a .vercel directory containing project.json, which includes your orgId and projectId.

3. Configure GitHub Secrets:

   • In your GitHub repository, navigate to Settings > Secrets and variables > Actions.
   • Add the following secrets:
     • VERCEL_TOKEN: Your Vercel token, obtainable from your Vercel account settings.
     • VERCEL_ORG_ID: The orgId from your .vercel/project.json.
     • VERCEL_PROJECT_ID: The projectId from your .vercel/project.json.

4. Create a GitHub Actions Workflow:

   • That does the following:

     • The workflow triggers on pushes and pull requests to the main branch.
     • It checks out the code, sets up Node.js, installs dependencies, builds the project, and deploys it to Vercel using the Vercel CLI.

   • In your repository, create a .github/workflows/deploy.yml file with the following content:

     name: Deploy to Vercel
     
     on:
       push:
         branches:
           - main
       pull_request:
         branches:
           - main
     
     jobs:
       deploy:
         runs-on: ubuntu-latest
         steps:
           - name: Checkout code
             uses: actions/checkout@v2
     
           - name: Setup Node.js
             uses: actions/setup-node@v2
             with:
               node-version: '14'
     
           - name: Install dependencies
             run: npm install
     
           - name: Build project
             run: npm run build
     
           - name: Deploy to Vercel
             env:
               VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
               VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
               VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
             run: npx vercel --prod --token $VERCEL_TOKEN --org-id $VERCEL_ORG_ID --project-id $VERCEL_PROJECT_ID

5. Test the New Deployment Pipeline:

   • Push a commit or open a pull request to the main branch to trigger the GitHub Actions workflow.
   • Monitor the Actions tab in your GitHub repository to ensure the workflow runs successfully and deploys your project to Vercel.

6. Monitor Deployment History:

   • Your previous deployment history remains intact in the Vercel dashboard.
   • New deployments triggered via GitHub Actions will appear alongside your existing deployment history, maintaining continuity.

preview.yml

name: Vercel Preview Deployment

# Trigger this workflow on pull request events, except when changes are only in specified paths
on:
  pull_request:
    paths-ignore:
      - '.github/**'   # Ignore changes in GitHub configuration files
      - 'docs/**'      # Ignore changes in documentation files
      - '**/*.md'      # Ignore changes in Markdown files

jobs:
  Deploy-Preview:
    runs-on: ubuntu-latest

    steps:
      # Step 1: Check out the latest code from the repository
      - name: Checkout code
        uses: actions/checkout@v2

      # Step 2: Install the latest version of the Vercel CLI
      - name: Install Vercel CLI
        run: npm install --global vercel@latest

      # Step 3: Pull Vercel environment variables for the preview environment
      - name: Pull Vercel Environment Information
        run: vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }}

      # Step 4: Build the project using Vercel's build command
      - name: Build Project Artifacts
        run: vercel build --token=${{ secrets.VERCEL_TOKEN }}

      # Step 5: Deploy the built artifacts to Vercel as a preview deployment
      - name: Deploy Project Artifacts to Vercel
        run: vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }}

production.yml

name: Vercel Production Deployment

# Trigger this workflow on pushes to the main branch, except when changes are only in specified paths
on:
  push:
    branches:
      - main
    paths-ignore:
      - '.github/**'   # Ignore changes in GitHub configuration files
      - 'docs/**'      # Ignore changes in documentation files
      - '**/*.md'      # Ignore changes in Markdown files

jobs:
  Deploy-Production:
    runs-on: ubuntu-latest

    steps:
      # Step 1: Check out the latest code from the repository
      - name: Checkout code
        uses: actions/checkout@v2

      # Step 2: Install the latest version of the Vercel CLI
      - name: Install Vercel CLI
        run: npm install --global vercel@latest

      # Step 3: Pull Vercel environment variables for the production environment
      - name: Pull Vercel Environment Information
        run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}

      # Step 4: Build the project using Vercel's production build command
      - name: Build Project Artifacts
        run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}

      # Step 5: Deploy the built artifacts to Vercel as a production deployment
      - name: Deploy Project Artifacts to Vercel
        run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}