Deploy a Dockerized NEXT JS App to Azure
2 min read
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
Sign in with Azure account.
az login az acr login --name mynextapp
docker login mynextapp.azurecr.io
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:
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.