Blue/Green Deployments with Azure App Service + GitHub Actions

Stephen Burke

April 8, 2025

How to set up blue/green deployments with Azure App Service and GitHub Actions

Introduction

Setting up blue/green deployments with Azure App Service and GitHub Actions is a great way to ensure that your application is always available to users, even during deployment. It is especially useful for applications that require zero downtime during deployment, such as e-commerce sites or applications that handle sensitive data.

This document outlines how to set up a Blue/Green deployment strategy using Azure App Service Slots and GitHub Actions, including a dedicated Maintenance Page that can be activated at any time with zero downtime.

✅ Goals

• Use GitHub Actions for CI/CD
• Use Bun for building a Next.js App Router app
• Deploy to Azure App Service using slots: production, staging, and maintenance
• Flip traffic between slots without downtime
• Toggle a runtime flag to enable a Maintenance Mode page

---

🧱 Setup Requirements

In Azure:

• ✅ An Azure App Service with the following deployment slots:
  • production (default slot)
  • staging
  • maintenance
• ✅ Enable Run from package (zip deploy)
• ✅ Enable Managed Identity for GitHub OIDC login
• ✅ Assign Contributor role to the App Registration on the App Service

In GitHub:

Add these repository secrets:

Secret Name	Purpose
AZURE_CLIENT_ID	App registration/client ID
AZURE_TENANT_ID	Tenant ID
AZURE_SUBSCRIPTION_ID	Azure subscription
AZURE_RESOURCE_GROUP	The App Service’s resource group

---

📦 GitHub Actions Workflow File

.github/workflows/build-and-deploy.yml

Key features:

• Deploys to staging slot on push to main
• Supports manual deploys to maintenance or staging
• Supports manual swap from staging → production

name: Build and Deploy to Azure Web App

on:
  push:
    branches:
      - main
  workflow_dispatch:
    inputs:
      slot:
        description: "Slot to deploy to (for manual deploy or swap)"
        required: true
        default: staging
        type: choice
        options:
          - production
          - staging
          - maintenance
          - swap-to-production

permissions:
  id-token: write
  contents: read

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    environment: dev

    steps:
      - name: Azure Login
        uses: azure/login@v2
        with:
          client-id: ${{ secrets.AZURE_CLIENT_ID }}
          tenant-id: ${{ secrets.AZURE_TENANT_ID }}
          subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}

      - uses: actions/checkout@v3

      - name: Cache Bun deps
        uses: actions/cache@v3
        with:
          path: ~/.bun/install/cache
          key: ${{ runner.os }}-bun-${{ hashFiles('bun.lockb') }}

      - name: Install Bun
        run: |
          curl -fsSL https://bun.sh/install | bash
          echo "$HOME/.bun/bin" >> $GITHUB_PATH

      - name: Install deps + Prisma + Build
        run: |
          bun install
          npx prisma generate
          echo "NEXT_DISABLE_ESLINT_PLUGIN=true" >> $GITHUB_ENV
          bun run build

      - name: Zip for deployment
        run: |
          rm -rf deploy nextjs-app.zip
          mkdir deploy
          cp -r .next public node_modules package.json bun.lockb next.config.js deploy/
          cd deploy
          zip -r ../nextjs-app.zip .

      - name: Deploy to staging
        if: github.event_name == 'push' || github.event.inputs.slot == 'staging'
        uses: azure/webapps-deploy@v2
        with:
          app-name: event-planning-trpc
          slot-name: staging
          package: nextjs-app.zip

      - name: Deploy to maintenance
        if: github.event.inputs.slot == 'maintenance'
        uses: azure/webapps-deploy@v2
        with:
          app-name: event-planning-trpc
          slot-name: maintenance
          package: nextjs-app.zip

      - name: Swap staging → production
        if: github.event.inputs.slot == 'swap-to-production'
        uses: azure/CLI@v1
        with:
          azcliversion: 2.30.0
          inlineScript: |
            az webapp deployment slot swap \
              --name event-planning-trpc \
              --resource-group ${{ secrets.AZURE_RESOURCE_GROUP }} \
              --slot staging \
              --target-slot production

---

🚧 Maintenance Mode Implementation (Next.js)

In layout.tsx:

import MaintenancePage from './maintenance/page';

export default function RootLayout({ children }) {
  const isUnderMaintenance = process.env.SHOW_MAINTENANCE_PAGE === 'true';

  return (
    <html lang="en">
      <body>
        {isUnderMaintenance ? <MaintenancePage /> : children}
      </body>
    </html>
  );
}

In maintenance/page.tsx

import { notFound } from 'next/navigation';

export default function MaintenancePage() {
  const isUnderMaintenance = process.env.SHOW_MAINTENANCE_PAGE === 'true';

  if (!isUnderMaintenance) {
    return notFound();
  } else {
    return (
      <main className="min-h-screen flex items-center justify-center text-center">
        <div>
          <h1 className="text-3xl font-bold">🚧 Site Under Maintenance</h1>
          <p className="mt-4">We’ll be back shortly!</p>
        </div>
      </main>
    );
  }
}

Set this env var in slot config:

Make sure to check the Deployment slot setting checkbox

Slot	SHOW_MAINTENANCE_PAGE
maintenance	true
staging	false
production	false

Then you can:

• Deploy the app to maintenance
• Flip 100% traffic to the maintenance slot from Azure
• Get a no-downtime maintenance experience

---

🧭 Manual Deploys with workflow_dispatch

This workflow supports manual deployments and slot swaps using GitHub’s workflow_dispatch input.

It lets you:

• 🚀 Deploy the current code to a specific slot (staging, maintenance)
• 🔁 Swap the staging slot into production without pushing new code

🧪 How to Use It

1. Go to your repo on GitHub.com
2. Navigate to the Actions tab
3. Select the Build and Deploy to Azure Web App workflow
4. Click the “Run workflow” button (top-right)
5. Choose a value from the Slot dropdown:

• staging – deploy the latest code to the staging slot
• maintenance – deploy the latest code to the maintenance slot
• swap-to-production – promote staging to production via slot swap

6. Click Run workflow

ℹ️ Tip: This is useful for hotfixes, testing staging before a swap, or triggering a maintenance window without code changes.

---

🧪 Testing & Troubleshooting

• Always open the app in incognito after swapping traffic to a slot
• Make sure .env values are correct per slot in Azure > Configuration
• Avoid putting SHOW_MAINTENANCE_PAGE in client code (use only in server-rendered areas)

---

✅ Summary

You’re now fully set up for:

• 🔄 Safe Blue/Green deployments
• 🚧 Seamless maintenance page rollouts
• 💨 Fast Bun builds with GitHub Actions
• 🧠 Runtime flexibility using Azure slots and env vars

---

Thank you for reading! If you enjoyed this post, feel free to share it with your friends and colleagues. For more insights on web development, technology trends, and digital innovation, stay tuned to this blog.