Can you deploy based on tags/releases on Vercel?

If your team uses a trunk-based development workflow and you want to deploy using tags and releases, this guide will walk you through the steps to automate deployments via tags instead of branches.

Versioned deployment

Rather than using Vercel's auto-deployment feature to create a production deployment for each commit to the main branch, this strategy uses GitHub Actions and Vercel CLI to deploy using tags and releases.

1. Create a vercel.json file at the root of your project folder to add Git configuration. Set git.deploymentEnabled to false which will prevent auto-deployments from commits..
2. Then, let’s add the required values from Vercel as secrets in GitHub
3. On your local computer or development environment, install the Vercel CLI and run vercel login
4. Inside your project folder, run vercel link to create a new Vercel project or link to an existing one
5. Navigate to the generated .vercel folder, and open project.json to find the projectID and orgId
6. In GitHub, set VERCEL_PROJECT_ID to your projectID and VERCEL_ORG_ID to your orgID
7. Retrieve your Vercel Access Token and set it as the value of VERCEL_TOKEN
8. Define a GitHub Action to kick off a production deployment each time a new tag is pushed.

1
name: Production Tag Deployment
2
env:
3
  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
4
  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
5
on:
6
  push:
7
    # Pattern matched against refs/tags
8
    tags:        
9
      - '*' # Push events to every tag not containing /
10
jobs:
11
  Deploy-Production:
12
    runs-on: ubuntu-latest
13
    steps:
14
      - uses: actions/checkout@v3
15
      - name: Install Vercel CLI
16
        run: npm install --global vercel@latest
17
      - name: Pull Vercel Environment Information
18
        run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
19
      - name: Build Project Artifacts
20
        run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
21
      - name: Deploy Project Artifacts to Vercel
22
        run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}

Deploying Hotfixes

GitHub Actions and Vercel CLI can also be used to create production deployments for patches or hotfixes.

1. Create a hotfix branch.
2. Create a separate GitHub Action that only runs on pushes to the hotfix branch. This is similar to the GitHub Action defined above, but it will trigger a deployment from the hotfix branch for each new push to the branch.

1
name: Hotfix Deployment
2
env:
3
  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
4
  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
5
on:
6
  push:
7
    branches:
8
      - hotfix
9
jobs:
10
  Deploy-Production:
11
    runs-on: ubuntu-latest
12
    steps:
13
      - uses: actions/checkout@v3
14
      - name: Install Vercel CLI
15
        run: npm install --global vercel@latest
16
      - name: Pull Vercel Environment Information
17
        run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
18
      - name: Build Project Artifacts
19
        run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
20
      - name: Deploy Project Artifacts to Vercel
21
        run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}

Any time you need to push a hotfix, create a PR to your hotfix branch and Vercel will deploy directly to production using this branch.

Preview Deployments

When deploying based on tags and releases, it’s still possible to take advantage of Preview Deployments with Vercel. By integrating GitHub Actions with Vercel, you can have Vercel generate Preview Deployments.

For example, if your team is deploying on each release, you can create an additional GitHub Action that will create a new branch and generate a preview for each new tag.