Vercel: A Powerful Deployment Platform

In this blog post, we’ll explore how to automate the deployment of a project to Vercel using GitHub Actions. We’ll also discuss the advantages of using Vercel as a deployment platform, particularly for frontend projects.

Introduction to our cloud platforms

GitHub Actions is a CI/CD (Continuous Integration and Continuous Deployment) service provided by GitHub. It allows you to automate workflows, such as building, testing, and deploying your code whenever you push changes to a repository. By leveraging GitHub Actions, you can create a seamless deployment process that is triggered automatically upon code changes.

Vercel is a cloud platform for static sites and serverless functions. It offers a simple and efficient way to deploy, manage, and scale web applications. Here are some advantages of using Vercel:

• Ease of Deployment: Vercel provides a straightforward deployment process, particularly for frontend frameworks like Next.js, React, and others.
• Automatic Previews: It generates preview URLs for every pull request, allowing teams to preview changes before they go live.
• Global Edge Network: Vercel’s CDN (Content Delivery Network) ensures fast content delivery worldwide.
• Serverless Functions: It supports serverless functions, enabling backend logic to be deployed alongside the frontend.
• Seamless Integration: Vercel integrates seamlessly with Git platforms like GitHub, making continuous deployment easy and efficient.

GitHub Actions Workflow for Vercel Deployment

Below is a sample GitHub Actions workflow configuration for deploying a project to Vercel. This workflow is triggered whenever there are pushes to the main or develop branches.

name: deploy

 

on:

  push:

    branches:    

      - main

      - develop

 

jobs:

  build:

    runs-on: ubuntu-latest

    steps:

      - uses: actions/checkout@v3

 

      - uses: actions/setup-node@v3

        with:

          node-version: 17

 

      - run: npm install

      - run: npm run build

 

  deploy:

    needs: build

    runs-on: ubuntu-latest

    steps:

      - name: start deployment

        uses: bobheadxi/deployments@v0.4.3

        id: deployment

        with:

          step: start

          token: ${{ secrets.GITHUB_TOKEN }}

          env: ${{ fromJSON('["Production", "Preview"]')[github.ref != 'refs/heads/main'] }} 

 

      - uses: actions/checkout@v2

 

      - uses: amondnet/vercel-action@v25.1.0

        with:

          vercel-token: ${{ secrets.VERCEL_TOKEN }}

          vercel-args: ${{ fromJSON('["--prod", ""]')[github.ref != 'refs/heads/main'] }}

          vercel-org-id: ${{ secrets.VERCEL_ORG_ID}} 

          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID}} 

          scope: ${{ secrets.VERCEL_ORG_ID}}

          working-directory: ./

          

      - name: update deployment status

        uses: bobheadxi/deployments@v0.4.3

        if: always()

        with:

          step: finish

          token: ${{ secrets.GITHUB_TOKEN }}

          status: ${{ job.status }}

          deployment_id: ${{ steps.deployment.outputs.deployment_id }}

Explanation of the Workflow

1. Workflow Trigger:
   • The workflow is triggered on pushes to the main and develop branches.
2. Build Job:
   • Checkout Code: The actions/checkout action is used to checkout the repository code.
   • Setup Node.js: The actions/setup-node action sets up Node.js version 17.
   • Install Dependencies: Runs npm install to install the project dependencies.
   • Build the Project: Runs npm run build to build the project.
3. Deploy Job:
   • Deployment Start: Uses the bobheadxi/deployments action to mark the start of a deployment.
   • Deploy to Vercel: The amondnet/vercel-action action deploys the project to Vercel. It uses the Vercel token, organization ID, and project ID from the GitHub secrets. The deployment can either be a production deployment or a preview, depending on the branch.
   • Update Deployment Status: The deployment status is updated to GitHub using the bobheadxi/deployments action.

Benefits of this Setup

1. Automation: The workflow automates the build and deployment process, reducing manual effort and the risk of errors.
2. Continuous Deployment: Changes pushed to main or develop branches are automatically deployed to Vercel, ensuring the latest changes are always live.
3. Environment-Specific Deployments: The use of environment variables allows the workflow to distinguish between production and preview deployments.
4. Enhanced Collaboration: Automatic preview URLs generated for pull requests enhance collaboration among team members, allowing them to see changes before they are merged.

Conclusion

Integrating GitHub Actions with Vercel provides a robust CI/CD pipeline, making it easier to manage deployments and maintain consistent quality. With Vercel’s powerful features and GitHub Actions’ flexibility, you can efficiently handle deployments for all stages of your application. Whether you’re working on a small project or a large-scale application, this setup ensures that your deployments are seamless, automated, and reliable.