Skip to main content

CI/CD for Vercel with GitHub Actions

This guide explains how our project uses GitHub Actions to deploy to Vercel with CI/CD

Overview​

Your Github repository will already be configured with GitHub Actions workflows for Vercel deployment.

These workflows automatically create preview deployments for pull requests and deploy to production when changes are merged to the main branch.

Existing Setup​

  • .github/workflows/vercel-preview-deployment.yml: Handles preview deployments.
  • .github/workflows/vercel-production-deployment.yml: Manages production deployments.

These workflows use Vercel CLI to build and deploy the project.

Required Secrets​

For the workflows to function correctly, the following secrets need to be set in your GitHub repository:

  • VERCEL_API_TOKEN: Your Vercel Access Token.
  • VERCEL_ORG_ID: Your Vercel Organization ID.
  • VERCEL_PROJECT_ID: Your Vercel Project ID.
  • GOOGLE_CLIENT_ID: Your Google OAuth Client ID.
  • GOOGLE_CLIENT_SECRET: Your Google OAuth Client Secret.

How to Obtain Vercel Credentials​

  1. Install the Vercel CLI and run vercel login.
  2. In your project folder, run vercel link to link to your Vercel project.
  3. Find the projectId and orgId in the .vercel/project.json file.
  4. Create a Vercel Access Token.

Adding Secrets to GitHub​

  1. Go to your GitHub repository.
  2. Navigate to Settings > Secrets and Variables > Actions.
  3. Click on "New repository secret".
  4. Add each of the required secrets mentioned above.

Deployment Process​

  • Push to any branch: Creates a preview deployment.
  • Merge to main: Triggers a production deployment.

Troubleshooting​

If you encounter any issues:

  • Check the GitHub Actions logs for detailed error messages.
  • Ensure all required secrets are correctly set in GitHub.
  • Verify your Vercel project settings and permissions.

Optional: Avoiding Duplicate Deployments​

By default, Vercel automatically creates deployments when changes are pushed to GitHub. With our GitHub Actions setup, this will result in duplicate deployments - one from GitHub Actions and one from Vercel's GitHub integration.

To prevent duplicate deployments and only use GitHub Actions:

  1. Go to your Vercel project settings: https://vercel.com/{org-id}/{project-name}/settings/git
  2. Under "Git" settings, disable "Enable Git Integration"
  3. This will ensure deployments only occur through our GitHub Actions workflows

This approach gives us more control over the deployment process and allows us to run tests and other checks before deploying.

For more information, refer to the Vercel documentation and GitHub Actions documentation.