Deploying Azure DevOps Pipelines with Vercel

The Vercel Deployment Extension allows you to automatically deploy to Vercel from Azure DevOps Pipelines. You can add the extension to your Azure DevOps Projects through the Visual Studio marketplace.

Once the Vercel extension is set up, your Azure DevOps project is connected to your Vercel Project. You can then use your Azure Pipeline(s) inside your Azure DevOps project to trigger a Vercel Deployment.

This page will help you use the extension in your own use case. You can:

• Follow the quickstart to set up the extension and trigger a production deployment based on commits to the main branch
• Use the full-featured pipeline for a similar setup as Vercel's other git integrations. This includes preview deployment creation on pull requests and production deployments on merging to the main branch
• Review the extension task reference to customize the pipeline for your specific use case

At the end of this quickstart, your Azure DevOps Pipeline will trigger a Vercel production deployment whenever you commit a change to the main branch of your code. To get this done, we will follow these steps:

1. Create a Vercel Personal Access Token
2. Create secret variables
3. Set up the Vercel Deployment Extension from the Visual Studio marketplace
4. Set up a basic Azure Pipeline to trigger production deployments on Vercel
5. Test your workflow

Once you have the Vercel Deployment extension set up, you only need to modify your Azure DevOps Pipeline (Steps 4 and 5) to change the deployment workflow to fit your use case.

To create an empty Vercel project:

1. Use the Vercel CLI with the add command

vercel project add

1. Or through the dashboard and then disconnect the Git integration that you would have set up

1. Create a Vercel Personal Access Token

   • Follow Creating an Access Token to create an access token with the scope of access set to the team where your Vercel Project is located
   • Copy this token to a secure location

2. Create secret variables

   For security purposes, you should use the above created token in your Azure Pipeline through secret variables.

   • For this quickstart, we will create the secret variables when we create the pipeline. Once created, these variables will always be accessible to that pipeline
   • Otherwise, you can create them before you create the pipeline in a variable group or a key vault as long as you make sure that your Azure Project has the right access

3. Set up the Vercel Deployment Extension

   • Go to the Vercel Deployment Extension Visual Studio marketplace page
   • Click Get it free and select the Azure DevOps organization where your Azure Project is located

4. Set up a basic Azure Pipeline

   This step assumes that your code exists as a repository in your Azure Project's Repos and that your Vercel Project is named azure-devops-extension.

   

   • From your Azure DevOps Project, select Pipelines from the left side bar
   • Select the New Pipeline button
   • Select where your code is located (In this example, we uploaded the code as an Azure Repos Git. Select Azure Repos Git and then select your uploaded repository)
   • Select Node.js for the pipeline configuration
   • In the Review your pipeline YAML step, select Variables on the top right
     • Select New Variable, use VERCEL_TOKEN as the name and the value of the Vercel Personal Access Token you created earlier. Check the secret option. Select Ok
   • Close the Variables window and paste the following code to replace the code in azure-pipelines.yml that you can rename to vercel-pipeline.yml
   vercel-pipeline.yml

   trigger:
   - main
    
   pool:
     vmImage: ubuntu-latest
    
   steps:
   - task: vercel-deployment-task@1
     inputs:
       vercelProjectId: 'prj_mtYj0MP83muZkYDs2DIDfasdas' //Example Vercel Project ID
       vercelOrgId: '3Gcd2ASTsPxwxTsYBwJTB11p' //Example Vercel Personal Account ID
       vercelToken: $(VERCEL_TOKEN)
       production: true

   Value of vercelProjectId

   Look for Project ID located on the Vercel Project's Settings page at Project Settings > General.

   Value of vercelOrgId

   • If your Project is located under your Hobby team, look for Your ID under your Vercel Personal Account Settings
   • If your Project is located under a Team, look for Team ID under Team Settings > General
   • Select Save and Run
   • This should trigger a production deployment in your Vercel Project as no code was committed before

5. Test your workflow

   • Make a change in your code inside Azure Repos from the main branch and commit the change
   • This should trigger another deployment in your Vercel Project

Your Azure DevOps project is now connected to your Vercel project with automatic production deployments on the main branch. You can update or create pipelines in the Azure DevOps project to customize the Vercel deployment behavior by using the options of the Vercel Deployment Extension.

In a production environment, you will often want the following to happen:

• Trigger preview deployments for pull requests to the main branch
• Trigger production deployments only for commits to the main branch

Before you update your pipeline file to enable preview deployments, you need to configure Azure DevOps with pull requests.

In order to allow pull requests in your Azure repository to create a deployment and report back with a comment, you need the following:

• An Azure DevOps Personal Access Token
• A build validation policy for your branch

1. Go to your Azure DevOps account and select the user settings icon on the top right
2. Select Personal access tokens from the menu option
3. Select the New Token button
4. After completing the basic token information such as Name, Organization, and Expiration, select the Custom defined option under Scopes
5. At the bottom of the form, select Show all scopes
6. Browse down the scopes list until Pull Request Threads. Select the Read & Write checkbox
7. Select Create at the bottom of the form
8. Make sure you copy the token to a secure location before you close the prompt

1. Go to your Azure DevOps Project's page
2. Select Project settings in the lower left corner
3. From the Project settings left side bar, select Repositories under Repos
4. Select the repository where your vercel pipeline is set up
5. Select the Policies tab on the right side
6. Scroll down to Branch Policies, and select the main branch
7. Scroll down to Build Validation and select on the + button to create a new validation policy
8. Select the pipeline you created earlier and keep the policy marked as Required so that commits directly to main are prevented
9. Select Save

Create a pull request to the main branch. This will trigger the pipeline, run the deployment and comment back on the pull request with the deployment URL.

• From your Azure DevOps Project, select Pipelines from the left side bar
• Select the pipeline that you want to edit by selecting the icon
• Select the Variables button and add a new secret variable called AZURE_TOKEN with the value of the Azure DevOps Personal Access Token you created earlier. Select Ok
• Close the Variables window and paste the following code to replace the code in vercel-pipelines.yml

trigger:
- main
 
pool:
  vmImage: ubuntu-latest
 
variables:
  isMain: $[eq(variables['Build.SourceBranch'], 'refs/heads/main')]
 
steps:
- task: vercel-deployment-task@1
  name: 'Deploy'
  inputs:
    condition: or(eq(variables.isMain, true), eq(variables['Build.Reason'], 'PullRequest'))
    vercelProjectId: 'azure-devops-extension'
    vercelOrgId: '3Gcd2ASTsPxwxTsYBwJTB11p' //Example Vercel Personal Account ID
    vercelToken: $(VERCEL_TOKEN)
    production: $(isMain)
- task: vercel-azdo-pr-comment-task@1
  inputs:
    azureToken: $(AZURE_TOKEN)
    deploymentTaskMessage: $(Deploy.deploymentTaskMessage)

• Select Save

• Create a new branch in your Azure DevOps repository and push a commit
• Open a pull request against the main branch
• This will trigger a pipeline execution and create a preview deployment on Vercel
• Once the deployment has completed, you will see a comment on the pull request in Azure DevOps with the preview URL

Here, you can find a list of available properties for each of the available tasks in the Vercel Deployment Extension.