Automate Your Vercel Deployments

How to Automate Your Vercel Deployments Using GitHub Actions: Deploy Like a Pro!!

Posted by Abhishek Tiwari

23 Feb 24 6 min read

In the world of web development, deploying applications efficiently and managing workflow automation ensures a seamless digital experience. Vercel and GitHub Actions are the two tools that have revolutionized these aspects.

The automated deployments to Vercel with GitHub Actions significantly simplify the process of deploying web applications and static sites. This is while ensuring that every new commit to the repository or changes pushed to the develop branch, as well as actions like opening, synchronizing, or reopening pull requests, will automatically trigger a deployment.

Today's blog is a guide that will walk you through the CI/CD pipeline setup using GitHub Actions while detailing how to configure a workflow for seamless and error-free deployments to Vercel. Adoption of this approach saves time and also guarantees consistency across deployments, making the entire process efficient and straightforward.

Introduction to Vercel

A cloud-based system specifically engineered to accommodate static websites and serverless functions, while also facilitating an efficient deployment procedure for front-end frameworks, Vercel is distinguished by its scalability, performance optimization, and simplicity.

Key Features:

Instant Global Deployments:

Content Delivery Network (CDN) by Vercel guarantees the site is accessible with minimal delay globally.

Serverless Functions:

Support for serverless functions allows running the backend code without managing a server, scaling automatically with demand.

Automatic HTTPS:

All deployed sites are automatically secured with HTTPS, enhancing security and trust.

Preview Deployments:

Each Git push generates a live preview deployment; allowing a review of changes in a live environment before it is merged into production.

Optimized for Front-End Frameworks:

Tailored for modern web frameworks, Vercel offers features like incremental static regeneration (ISR) with Next.js.

Introduction to GitHub Actions

GitHub Actions is a CI/CD (Continuous Integration and Continuous Deployment) service integrated into GitHub. it enables developers to automate the build, test, and deployment workflows directly within their GitHub repositories.

Key Features of GitHub Actions:

Workflow Automation: GitHub Actions allows automation of software workflows with workflows defined in YAML format, executing a series of commands after a specified event has occurred, such as a push to a repository.

Diverse Marketplace:

Access to a marketplace of actions developed by the GitHub community, which can be used to automate nearly every aspect of the workflow.

Custom Workflows:

Ability to create custom workflows that match development, testing, and deployment needs.

Language and Framework Agnostic:

GitHub Actions supports any language or framework, from Node.js to Rust, Python, PHP, Java, and more.

Integration with GitHub:

Seamless integration with GitHub repositories enables the triggering of workflows based on GitHub events like push, pull requests, and releases.

Automating Deployments to Vercel with GitHub Actions

Deploying applications to Vercel can be a breeze with the help of GitHub Actions. Let’s walk through the process of setting up a GitHub Actions workflow for deploying a project to Vercel automatically whenever changes are pushed to the develop branch or a pull request is opened, synchronized, or reopened.

Prerequisites

Before we dive into the setup, ensure you have the following:

  • A GitHub repository containing your web application code.
  • A Vercel account and a Vercel project were created.
Ebook-icon

DevOps for Small Businesses: 3 Ways to Save Time and Money​

Suggested Read

GitHub Actions Workflow
deploy-to-vercel-action uses GitHub Actions to deploy your project/site to Vercel. It offers more customization than Vercel's GitHub integration in terms of when to deploy your site. Let's break down the GitHub Actions workflow defined in the provided code.

name: Deploy CI
on:
  push:
    branches: [develop]
  pull_request:
    types: [opened, synchronize, reopened]
jobs:
  deploy:
    runs-on: ubuntu-latest
    if: "!contains(github.event.head_commit.message, '[skip ci]')"
    steps:
      - name: Checkout
        uses: actions/checkout@v2
      - name: Use Node.js 18.x
        uses: actions/setup-node@v1
        with:
          node-version: 18.x
      - name: Deploy to Vercel Action
        uses: BetaHuhn/deploy-to-vercel-action@v1
        with:
          GITHUB_TOKEN: ${{ secrets.GH_PAT }}
          VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
          VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
          VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
PRODUCTION: false # Don't deploy to production environment
          BUILD_ENV: |
            ENV1=value
            ENVIORNEMENT2=${{ secrets.ENVIORNEMENT2 }}

Workflow Explanation

  • name: The name of the workflow, in this case, "Deploy CI."
  • on: Specifies the events that trigger the workflow. In this example, it triggers on pushes to the "develop" branch and certain pull request actions.
  • jobs: Defines a job named "deploy" that runs on the latest Ubuntu environment.
  • if: Checks if the commit message contains "[skip ci]". If present, the workflow will be skipped.
  • steps: Describes the sequence of steps to be executed in the job.
  • Checkout: Check out your repository's code.
  • Use Node.js 18.x: Sets up the Node.js environment with version 18.x.
  • Deploy to Vercel Action: Uses the "deploy-to-vercel-action" to deploy the application to Vercel. Configuration includes GitHub and Vercel tokens, organization, and project IDs
  • The line PRODUCTION: true/false in the GitHub Actions workflow file is used to control whether the deployment should target the production environment or the preview environment.
  • The BUILD_ENV section in the GitHub Actions workflow file is used to define environment variables that will be available during the build and deployment process

Setting up Secrets

To use this workflow, you need to add secrets to your

GitHub repository. These include:

  • GH_PAT: create a Fine-grained personal access token with permissions
  • Repository permission:
  • Read access to code and metadata
  • Read and write access to deployments, issues, and pull requests
  • VERCEL_TOKEN: Vercel API token.
    VERCEL_ORG_ID: Vercel organization ID.
  • VERCEL_PROJECT_ID: Vercel project ID.

All Action Inputs: GitHub Marketplace Action Inputs

Why Automating Deployments Is Beneficial?

Adoption of automated deployments in software development has benefits that enhance the efficiency and quality of the software delivery process. Here are a few key advantages:

Better Speed and Efficiency:

Automation cuts down on the amount of time needed to go from code completion to deployment. It can also deploy several environments/servers together. This enhanced speed is important when implementing CI/CD pipelines.

Consistency and Reliability:

Automation eliminates the errors manual operations are prone to by ensuring that every step is carried out precisely the same way each time. This means that it can be duplicated with the same degree of consistency in development, staging, and production environments.

Improved Quality and Testing

Automation makes it possible to smoothly incorporate testing into the deployment procedure. Regular testing of codes provides quick feedback and enables developers to iterate and improve their codes, which means that errors are found and corrected quickly.

Team Collaboration and Productivity

Automation helps developers focus on writing code rather than worrying about deployment. Its ability to manage and monitor provides transparency and better collaboration.

Scalability and Flexibility

Automated deployments can be readily scaled to meet the project requirements with very little additional input. This means it is easier to implement different deployment strategies, such as canary releases, blue-green deployments, etc.

Risk Management

Automated deployment also rolls back a deployment rapidly to its previous state and lowers the possibility of extended downtime. Its security protocols can strengthen the application's overall security.

Continuous Innovation and Improvement

Faster and more frequent updates and deployments of apps, which helps in quicker development. It also enables teams to concentrate on creating newer and better features instead of concentrating on repetitive tasks.

Wrapping Up

Automating deployments with GitHub Actions and Vercel allows for streamlining the development process, ensuring that applications are deployed consistently and efficiently. With this workflow, an application will be automatically deployed to Vercel whenever changes are pushed to the "develop" branch or when relevant pull requests are opened, synchronized, or reopened.

FAQS

A Page Out of the Lab Book

What are GitHub Actions and how can they automate deployments to Vercel?

Click to show answer

GitHub Actions is a CI/CD (Continuous Integration/Continuous Deployment) platform that allows you to automate your development workflows directly within your GitHub repository. By creating workflows, you can automate the process of deploying your projects to Vercel. This involves setting up a YAML file in your repository's .github/workflows directory, where you define the deployment steps. GitHub Actions will then trigger the deployment to Vercel each time you push changes to your specified branch, ensuring your deployment process is automated and streamlined.

How do I set up a GitHub Action workflow for deploying to Vercel?

Click to show answer

To set up a GitHub Action workflow for Vercel deployments, follow these steps:

  • In your GitHub repository, create a new file in the .github/workflows directory. You might name it vercel-deploy.yml.
  • Define the workflow with the necessary triggers (e.g., on push to the main branch), jobs, and steps. This includes checking out your code, installing dependencies, and using the Vercel for GitHub Action to deploy.
  • Configure the Vercel for GitHub Action by adding your Vercel project name and token as secrets in your GitHub repository settings.
  • Commit and push the workflow file to your repository. GitHub Actions will automatically run the workflow according to your triggers, deploying your project to Vercel.

How do I handle environment variables when deploying to Vercel through GitHub Actions?

Click to show answer

To handle environment variables in your Vercel deployments via GitHub Actions, you can use GitHub's encrypted secrets. Here's how:

  • Go to your repository's Settings > Secrets and click on "New repository secret."
  • Add your environment variables here as secrets. For example, use VERCEL_TOKEN for your Vercel deployment token.
  • In your GitHub Actions workflow file, reference these secrets in the steps where you deploy to Vercel, ensuring they are passed as environment variables to your deployment process.

Can I deploy to different Vercel environments (e.g., production, staging) using GitHub Actions?

Click to show answer

Yes, you can deploy to different Vercel environments by specifying the target environment in your GitHub Actions workflow. You can achieve this by:

  • Defining separate jobs or steps within your workflow for each environment, specifying the environment name (e.g., production, staging) in the Vercel deployment command or action.
  • Using conditional triggers in your workflow to determine when to deploy to each environment, such as deploying to staging on every push to a development branch and to production on push to the main branch.

How do I troubleshoot failed deployments in GitHub Actions?

Click to show answer

If your deployment to Vercel fails during a GitHub Actions run, you can troubleshoot by:

  • Checking the logs: GitHub Actions provides detailed logs for each step of your workflow. Review these logs for errors or warnings that can indicate what went wrong during the deployment process.
  • Verifying your Vercel project settings and environment variables: Ensure that your Vercel project name and token are correctly configured in your GitHub secrets.
  • Reviewing your workflow file: Ensure that your workflow syntax is correct and that it includes all necessary steps for deployment.
  • Contacting support: If you're unable to resolve the issue, consider reaching out to GitHub or Vercel support for assistance.