Blue-Green deployments and canary deployments on Vercel

Blue-green deployments is a deployment strategy where you serve two versions of your application, "Blue" and "Green". You serve the current version of your application (Blue) and then you can then deploy a different version of your application (Green) without affecting the Blue environment.

Rolling Releases are a built-in feature of Vercel that let you configure blue-green deployments with no code changes. You can create automated or manual, multi-stage rollout strategies that integrate with Observability.

If you'd like to implement blue-green deployments yourself with lower-level primitives, you can use this template to do so.

• Demo
• Detailed guide

This keeps your Blue application running seamlessly for production users while you test and deploy to your Green application. When you're done testing and ready to serve user's your Green application, you can incrementally or fully switch to your new Green application with no perceptible change for your users.

This is typically done using load balancers to direct traffic, but with Vercel's generated urls you can instantly switch which application is served to users seamlessly using Skew Protection, Edge Config, and Middleware in Next.js. By using Skew Protection, the assignment to the blue or green deployments are sticky across Vercel's entire global CDN, edge functions, and serverless function infrastructure. This ensures users are never shuffling between the blue and green deployment in a given session.

The blue-green deployment strategy is great for managing risk, giving you the ability to gradually roll out a new version of your application (including breaking changes) or go back to using the previous version instantaneously.

Getting started

• Deploy this template
• Activate Skew Protection for the project
• Activate Deployment protection bypass for the project
• Create an Edge Config
• Use the following Edge Config settings:

1
{
2
  "blue-green-configuration": {
3
    "deploymentDomainBlue": "https://blue-green-61yvm4f5d.vercel.rocks",
4
    "deploymentDomainGreen": "https://blue-green-nq2hvhtsv.vercel.rocks",
5
    "trafficGreenPercent": 50
6
  }
7
}

The fields deploymentDomainBlue and deploymentDomainGreen must be valid deployment domains for your projects.

See this project's middleware.ts file for the logic implementing the blue-green logic.

Executing a blue-green deployment

With both deployments using the same Middleware in this project, Vercel will only serve the deployment specified in your Edge Config.

The simplest way to perform a blue-green deployment would be to manually update the Edge Config. Upon saving it, the new deployments will begin serving.

For CI/CD-driven blue-green deployments, you can automate deployments using the Edge Config API in your CI/CD pipeline. You can see a working example of this in action by viewing the GitHub Action in this project. It creates new deployments and updates the Edge Config with the new deployment urls.