How to Deploy a Next.js App to Azure with Docker

Preston KellyThursday, March 6, 2025

Introduction

In this guide, we'll walk through deploying a Next.js application to Azure using a Dockerfile and the Azure CLI. We'll use the Container Apps product which provides a serverless, scalable way to host containerized applications without the need to manage the underlying infrastructure. Since Dockerfiles are typically tailored to each project, we'll exclude them from this guide.

Prerequisites

Before starting, ensure you have the following tools installed:

A Next.js application with a Dockerfile
An Azure account (new accounts include free credits)
Docker installed on your machine
Azure CLI for command-line management

Step 1: Setting Up Your Azure Environment

1.1 Create an Azure Account

If you don’t have an Azure account yet, sign up at Azure Portal. The free-tier provides sufficient resources to get started.

1.2 Install Azure CLI

The Azure CLI enables you to manage Azure resources directly from your terminal:

# macOS
brew install azure-cli

# Windows
winget install -e --id Microsoft.AzureCLI

1.3 Authenticate with Azure

After installation, log in to your Azure account and set up your subscription:

az login
az account list --output table
az account set --subscription "Your Subscription Name"

1.4 Create a Service Principal

For secure deployments, create a service principal with contributor permissions:

az ad sp create-for-rbac --name "nextjs-deploy" --role contributor \
  --scopes /subscriptions/$(az account show --query id -o tsv)

Step 2: Preparing Your Azure Resources

2.1 Create a Resource Group

Organize your Azure resources by creating a resource group:

export AZURE_RG_NAME="your-resource-group"
az group create --name $AZURE_RG_NAME --location "eastus2"

2.2 Register Required Azure Providers

Ensure that necessary Azure services are registered before deployment:

az provider register --namespace Microsoft.ContainerRegistry
az provider register --namespace Microsoft.ContainerInstance
az provider register --namespace Microsoft.App

2.3 (Optional) Set Up a PostgreSQL Database

If your Next.js application requires a database, you can set up an Azure PostgreSQL server:

export AZURE_DB_SERVER="your-db-server"
export POSTGRES_USER="dbadmin"
export POSTGRES_PASSWORD="password"

az postgres flexible-server create \
  --name $AZURE_DB_SERVER \
  --resource-group $AZURE_RG_NAME \
  --location "eastus2" \
  --admin-user $POSTGRES_USER \
  --admin-password "$POSTGRES_PASSWORD" \
  --sku-name "Standard_B1ms" \
  --tier "Burstable" \
  --storage-size 32 \
  --backup-retention 7

For production, consider using the General Purpose tier with redundancy for improved availability.

Step 3: Building and Deploying Your Next.js Application

3.1 Create an Azure Container Registry

To store Docker images, create an Azure Container Registry (ACR):

export AZURE_CONTAINER_REGISTRY="yourregistry"
az acr create \
  --resource-group $AZURE_RG_NAME \
  --name $AZURE_CONTAINER_REGISTRY \
  --sku Basic \
  --admin-enabled true

3.2 Build and Push Your Docker Image

Ensure your Next.js app has a Dockerfile, then build and push the image:

az acr login --name $AZURE_CONTAINER_REGISTRY

docker buildx build --platform linux/amd64 \
  -t $AZURE_CONTAINER_REGISTRY.azurecr.io/nextjs-app:latest \
  --push .

3.3 Deploy to Azure Container Apps

Set up an Azure Container App environment and deploy your application:

export AZURE_CONTAINER_INSTANCE="your-app-name"

az containerapp env create \
  --name "$AZURE_CONTAINER_INSTANCE-env" \
  --resource-group $AZURE_RG_NAME \
  --location "eastus2"

ACR_USERNAME=$(az acr credential show --name $AZURE_CONTAINER_REGISTRY --query "username" -o tsv)
ACR_PASSWORD=$(az acr credential show --name $AZURE_CONTAINER_REGISTRY --query "passwords[0].value" -o tsv)

az containerapp create \
  --name $AZURE_CONTAINER_INSTANCE \
  --resource-group $AZURE_RG_NAME \
  --environment "$AZURE_CONTAINER_INSTANCE-env" \
  --image $AZURE_CONTAINER_REGISTRY.azurecr.io/nextjs-app:latest \
  --target-port 3000 \
  --ingress external \
  --registry-server $AZURE_CONTAINER_REGISTRY.azurecr.io \
  --registry-username $ACR_USERNAME \
  --registry-password $ACR_PASSWORD \
  --secrets database-url="$DATABASE_URL" \
  --env-vars NODE_ENV=production NEXT_TELEMETRY_DISABLED=1

3.4 Retrieve Deployment URL

Check if your application is live by running:

az containerapp show \
 --name $AZURE_CONTAINER_INSTANCE \
 --resource-group $AZURE_RG_NAME \
 --query "properties.configuration.ingress.fqdn" \
 --output tsv

Step 4: Managing Your Application

Updating Environment Variables

Modify application settings post-deployment:

az containerapp update \
  --name $AZURE_CONTAINER_INSTANCE \
  --resource-group $AZURE_RG_NAME \
  --set-env-vars DATABASE_URL="new-database-url"

Viewing Logs

Monitor application logs:

az containerapp logs show \
  --name $AZURE_CONTAINER_INSTANCE \
  --resource-group $AZURE_RG_NAME

Scaling for Performance

Enable automatic scaling based on HTTP traffic:

az containerapp update \
  --name $AZURE_CONTAINER_INSTANCE \
  --resource-group $AZURE_RG_NAME \
  --min-replicas 1 \
  --max-replicas 10 \
  --scale-rule-name http-rule \
  --scale-rule-type http \
  --scale-rule-http-concurrency 50

Conclusion

By deploying your Next.js application to Azure Container Apps with Docker, you gain a reliable and scalable hosting environment. With automatic scaling, comprehensive logging, and flexible environment configurations, Azure makes it easy to manage modern web applications.

For further reading: