How To Run an Angular App As a Container On Azure VM

A step by step guide with an example Project

Bhargav Bachina
Dec 24, 2020 · 8 min read

There is a number of ways you can run your applications nowadays. It’s very common to containerize your application and run it on Docker runtime. You have several options in Microsoft Azure such as App Service, AKS, etc. But, you have limited control over the underlying architecture when you use these options. If you want complete control over the underlying architecture you can install Docker on Azure VM and run your application on it.

In this post, we will see how we can install Docker on Azure VM and run an Angular application as a container on it.

  • Prerequisites

Prerequisites

There are some prerequisites for this article. You need to have nodejs installed on your laptop and how http works. If you want to practice and run this on your laptop you need to have these on your laptop.

Azure Prerequisites

You should have a Microsoft Azure Account. You can get a free account for one year. You should see the below screen after you login.

Azure Home Screen

You need to create a subscription for your account. The most common is Pay As You Go subscription.

Subscription Offers
Pay-As-You-Go Subscription

You need a subscription to be associated with your tenant so that all the cost is billed to this subscription.

Install Azure CLI and Configure

Once you have the Azure Account you can install Azure CLI. You can go to the below documentation and install Azure CLI based on your operation system. You can configure Azure CLI with your subscription.

az login

Let’s list the subscription with the following command

az account list --output table

Example Project

Let’s see what we are running as an example project here. This is a simple project which demonstrates developing and running an Angular application with NodeJS. We have a simple app in which we can add users, count, and display them at the side, and retrieve them whenever you want.

Example project
// clone the project
git clone https://github.com/bbachi/angular-nodejs-minikube.git
// Run NodeJS server on port 3080
npm install
npm start
// Run Angular code on port 4200
cd my-app
npm install
npm start

Run it On Docker

We use the multi-stage builds for efficient docker images. Building efficient Docker images are very important for faster downloads and lesser surface attacks. In this multi-stage build, building an Angular project and put those static assets in the dist folder is the first step. The second step involves taking those static build files and serve those with the node server.

Let’s build an image with the Dockerfile. Here are the things we need for building an image.

Stage 1

  • Start from the base image node:10

Stage 2

  • Start from the base image node:10

Here is the complete Dockerfile

Dockerfile

Let’s build the image with the following command.

// build the image
docker build -t angular-node-image .
// check the images
docker images

Once the Docker image is built. You can run the image with the following command.

// run the image
docker run -d -p 3080:3080 --name ang-node-ui angular-node-image
// check the container
docker ps

Once you run the container you can the application on port 3080.

Running the Docker container

Publishing the Docker Image

Let’s publish the Docker image to Docker Hub with this command docker push <repo name> . Before that, you need to create a Docker Hub account if you don’t have one. Here is the link for it.

Let’s create a repository and it’s bbachin1 in my case. We need to login, tag the image, and push it finally.

// login
docker login
// tag the image
docker tag angular-node-image bbachin1/angular-node-webapp
// push the image
docker push bbachin1/angular-node-webapp
Publishing Docker Image

Set up a VM and Install Docker

There is a number of ways to set up a VM on Azure. We will see how to set up a VM with Azure CLI. Make sure you have set the correct subscription you want to use with the following command.

az account set --subscription <subscription id>

In Azure, whatever resource you create that should be placed in the resource group. So, let’s create a resource group

az group create --name vm-demo --location eastus
resource group created

You can verify in the portal whether the resource group is created or not.

resource group created

Let’s create a VM with the following command. The image I selected here is ubuntuLTS.

az vm create \
--resource-group vm-demo \
--name dockerVM \
--image UbuntuLTS \
--admin-username azureuser \
--generate-ssh-keys
VM created

Note your own publicIpAddress in the output from your VM. This address is used to access the VM in the next steps. In this case, the public IPAddress is 40.87.64.208.You can check the VM created in the portal.

VM Created

By default, only SSH connections are opened when you create a Linux VM in Azure. Use az vm open-port to open TCP port 80 for the web traffic.

az vm open-port --port 80 --resource-group vm-demo --name dockerVM

Let’s ssh into VM and install Docker on it with the following commands.

// ssh
ssh azureuser@40.87.64.208
// install docker
sudo apt-get -y update
// remove any old versions of Docker
sudo apt-get remove docker docker-engine docker.io
// Install Docker
sudo apt install docker.io
// Start the Docker
sudo systemctl start docker
// Enable Docker so that Docker runs on startup
sudo systemctl enable docker
// check the version
docker --version
Docker installed on VM

Run the Container

We set up a VM and install Docker on it. It’s time to pull the Docker Image that we published in the earlier section with the following command. You need to set the permission so that you can pull the image without getting permission denied error.

// set the permission
sudo chmod 666 /var/run/docker.sock
// pull the image
docker pull bbachin1/angular-node-webapp
docker pull

Run the following command to run the container.

docker run -d -p  80:3080 --name ang-node-ui bbachin1/angular-node-webapp
docker ps

Access From the Browser

We know the public IP address of the VM we have created which is 40.87.64.208 and the container is running on port 3080 and is mapped to outside port 80. You can access the app from the following location.

http://40.87.64.208:80
App Running on Docker inside Azure VM.

Summary

  • There is a number of ways you can run your applications nowadays. It’s very common to containerize your application and run it on Docker runtime.

Conclusion

This is one way of deploying your containerized Angular application on Azure. But, this method has some limitations such as you have to run a single Docker container per instance you can’t scale up based on the demand. You have to use VM scale sets that let you operate apps on multiple identical VMs. You can make your workloads scalable and highly available by LoadBalancer in front of VMs. In future posts, we will see how we can deploy Angular apps on App Service, Azure AKS, Azure container instances, etc.

Bachina Labs

Tutorials Ranging from Beginner guides to Advanced | Never…

Sign up for BB Tutorials & Thoughts

By Bachina Labs

Tutorials Ranging from Beginner guides to advanced on Frontend, Backend, Blockchain, Docker, k8s, DevOps, Cloud,AI, ML. Thank you for subscribing and let me know if you want me cover anything?  Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Bhargav Bachina

Written by

Software Architect — Sharing Experiences With Examples | Frontend, Backend, Blockchain, Docker, k8s, DevOps, Cloud,AI, ML | https://www.linkedin.com/in/bachina/

Bachina Labs

Tutorials Ranging from Beginner guides to Advanced | Never Stop Learning

Bhargav Bachina

Written by

Software Architect — Sharing Experiences With Examples | Frontend, Backend, Blockchain, Docker, k8s, DevOps, Cloud,AI, ML | https://www.linkedin.com/in/bachina/

Bachina Labs

Tutorials Ranging from Beginner guides to Advanced | Never Stop Learning

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store