Deploy a Dockerized NEXT JS App to Azure

Bawantha Rathnayaka

Published in

DevOps.dev

3 min readMar 6, 2023

In this article, I will teach how to deploy a dockerized next js app in Azure app services.

Dockerize a NEXT JS APP

Let’s create our docker file.

FROM node:alpine

RUN mkdir -p /usr/src/
WORKDIR /usr/src/

COPY . /usr/src/

RUN npm install

RUN npm run build
EXPOSE 3000
CMD npm run start

In this file we are building an image from node:alpine and exporsing our app port 3000.

Building our docker Image

Our docker file is ready. Now we can build our docker image, I’ll call it “mynext:prod”. you can do so with the following command

docker build . -f Dockerfile -t mynextapp.azurecr.io/mynextapp

after this, you can run your docker image using this command.

docker run --name mynextapp -p 3000:3000 mynextapp.azurecr.io/mynextapp

Now my app is running on port 3000 like this.

Creating and push our docker image to Azure ACR

Azure Container Registry is a private registry for hosting container images. Using the Azure Container Registry, you can store Docker-formatted images for all types of container deployments.

follow these steps to create azure container registry.

fill out the required fields. and click Review+create. if you want you can add some tags.

Here We go! Our ACR was created successfully. You can see highlighted text. That is a container registry login.

Push Image to Azure Container Registry

 az login
 az acr login --name mynextapp

2. Docker login

 docker login mynextapp.azurecr.io

3. Final step is to push the above image to azure ACR

 docker push mynextapp.azurecr.io/mynextapp

Create Azure App Service

Create a web app

From the left menu, select Create a resource > Web > Web App
Your Basics tab should look like this:

Configure container

In the Docker tab, configure your custom Linux container as shown in the following Image, and select Review + create.

Complete app creation

Select Create and wait for Azure to create the required resources.

Browse to the web app

When the Azure operation is complete, a notification box is displayed

Select Go to resource
In the app page, select the link under URL.

Congratulations! You’ve migrated a NEXT JS application to Azure App Service in a Linux Container.

Youtube Tutorial

https://www.youtube.com/watch?v=P1mM3DO-kW0