Deploy a Dockerized NEXT JS App to Azure

Deploy a Dockerized NEXT JS App to Azure

Play this article

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


  1. 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.

  1. 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
      
  1. 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.

Tadaaaaaaaa :)

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

Youtube Tutorial