Deploy a Docker App to App Services on Azure.
Tags: docker, azure, beginners, tutorial
Published: 2023-04-20 08:04:07

This article is a walkthrough on how to "dockerize" a node js app and host via azure app service.

Azure app service is a fully managed service which enables you to build and host web apps, mobile back ends, and RESTful APIs in the programming language of your choice without managing infrastructure. This is a Platform as a Service (PAAS) because the job of managing infrastructures is not on the users.

This walkthrough is divided into 2 parts:
- Creating a Docker image (with a node app) and pushing to a registry (Azure Container Registry).
- Hosting the image via Azure app service.

The following tools are needed:
- An Azure account
- Docker and a terminal.

**Part 1: Dockerize a Node js app and push to Azure Container Registry**

- Login to your azure account and navigate to container registries to create a container registry (this is where our docker image will be stored) by clicking on **create container registry**.

![ACR](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yqxzcwwqs78kv18fyjo0.png)
- Complete the necessary details before clicking  **create** (a summary of mine).

![Summary of ACR](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l035ennurrqfmqb4ld56.png)
- Progress of ACR being initialized and on the way to getting created and finally successful creation.

![Initialize ACR](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jag3dcw0u55ke9ppir17.png)

![ACR in Progress](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8m58aly92apnf39swagv.png)

![ACR completed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lxl6ax7vlx6xgkc3hjq9.png)
- Navigating to my Container Registry dashboard.

![ACR dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/etgh9yw1ex62rwzwrlen.png)
- On the LHS, navigate to Settings => Access keys and enable **admin user**, the details will be used to login to ACR via your terminal on your local machine.

![Enable admin user](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n8lhpoq9fm6bfybsrf86.png)
- Navigate to your project directory via terminal and login using the details from the step above  `docker login <login server> --username <username> --password <password>`

![Establish a connection with ACR](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jnbewe3cpnixm5m55rwz.png)
- Build docker image using this command `docker build -t <name>:<tag> .` where . is the current directory.

![Build docker image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dtphne0gl6a3s0hh4bd4.png)
- Check the image exists using `docker images` command ( this lists all available images).

![List docker image(s)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s8z5pqnobp8lsyukixq4.png)
- Push the image to ACR using `docker push <name>:<tag>`

![Pushing image to ACR](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v72ss6ceq1bltwidfo4t.png)
- On azure portal, navigate to your container registry => repositories to view pushed image.

![View Image on Repositories](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7muvpmwckjtfs1wc8y2s.png)

**Part 2: Hosting my docker app on app service**
- On the image click the options icon and choose **deploy to web app**.

![Deploy to web app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ofngxxetfwwn5xtzomtz.png)
- Details for my app service where my docker image is the source, then click create.

![App service details](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5r15htngzkiuosf9lsc7.png)

- Deployment is completed.
![App service deployment](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/px09vsmohqnovyexjy33.png)
- Navigate to just created app service.

![App service](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iiqyqh0mgs35pqt4c052.png)
- Following azure's best practices.

![Add port to configurations](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f6ba3auvr2dtyov4jtig.png)
- Adding port as a variable to Configurations

![Add port 4000](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/epq8s39tw4jks31f0aj3.png)
- Access the app via default domain on browser

![Default domain](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3rm1q09zyvezch7tvdgl.png)

To avoid incurring charges, I cleaned up my resources.

Visit my [Github repo](https://github.com/KeneOjiteli/hosting-a-docker-app-via-app-service) to view code.