Phase 1 - Building a Multi-Region Backend on Azure (Before Azure Front Door)

Source: Dev.to

Overview

When designing global applications, the first step isn’t configuring global routing—it’s building healthy, regionally distributed back‑ends. This tutorial deploys two Azure App Services in different regions, each returning a region‑specific response. The setup provides a solid foundation for later integrating Azure Front Door.

Resources

• Resource Group: rg-afd-lab
• Region 1: East US 2
• Region 2: Southeast Asia
• App Service Plan SKU: B1 (Linux)
• Runtime: Node.js 20 LTS

At this stage, traffic reaches each regional app directly via *.azurewebsites.net.

Create the Resource Group

RG="rg-afd-lab"
LOCATION1="eastus2"
LOCATION2="southeastasia"

az group create \
  --name $RG \
  --location $LOCATION1

Create Linux App Service Plans

SUFFIX=$RANDOM

PLAN1="plan-eastus2-$SUFFIX"
PLAN2="plan-sea-$SUFFIX"

az appservice plan create \
  --name $PLAN1 \
  --resource-group $RG \
  --location $LOCATION1 \
  --sku B1 \
  --is-linux

az appservice plan create \
  --name $PLAN2 \
  --resource-group $RG \
  --location $LOCATION2 \
  --sku B1 \
  --is-linux

Each region gets its own compute plan.

Verify Available Node Runtimes

az webapp list-runtimes --os-type linux

Create the Web Apps

APP1="app-eastus2-$SUFFIX"
APP2="app-sea-$SUFFIX"

az webapp create \
  --name $APP1 \
  --resource-group $RG \
  --plan $PLAN1 \
  --runtime "NODE|20-lts"

az webapp create \
  --name $APP2 \
  --resource-group $RG \
  --plan $PLAN2 \
  --runtime "NODE|20-lts"

Application Code

server.js

const express = require('express');
const app = express();
const port = process.env.PORT || 8080;

app.get('/', (req, res) => {
  res.send('Hello from East US 2 🚀');
});

app.listen(port, () => {
  console.log('Server running on port', port);
});

Note: For the second app, modify the response message (e.g., “Hello from Southeast Asia 🚀”).

package.json

{
  "name": "regional-app",
  "version": "1.0.0",
  "main": "server.js",
  "scripts": {
    "start": "node server.js"
  },
  "dependencies": {
    "express": "^4.18.2"
  }
}

Enable Automatic Build During Zip Deploy

If you skip this step, Azure won’t run npm install.

az webapp config appsettings set \
  --resource-group $RG \
  --name $APP1 \
  --settings SCM_DO_BUILD_DURING_DEPLOYMENT=true

Repeat the command for $APP2.

Deploy the Application

zip -r app.zip .

Deploy to the first app:

az webapp deploy \
  --resource-group $RG \
  --name $APP1 \
  --src-path app.zip \
  --type zip

Deploy to the second app (using the same app.zip after updating the response message).

Verify Deployment Logs

az webapp log tail \
  --resource-group $RG \
  --name $APP1

You should see output similar to:

Running 'npm install'
Server running on port 8080

Validate the Deployments

Create validate.sh:

#!/bin/bash

RG="rg-afd-lab"
APPS=$(az webapp list --resource-group $RG --query "[].name" -o tsv)

for APP in $APPS
do
  URL="https://$APP.azurewebsites.net"
  echo "Testing $URL"
  curl -s -o /dev/null -w "HTTP %{http_code} - %{time_total}s\n" $URL
done

Run the script:

bash validate.sh

The script reports the HTTP status code and response time for each regional endpoint.

Important Azure Behavior

• Zip deploy does NOT automatically install dependencies.
• You must enable SCM_DO_BUILD_DURING_DEPLOYMENT; otherwise the app crashes with:

Error: Cannot find module 'express'

Understanding this prevents misdiagnosing issues later when integrating Azure Front Door.

Pre‑Front Door Checklist

• Each origin is independently healthy.
• Correct content is served from every region.
• Latency baseline is measured.
• Logs are working.
• Health endpoints are functional.

Skipping origin validation is the #1 cause of global load‑balancing failures.

What’s Next (Phase 2)

• Deploy Azure Front Door.
• Configure origin groups and health probes.
• Test failover between regions.
• Add WAF protection.

We’ll move from regional compute to a global edge architecture.