Azure — Deploying Angular App With NodeJS Backend on AKS

A sep by step guide with an example project

Bhargav Bachina
Nov 25, 2020 · 8 min read
Image for post
Image for post

AKS is Microsoft Azure’s managed Kubernetes solution that lets you run and manage containerized applications in the cloud. Since this is a managed Kubernetes service, Microsoft takes care of a lot of things for us such as security, maintenance, scalability, and monitoring. This makes us quickly deploy our applications into the Kubernetes cluster without worrying about the underlying details of building it.

In this post, we are going to deploy an Angular application with a nodejs environment. First, we dockerize our app and push that image to the Azure container registry and run that app on Azure AKS. We will see how we can build the Kubernetes cluster on Azure AKS, Accessing clusters from outside, configuring kubectl to work with AKS cluster, and many more.

  • Example Project

Example Project

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.

Image for post
Image for post
Example Project

If you want to practice your own here is a Github link to this project. You can clone it and run it on your machine as well.

// clone the project
git clone https://github.com/bbachi/angular-nodejs-aks.git
// install Angular dependencies and start
cd my-app
npm install
npm start
// install server side dependencies and start
npm install
npm run dev

Prerequisites

  • If you are new to Angular please go through the below link on how to develop and build the Angular project with NodeJS backend.

How To Develop and Build Angular App With NodeJS

The other prerequisites to this post are Docker essentials and Kubernests essentials. We are not going to discuss the basics such as what is a container or what is Kubernetes, rather, we will see how to build a Kubernetes cluster on Azure AKS. Below are the prerequisites you should know before going through this article

Docker Essentials

You need to understand Docker concepts such as creating images, container management, etc. Below are some of the links that you can understand about Docker if you are new.

Kubernetes Essentials

You need to understand Kubernetes’ essentials as well along with Docker essentials. Here are some of the docs to help you understand the concepts of Kubernetes.

Microsoft Azure Account

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.

Image for post
Image for post
Azure Home Screen

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

Image for post
Image for post
Subscription Offers
Image for post
Image for post
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.

Image for post
Image for post
az login

Let’s list the subscription with the following command

az account list

Dockerize the Project

Azure AKS is a managed service that makes it easy for you to run Kubernetes on Azure. The first thing you need to do is to dockerize your project.

Here is the Dockerfile and it is using multi-stage builds to reduce the image size and surface attacks.

Dockerfile

Here are the commands to build the image and run it on the Docker engine on your local machine. If you are new to Docker and check this detailed post on this topic.

// build the image
docker build -t angular-node-image .
// running on Image
docker run -it -p 3080:3080 --name ang-node-ui angular-node-image
// list the image you just built
docker images
// list the container
docker ps

Pushing Docker Image To Container Registry

Azure container registry builds, store, secure, scan, replicate, and manage container images and artifacts with a fully managed, geo-replicated instance of OCI distribution. Connect across environments, including Azure Kubernetes Service and Azure Red Hat OpenShift, and across Azure services like App Service, Machine Learning, and Batch.

Azure AKS works with any Docker registry such as Docker Hub, etc. But, in this post, we see how we can use the Azure container registry to store our Docker images. Once you set up the Azure portal account and creates a resource group as above you can create a container registry as below.

Image for post
Image for post
Creating Container Registry

Once you review and create you can see the following screen.

Image for post
Image for post
deployment is completed

You can see the main container registry page below.

Image for post
Image for post
container registry created

You can do the same things with the Azure CLI with the following commands. Make sure you log in to your Azure Account with CLI with this command az login before running the below commands.

// create a resource group
az group create --name k8s-demo --location westus
// create a container registry
az acr create --resource-group k8s-demo \
--name angularnodejs --sku Basic

It’s time to build and push the Docker image with the following command. Clone the above example project and go to the root folder where Dockerfile resides and run this command.

az acr build --image aksdemo/angular-nodejs:v1 \
--registry angularnodejs \
--file Dockerfile .

You will see the output below

Image for post
Image for post
Docker image pushed.

You can see all the details in the portal as well

Image for post
Image for post
Repository Details
Image for post
Image for post
docker pull command

If you want to pull this repository you need to use this command.

docker pull angularnodejs.azurecr.io/aksdemo/angular-nodejs:v1

Creating AKS Cluster

First, you need a resource group for all your resources. Let’s create a resource with the following command.

az group create --name k8s-demo --location westus

Let’s create a cluster with the following command. Notice that we are using the same resource group that we created above. You can see the JSON formatted result after a few minutes.

az aks create --resource-group k8s-demo --name frontend-cluster --node-count 3 --enable-addons monitoring --generate-ssh-keys

You can see the following cluster in the console.

Image for post
Image for post
frontend-cluster created

Configure Kuebctl With AKS Cluster

Kubectl is the command-line utility for the Kubernetes. You need to install kubectl before you configure it. Run the first command only if you don’t have kubectl on your local machine.

// install CLI
az aks install-cli
// connect to your cluster
az aks get-credentials --resource-group k8s-demo --name frontend-cluster
// get all the contexts
kubectl config get-contexts
// verify the current context
kubectl config current-context
// get the node
kubectl get nodes
Image for post
Image for post
Configure kubectl with AKS Cluster

Deploy Kubernetes Objects on Azure AKS Cluster

Now we have configured kubectl to use Azure AKS from our own machine. You need to integrate the container registry with the AKS. Let’s attach the container registry with the cluster with the following command. You can explore the docs here regarding this.

az aks update -n frontend-cluster -g k8s-demo --attach-acr angularnodejs

Let’s create deployment and service objects and use the image from the Azure container registry. Here is the manifest file which contains these objects.

manifest.yml

If you cloned the above example project and you are at the root folder just use this command to create objects kubectl create -f manifest.yml

Image for post
Image for post
K8s objects created

You can use the following commands to verify all the objects are in the desired state.

// list the deployment
kubectl get deploy
// list the pods
kubectl get po
// list the service
kubectl get svc
Image for post
Image for post
Kubernetes Objects Running on Azure AKS

Access the WebApp from the browser

We have created a service with the LoadBalancer type. You can get the external IP from the service and access the entire from the browser.

Image for post
Image for post
service

You can access the webapp with the following URL

http://13.88.87.226:3080
Image for post
Image for post
Accessing from the browser

Delete the Cluster

You can just delete the cluster or the resource group. I created a resource group just for this so I am deleting the resource group with the following command. Make sure you delete if you don’t want to incur charges.

az group delete --name k8s-demo

Summary

  • AKS is Microsoft Azure’s managed Kubernetes solution that lets you run and manage containerized applications in the cloud.

Conclusion

We have deployed a simple Angular application with Nodejs Backend on Azure AKS Cluster and access it from the browser. In future posts, we can see more advanced use cases.

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