Demo → https://blue-green.vercel.rocks

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.

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.

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

{
  "blue-green-configuration": {
    "deploymentDomainBlue": "https://blue-green-61yvm4f5d.vercel.rocks",
    "deploymentDomainGreen": "https://blue-green-nq2hvhtsv.vercel.rocks",
    "trafficGreenPercent": 50
  }
}

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.

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.