Build and Deploy an Angular, Node.js, PostgresQL and Microservices App on Azure Kubernetes

All in one. Learn everything in this tutorial from scratch.

What you will learn in this tutorial

1. Microservices
2. Angular
3. NodeJs
4. PostgresQL
5. Kubernetes
6. Azure Cloud

Pre-requisites for this tutorial

You need to have these software installed on your system before get started with this tutorial.

1. Node.js (Latest version)
2. Angular Cli (Latest version)
3. Docker
4. VS Code (You can choose any Editor you like)
5. Postgres Database— PgAdmin GUI

Let’s start!

Node.js API (with Postgresql)

I will create simple backend in Node.js using Express.

For this tutorial, I will use VSCode but you can use any editor or IDE you like.

I have opened a folder named “tutorial” and create package.json by running the following command in the integrated terminal and it will generate file name package.json and package.lock.json.

npm init -y

Your package.json file will look like below:

I will install some packages for our backend. I will use sequelize Object Relational Mapper (ORM).

Run below command for installing all the required packages.

Write script for nodemon for running the server with nodemon in package.json file under scripts tag.

Backend application folder structure would look like this. You can create different folders with these names. I have created controller, models, routes folder. You can ignore server.js and .gitignore right now. We will add these file later below.

Now, let’s start creating customer.js model file in models folder.

I will create index.js file in models folder for database access and import customer.js file. This will be single unit of work.

Now I am going to add customer.controller.js file in controller folder.

Using express router, let’s define different routes for customer, We’ll create customer.routes.js file in routes folder and all the CRUD operations.

Last but not least, server.js.

Hurrrrrrraaaayyyy! The backend CRUD is complete. You can access complete source code from below github link.

MuhammadEhtesh/medium_nodejs_backend

Angular

Angular application provide single page application. Single page application give us great user experience, very reactive application and it feels like mobile application.

For creating angular application, You need angular cli. You can install angular cli from https://cli.angular.io/ . Angular cli gives us the ability to create new application. We can create new angular application by running “ng new angular-app” in any directory. Angular cli will ask couple of questions, you can simply provide yes to all the questions and it will generate application with the name you provided as i have provided angular-app in the above command.

I will install few packages that i need using npm package manager. I will use Angular Material for UI components. You can install material UI simply by running ng add @angular/material . You can also visit https://material.angular.io/ for more information about angular material.

I will simply remove everything in app.component.html file and add simple Create, Read, Update, Delete functionality in app component.

Expected frontend app

We will start with app.component.ts and it will be as follows.

app.component.html would be as follows.

app.component.ts should be as follows.

app.module.ts

This form simply save name and email to database. Complete Create, Read, Update and Delete View looks like below.

This is the simple application. You can access complete source code from below github link.

MuhammadEhtesh/medium_angular_frontend

Microservices

For microservices, we make use of Docker.

What is Docker?

Docker provides the ability to package and run an application in a loosely isolated environment called a container. Container is linux based small size virtual machine that isolate your application and all the dependencies. The isolation and security allow you to run many containers simultaneously on a given host. You can even run Docker containers within host machines that are actually virtual machines!

What are Microservices?

Microservices — also known as the microservice architecture — is an architectural style that structures an application as a collection of services that are

• Highly maintainable and testable
• Loosely coupled
• Independently deployable
• Organized around business capabilities
• Owned by a small team

The microservice architecture enables the rapid, frequent and reliable delivery of large, complex applications. It also enables an organization to evolve its technology stack.

For Micro-services, We need Dockerfile for any application or we can get base image from Docker Registry. We create image from that Dockerfile and run container from that image as in below diagram.

Dockerfile for Angular application

You need to add .dockerignore file as well. So that docker can ignore these extra files while creating an image.

We also need nginx file for running application inside container.

Let’s build an image from Dockerfile. You need to run below command. It will create image with the name ”app”.

docker build -t app .

you will see something like this. It will get base image from docker registry.

Once you done with image build. You can run container from that image using below command.

docker run -d -p 4200:80 app

Now you are good to go. You can check you created image and container in VS Code. You can click on the Docker icon in VS Code as in below image.

As you can see, we have app image under images and app container under containers. You can open that container by right click on that container just like below.

You’ll see the same application running in the browser.

Dockerfile for NodeJs application

Dockerfile for nodejs application is quite simple but i need postgresql database container as well. To make this simple i will also create docker-compose.yml file. When we want to run multiple containers simultaneously then we can write yml file for that. It help to run all the container with single command.

Let’s add docker-compose.yml file in the same root directory as Dockerfile. Don’t forget to add .dockerignore file for this project. You can use same .dockerignore file that was used in angular project.

You can see Dockerfile and docker-compose.yml file below

You can build nodejs project image and you will get postgres image from docker registry. You need to run the below command in-order to run docker-compose.yml file. docker-compose file will bring both container up and running. docker-compose file is used when we need to run more than 1 container at a time.

docker-compose up

You will see docker will download the base images and build nodejs image. You can ignore any warning.

You can see your nodejs, postgres and angular images and running containers in the vscode sidebar as in below snapshot.

You can open running containers by simply visiting http://localhost:4200/ and you can also visit http://localhost:3000/

So far we are successful with containers creation. We will deploy these container to AWS in few more step.

Microservice Deployment

For microservices deployment there are some pre-requisites. Please make sure before starting this section, you should have these.

1. Microsoft Azure Account — You can sign up for microsoft azure account https://azure.microsoft.com/en-us/free/. You also sign up as student if you have your educational email. I will use student account in this tutorial which is enough for this tutorial.
2. Docker Account — You can create an account on Docker hub using the following link. https://hub.docker.com/signup
3. Azure Cli — You can install azure cli using following link https://docs.microsoft.com/en-us/cli/azure/install-azure-cli
4. Kubectl — You can install kubectl using following link https://kubernetes.io/docs/tasks/tools/install-kubectl/

Let’s get our hands dirty with Micro-services 😎.

First thing you need is Kubernetes Cluster.

What is Kubernetes?

Kubernetes, also known as K8s, is an open-source system for automating deployment, scaling, and management of containerized applications.

What is Kubernetes Cluster?

A Kubernetes cluster is a set of nodes that run containerized applications. Containerizing applications packages an app with its dependences and some necessary services. … Kubernetes clusters allow containers to run across multiple machines and environments: virtual, physical, cloud-based, and on-premises.

Login to you Azure account and go to kubernetes services. You can also follow official tutorial for creating cluster and resource group https://docs.microsoft.com/en-us/azure/aks/tutorial-kubernetes-prepare-app or you can follow me as well.

I will user resource group name “postgres” and cluster name “postgres” as i have already created those.

Let’s work on azure kubernetes setting, Let’s install kubectl if you haven’t already. You can run below command to install kubectl.

az aks install-cli

kubernetes cluster login required in-order to start working with kubernetes cluster and deployments.

Kubernetes has different components:

1. Deployments
2. Services
3. ConfigMap
4. Secrets
5. Ingress
6. StatefulSet
7. Volumes
8. Pod

Deployments:

We write deployments for our microservice. Deployments are the definition of our application that will run inside kubernetes Node. Basically it will be a Pod definition.

Services:

We write services that work as a Load Balancer and route our api calls to different pod. We do not interact with deployment/Pod directly, we write services for interaction with deployment.

You can read more about it on kubernetes official website.

Postgres Deployment

Let’s get to the point and start implementing. I will create deployment file for Postgres in my tutorial Node.js application. I will write deployment and service definition in same file but as i mentioned secret component which is used for secret keys. As we do not expose our secret key in deployment file.

First we need to write postgres-secrect.yaml file for our secret key. We write our secret keys in base64 format in secret file. Postgres image only requires o root password and i will only give password. As I’m using Mac so it looks like for me.

echo -n ‘anykey’ | base64

Postgres-deployment.yaml file will look like below. Put this file in same folder.

Note: We use persistent volume component for production databases but that will create complexity. If this Pod crash or die for any reason then it will loose all the data. I will have this tutorial simpler enough, so beginner can also learn with this.

We can deploy this deployment definition using simple command. Go to same directory and run below command in terminal. It will pull the image from Docker Hub and create container from that image.

kubectl apply -f postgres-deployment.yaml

You will look something like this after running this command.

muhammads-air:tutorial Shani$ kubectl apply -f postgres-deployment.yaml

deployment.apps/postgres-deployment created

service/postgres-service created

Node.js App Deployment

Nodejs application required image so we need to push the local image to Docker hub. You can build the image and tag image with repository name

So now i have built the image let tag this image with repository name and push to docker hub.

We need deployment file for Nodejs application as well named nodejs.yaml , It will look like below.

Now run the following command to create deployment.

kubectl apply -f nodejs.yaml

You will see app gets created.

muhammads-air:tutorial Shani$ kubectl apply -f nodejs-deployment.yaml

deployment.apps/nodeapp created

service/nodeapp-service created

Now you can get all the running service in azure cluster as well as through terminal as well. You can open the running file using External IP.

You can see below it look like below. Database is empty as of yet, but you can make some post request to populate the database using this IP address.

Angular App Deployment

In angular application, i will replace http://localhost:3000/ URL with Node.js microservice External API. We should write a separate service for that but i will use URL and work with that for simplicity.

For angular application, we have already wrote docker file. We will build image from that Dockerfile and push to Docker hub as i have created below.

We need to write kubernetes deployment and kubernetes service for angular application. I will write both in same file named angular-deployment.yaml as below.

We can apply this file to get our angular application running.

Now you can check your kubernetes cluster and you will see an application named angular-app.

As you can see 2 External IP addresses.

You can open angular-app and it will look like this. You can open an application using the IP address as below.

Congratulation!!!!!! We are successful in Micro-services. 😎 Please leave a feedback or if you stuck anywhere i’ll be glad to help you with. You can access the complete form below repositories.

MuhammadEhtesh/medium_angular_frontend

MuhammadEhtesh/medium_nodejs_backend