Deploy a Next.js Application on Azure Web App ( Part 1)

Today, we are going to deploy a very simple web application build using Next.JS framework on Microsoft Azure Web App. This blog is split into two parts - Part 1: covers local web app development and deployment to azure web app using local machine. Part 2: covers deployment using Gitlab CI

Prerequisites

Before starting, ensure you have the following prerequisites:

• Azure Account Subscription: If you don't have one, you can sign up for a free account here.

• Node.js and NPM: Make sure Node.js and NPM are installed on your local machine. Download them here.

• Git and Azure CLI: Install Git and the Azure CLI. Git can be found here and Azure CLI here.

• Docker: You’ll need Docker for building and running your Next.js app in a container. Get it here. (It is optional, we can build image directly on azure also)

Table of Contents

• Setup Boilerplate Repo
• Build Docker Image (optional)
• Create an Azure Web App
• Deploy Web App using Azure CLI

Step 1: Setup Repository

To get started, you'll first need to set up a Next.js boilerplate application. If you don't already have one, you can quickly clone a Next.js app (refer here) with the following steps:

Open your terminal and run the following commands:

 git clone https://github.com/guptagaurav89/nextjs-boilerplate

 cd nextjs-boilerplate

 npm install

 npm run build

 npm run start

Step 2: Build Docker Image 

Next, we’ll create a Docker container for our Next.js application. While this step is optional, it allows you to run your Next.js app in a self-contained environment. Cloned repo already has a Dockerfile as below

# Use the official Node.js image as the base

FROM node:20-alpine AS builder

# Set working directory

WORKDIR /app

# Copy package.json and package-lock.json

COPY package.json package-lock.json ./

# Install dependencies

RUN npm install

# Copy the rest of the application

COPY . .

# Build the application

RUN npm run build

# Use a minimal Node.js runtime for production

FROM node:20-alpine AS runner

WORKDIR /app

# Copy the built Next.js app from the builder stage

COPY --from=builder /app ./

# Set environment variables

ENV NODE_ENV=production

EXPOSE 3000

# Start the application

CMD ["npm", "run", "start"]

Build the Docker image using the following command:

docker build -t my-nextjs-app .

To test the Docker container locally, run:

docker run -p 3000:3000 my-nextjs-app

Visit http://localhost:3000 in your browser, and you should see your Next.js app running inside the container.

Step 3: Create an Azure Web App

1. Go to the Azure Portal and log in to your account.

2. Navigate to "App Services" and click "Create." Choose "Web App".

3. Select your Subscription and Resource Group.

4. Enter a unique name for your Web App (e.g., my-next-webapp).

5. Choose Publish type as "Container". For the Operating System, select "Linux."

6. Select an Azure Region to deploy.

7. Create new pricing plan for App Service. Choose Free tier or Basic for demo purpose.

8. Click "Review + Create" and then "Create" to deploy the web app.

Once deployment is succeeded. Click "Go to resource". In overview section, click on Default domain, it will open your web app in new tab. It will display default azure web app static page.

Step 4: Deploy Web App using Azure CLI

Go back to your terminal and login to azure

az login

Create an Azure Container Registry to deploy Docker image:

az acr create --resource-group myResourceGroup --name myacr --sku Basic

Build Docker image directly on ACR using below step:

az acr build --registry myacr --image myacr.azurecr.io/my-nextjs-app:latest .

If Docker is available on local machine, build image locally and push to ACR.

az acr login --name myacr

docker push myacr.azurecr.io/my-next-app:latest

Next, we configure the Docker image path for our web app. 

1. Go to Azure Web Console, Open Web App created from All Resources.

2. Navigate to Deployment -> Deployment Center.

3. Choose "Azure Container Registry" for the Container Image Source.

4. Select your previously created ACR (myacr).

5. Select the repository and tag (e.g., my-next-app:v1) and Save.