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
1. Sign in with Azure account.
```
 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
1. Create a web app
  
  From the left menu, select Create a resource > Web > Web App
  
  Your Basics tab should look like this:
2. Configure container
  
  In the Docker tab, configure your custom Linux container as shown in the following Image, and select Review + create.
3. Complete app creation
  
  Select Create and wait for Azure to create the required resources.
4. Browse to the web app
  
  When the Azure operation is complete, a notification box is displayed
  1. Select Go to resource
  2. In the app page, select the link under URL.