Post
Ask Question

Containerization Of Angular Application Using Kubernetes And Docker

Build Angular Application using Kubernetes and Docker

In this post, I'll show you how to build the Angular Application step-by-step and then enable Docker in that, and after creating images, run that into the Kubernetes.

Prerequisites

  1. Basic Understanding of Cloud.
  2. Basic Understanding of Docker.

For that you can read my blogs related to docker and kubernetes to understand things easily

Open the Visual Studio Code

1. Create the new Directory at a particular location

mkdir WebAPP

2. Go inside the WebAPP Directory

cd .\WebAPP\

3. Install the Angular CLI inside that.

npm install -g @angular/cli

4. After Installing Angular CLI, Create the new Angular Project.

ng new WebApp

5. Later on go inside your newly created app and run your Angular Application.

ng serve

Here you will see your application is in the running mode now

Now we are going to run this application on Docker. So for that

First, we need to create the Dockerfile in the Root Directory of our Angular Application without any extension specified to it.

So here see, I used node alpine image to run our application inside the Docker Container and set the app directory as the default working docker directory, then copy package.json into that directory from the local machine. After that run, the npm install command installs the required packages and dependencies of our angular application. Later on, copy the content of the app directory and then execute npn run command to build our application as on the production environment, Then we Nginx server image to run our application in docker container and manage the things like routing, reverse proxy, and load balancing.

Now we create the .dockerignore file to exclude some data while building our image using the docker file.

Now we are going to create a docker image of our application which we are going to run in the docker container. So for that.

2. Open the command prompt and run the following command

ng serve build –prod

this will generate the dist folder which is used when we deploying our application in the production environment.

3. Build the docker image.

docker build -t web-app .

here we mentioned the docker image name “webapp” and then put a dot next to that which means the current directory of our application.

4. Finally now we are going to run our image in the docker container

docker run — publish 4200:80 — name webappcontainer web-app

here we can set the default container port as 80 and the application port as 4200 and then mentioned the container name and image name next to that.

Here you can see how your application is running under the docker container.

Kubernetes

  • Kubernetes is the Container Management Orchestration Tool which is developed by Google for managing their own microservices across the different clusters.
  • Kubernetes also called K8s, basically is Numeronym Standard which is used since the 1980s. For Example, In the K8s there are 8 words in between K and S like that.
  • Google developed an internal system called Borg and later on, named Omega which they use to Orchestrate the Data Center.
  • In 2014, Google introduced Kubernetes as an Open Source and it is written in Golang language. Later on, donated to CNCF.
  • Kubernetes is a tool that automates container deployment, load balancing, and auto-scaling. It will manage all the containers which are running in different environments.

Now we are going to run this application on Kubernetes, for that we are going to enable Kubernetes in Docker Desktop as shown in below

Later on, we create on Manifest File. Basically, it is used for configuration and it may be type of YML and JSON, in that we mentioned settings related to different objects and how that will be interconnected with each other. There are different things which are present inside the Manifest File like No of Pods, Services, Deployment and Ingress Controller related things, which all are used to run the application.

apiVersion: apps/v1
kind: Deployment
metadata:
  name: webapp
  labels:
    app: product-app
spec:
  replicas: 2
  selector:
    matchLabels:
      service: webapp
  template:
    metadata:
      labels:
        app: product-app
        service: webapp
    spec:
      containers:
        - name: webappcontainer
          image: webapp:v1
          ports:
            - containerPort: 80
              protocol: TCP
          env:
            - name: API_LINK
              value: http://localhost:30991
---
apiVersion: v1
kind: Service
metadata:
  name: webappservice
  labels:
    app: product-app
    service: webapp
spec:
  type: NodePort
  ports:
    - port: 8080
      targetPort : 80
      protocol: TCP
  selector:
    service: webapp

So here, we mentioned deployment and service section in the manifest file and configure the things related to pods, services, port and docker image and container.

Also, one thing I want to mentioned here

 env:
            - name: API_LINK
              value: http://localhost:30991

This section is present in the YML file and which is used to set backend application API URL to fetch the data for that you see my following blog related to that how dynamically we set API URL, ignore and remove this section if you just wanna run simple angular application.

Dynamic Configuration Of Angular API URL Using Docker Compose YML File

Next, we are going to apply Manifest YAML File using kubectl Kubernetes

kubectl apply -f manifest.yml

Here you will see our service is running on Port 30293 and now we are able to access that using URL http://localhost:30293/

If you want more details about pods, services, endpoints, deployments, Kubernetes context then you can use following commands

There are also many commands which are present and use to scale container and something like that, that you are able to use as per your project requirement.

So, this is all about containerization of Angular Application using Docker and Kubernetes.

I hope you understand the things related to docker.

Happy Coding!

If you want to explore more about Docker and Kubernetes, then please visit my following blogs related to that.
Next Recommended Reading Setting Up Your First Project In Angular 7 Using Angular CLI