Deploy an Angular App To Kubernetes

Since long we hear the buzzwords, ‘container’, ‘containerized apps’.., etc. Many of you might be already aware what all these means but let’s start with the basics!

This is not a complete guide on how to deploy the app to Kubernetes Engine on GCP but a detailed steps are provided on creating a docker image and pushing it to the cloud. This assumes that creating the cluster, the load balancer, exposing it or creating repository etc. are already in place.

Container

A containerized application, or a “container”, is a software package that contains all the necessary code, libraries, and dependencies to run an application in a self-contained and isolated environment.

Containerization technology, such as Docker, provides a way to package an application and its dependencies into a single unit that can run consistently across different computing environments, such as a developer’s laptop, a test environment, or a production server. Containerized applications are often deployed and managed using container orchestration platforms, such as Kubernetes or Docker Swarm, which provide additional tools for managing and scaling applications across multiple containers or nodes.

Docker and Kubernetes Engine

Docker is again a platform that allows us to develop, package, and deploy applications using containerization technology. Kubernetes Engine is a managed service offered by Google Cloud Platform (GCP) that allows users to deploy and manage containerized applications on a Kubernetes cluster.

High Level Steps to Deploy to Kubernetes Engine

At a high-level, we will see how we can deploy an app to Kubernets Engine. The DevOps Engineers would definitely help us (app developers) do it in an efficient and faster way, but it’s always good to know more about it and learn!

• Create a Kubernetes cluster: To use Kubernetes to deploy and manage containerized application, we need to create a Kubernetes cluster (group of nodes) on GCP using Kubernetes Engine.
• Create a deployment: Once we have a Kubernetes cluster, we can create a deployment that specifies how many instances of your application should be running, what container image to use, and other settings. Below, we will see in detail how to achieve this using a Docker Image and deploy to Kubernetes Engine.
• Expose the deployment: To make the application accessible to users, we need to expose it using a Kubernetes Service. The service provides a stable IP address and DNS name that users can use to access your application.
• Configure load balancing: To ensure that the traffic is distributed evenly across all instances.
• Monitor and scale application: Once the application is deployed, we can use various monitoring and logging tools on GCP.

Steps to deploy a containerized Angular application using docker into Kubernetes

Let’s see how we can deploy a containerized Angular application using docker into Kubernetes.

1. Install Docker

The first and foremost step is to create a Docker image or a container.

For this, you need to install Docker on your machine and on windows its recommended to install WSL2 (WSL 2 is a new version of the Windows Subsystem for Linux architecture that powers the Windows Subsystem for Linux to run ELF64 Linux binaries on Windows.). Install Docker Desktop, if you like the Docker Desktop.

You can follow the instructions and also benefits, WSL2 and other options etc. here.

2. Build a Docker Image

This assumes you have a Dockerfile already in place in your app’s root directory.

docker build -t myUIApp .

The command “docker build -t myUIApp” initiates a Docker build process for a Docker file

in the current directory, and assigns the resulting image the name “myUIApp”. This command assumes that there is a Docker file present in the current directory and that the build context includes all necessary files and dependencies required to build the image. The ‘.’(dot) refers to the current directory. Else you will get an error, “Docker build Requires 1 Argument” and you can learn different issues and solutions related to the Docker build command from here.

3. Run, test on local browser and Stop

Ensure your docker image works as expected by running it on your local browser with the following command to run and stop and it runs on port 80 by default as we have mentioned 80:80

docker run -d -p 80:80 myUIApp
http://localhost:80/
docker stop myUIApp

4. Authenticate Registry and Credentials

In order to deploy this container to GCP Kubernetes (to the registry, a service provided by Google Cloud Platform. It allows users to store and manage Docker container images in a secure, scalable manner), we need to set up the Docker client to authenticate using your Google Cloud credentials.

gcloud auth configure-asia-south1-docker.pkg.dev

This command sets up the Docker client to authenticate using our Google Cloud credentials, with the registry in Asia South region.

5. Tag the image

In order to push a Docker image to a registry, we need to first tag the image with the desired repository name and version.

docker tag myUIApp:v01 asia-south1-docker.pkg.dev/my-project-nameOrID/myProjectRepoName/appName

The above command is used to create a new tag for an existing Docker image, assigning it a new name and registry location.

6. Push the image to the cloud

After the image has been tagged, we would then use the “docker push” command to push the image to the registry.

docker push asia-south1-docker.pkg.dev/my-project-nameOrID/myProjectRepoName/appName

It would push the Docker image with the specified tag to the registry located at “asia-south1-docker.pkg.dev”, under the repository name “my-project-nameOrID/myProjectRepoName/appName”.

7. Create a deployment

Now, if you login to GCP and check on Kubernetes Engine, the configuration can be made to deploy and run your app. (assuming you have already created your Kubernetes cluster, assigned a project ID etc. to this deployment on GCP). We can specify how many instances of our application should be running, what container image to use, and other settings, using a YAML file or the kubectl command-line tool.

apiVersion: v1

kind: Service

metadata:

  name: my-ui-app

spec:

  type: LoadBalancer

  selector:

    app: my-ui-app

  ports:

    - protocol: TCP

      port: 80

      targetPort: 8080

• Above configuration file (yaml) creates a Kubernetes service named “my-ui-app” (assuming our appName  is my-ui-app in this case), of type Load Balancer.
• The service selects the pods with the label “app: my-ui-app” to expose as the backend for the service.
• The port section specifies that the service should listen on port 80 and forward traffic to port 8080 on the backend pods.

Notes

:

• A pod represents a single instance of a running process in a Kubernetes cluster, which can consist of one or more containers that share the same network namespace and storage volumes.
• Each pod in a Kubernetes cluster is assigned a unique IP address, and can be accessed by other pods or external users through this IP address.
• Pods are managed by the Kubernetes API server, which schedules them to run on a node in the cluster and monitors their status
• Also, note that this is not a complete guide on how to deploy the app to Kubernetes Engine on GCP but a detailed steps are provided on creating a docker image and pushing it to the cloud, assuming that creating the cluster, the load balancer, exposing it or creating repository etc. are already in place.
• This is more from a developer’s perspective, who works with DevOps Engineers (or SME’s) to achieve the complete deployment.

Hope this helps some of the newbie developers out there on taking steps towards Cloud and Deployment options. Share your thoughts and challenges or lessons learnt during your app deployment to GCP Kubernetes or any other Cloud Environment!