Deploying a Next.js App on Azure with Docker

Deploying a Next.js application on Azure App Service can seem daunting, especially when you want a robust, production-ready setup. Combining Docker with Azure DevOps pipelines ensures consistency, scalability, and reliability for enterprise grade deployments. In this article, I'll share the complete workflow, challenges, and lessons learned while deploying a Next.js 15 app on Azure with Docker.

Context

Next.js offers hybrid rendering, API routes, and automatic image optimization, making it ideal for modern web applications. While deploying to platforms like Vercel is straightforward, enterprise environments often require Azure due to security, compliance, or corporate policies. Dockerizing the app ensures that the same environment works across local, staging, and production deployments, minimizing "it works on my machine" issues.

Problem

Some of the common challenges faced during deployment include:

• Azure's default build environment may mismatch Node.js versions with your Next.js app.
• Next.js builds are sometimes slow without proper caching.
• CI/CD pipelines need to securely handle environment variables and secrets.
• Docker images can become large, increasing deployment time and costs.

Solution

Here's how I solved these challenges step by step:

1. Creating a Multi Stage Dockerfile

Multi stage builds reduce image size by separating dependencies, build artifacts, and runtime environment. Here's the Dockerfile I used:

FROM node:18-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm install --frozen-lockfile
COPY . .
RUN npm run build

FROM node:18-alpine AS runner
WORKDIR /app
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/public ./public
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package*.json ./
EXPOSE 3000
CMD ["npm", "start"]

This approach ensures a small and clean runtime image with only what's needed for production.

2. Pushing Docker Image to Azure Container Registry (ACR)

Instead of relying on Azure's build process, I pushed my Docker image to ACR. This guarantees that the exact same image is deployed to every environment, eliminating discrepancies between local and production builds.

3. Configuring CI/CD Pipeline in Azure DevOps

The CI/CD pipeline included the following stages:

• Build Stage: Install dependencies, run tests, and build Next.js artifacts.
• Docker Stage: Build Docker image, tag, and push to ACR.
• Deploy Stage: Pull image from ACR and update Azure App Service.

Secrets like database credentials and API keys were securely stored in Azure Key Vault and injected during deployment.

Impact

• Reduced build failures by ensuring consistent Docker images.
• Faster deployments due to smaller images and caching.
• Improved scalability by allowing Azure App Service to auto-scale containers.
• Enhanced security by storing secrets in Key Vault instead of code.

Learnings

• Multi stage Docker builds are essential for efficient production deployments.
• Pin Node.js versions to avoid build inconsistencies.
• CI/CD pipelines should automate both deployment and environment management.
• Monitoring and logging are critical for detecting performance bottlenecks early.

Conclusion

Deploying a Next.js app on Azure using Docker provides predictability, reliability, and scalability. This process bridges the gap between development and enterprise grade deployment, making it essential knowledge for any fullstack or solution architect professional. The workflow outlined here can be adapted for most modern web applications, ensuring smooth production deployments.

Call-to-Action

Check out my GitHub repository for the full Docker setup and pipeline configuration. You may also be interested in my article comparing Serverless vs Containerized Architectures for different deployment strategies.