Deploying Azure DevOps Pipelines with Vercel

​Vercel for Azure DevOps allows you to deploy Azure Pipelines to Vercel automatically.
Table of Contents

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:

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.

An empty Vercel Project with no Git integration

An Azure DevOps project that contains the code that you would like to deploy on Vercel

To create an empty Vercel project:

  1. Use the Vercel CLI with the add command
terminal
vercel project add
  1. Or through the dashboard and then disconnect the Git integration that you would have set up
    • 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
  1. 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
  2. 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.

    Azure DevOps Pipeline creation at the review stage to create variables and save/edit your pipeline
    Azure DevOps Pipeline creation at the review stage to create variables and save/edit your pipeline
    • 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

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

    • 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
    • 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
Azure Build Validation under Branch Policies of Project settings
Azure Build Validation under Branch Policies of Project settings
  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
vercel-pipeline.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

The vercel-deployment-task creates an output variable called deploymentTaskMessage. By setting the name: of the step to 'Deploy', you can access it using $(Deploy.deploymentTaskMessage) which you can then assign to the input option deploymentTaskMessage of the vercel-azdo-pr-comment-task task step.

  • 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.

PropertyRequiredTypeDescription
vercelProjectIdNostringThe ID of your Vercel Project. It can alternatively be set as the environment variable VERCEL_PROJECT_ID
vercelOrgIdNostringThe ID of your Vercel Org. It can alternatively be set as the environment variable VERCEL_ORG_ID
vercelTokenNostringA Vercel personal access token with deploy permissions for your Vercel Project. It can alternatively be set as the environment variable VERCEL_TOKEN
vercelCWDNostringThe working directory where the Vercel deployment task will run. When omitted, the task will run in the current directory (default value is System.DefaultWorkingDirectory). It can alternatively be set as the environment variable VERCEL_CWD
productionNobooleanBoolean value specifying if the task should create a production deployment. When omitted or set to false, the task will create preview deployments
debugNobooleanBoolean value that enables the --debug option for the internal Vercel CLI operations
VariableTypeDescription
deploymentTaskMessagestringThe message output taken from the deployment. It can be used in tasks that follow
PropertyRequiredTypeDescription
azureTokenYesstringAn Azure personal access token with the Git PullRequestContribute permission for your Azure DevOps Organization
deploymentTaskMessageYesstringThe message that will added as a comment on the pull request. It is normally created by the Vercel Deployment Task
Last updated on September 27, 2024