How to Deploy Angular App in Kubernetes ?

In the modern world of web development, Angular has become one of the most popular frameworks for building dynamic and responsive web applications. As the demand for scalability and reliability increases, deploying these applications in a containerized environment using Kubernetes has become a common practice.

What is an Angular Application?

An Angular application is a client-side web application framework based on TypeScript, developed and maintained by Google. It's used for building dynamic, single-page web applications (SPAs) with a rich user interface. Angular provides a comprehensive set of tools and features for front-end development, including data binding, dependency injection, routing, forms handling, and more.

What is a Docker image?

A Docker image is a lightweight, standalone, and executable package that contains everything needed to run a piece of software within a Docker container. It serves as the basis for creating Docker containers.

What is Kubernetes?

Kubernetes is an open-source container orchestration platform developed by Google, now maintained by the Cloud Native Computing Foundation (CNCF). It automates the deployment, scaling, and management of containerized applications.

What is Kubernetes Pod?

In Kubernetes, a Pod is the smallest and simplest unit of deployment. It represents a single instance of a running process in the cluster.

To know more about Kubernetes pod - Read.

What is Kubernetes Service?

In Kubernetes, a Service is an abstraction that defines a logical set of Pods and a policy by which to access them. It provides a consistent way to access and expose applications running on a Kubernetes cluster, regardless of their individual Pod IP addresses or underlying infrastructure changes.

In this article we will learn how we can containerize angular application and deploy it using Kubernetes.

To know more about Kubernetes Service - Read.

Creating an Sample Angular Application

We can use an existing angular application or create a new one, the process to deploy them is the same.

We will start from scratch and create a new application, to create a new one we need to have angular cli globally installed. If you haven't, you can start by using the below command.

npm install -g @angular/cli

After that, we can use the following command,

ng new sample-app
cd sample-app

This will create a directory sample-app and change the current working directory to sample-app.

Creating a Dockerfile For Angular Application

By defining a Dockerfile, we will be able to create a docker image for our application.

Create a new file name Dockerfile in the root directory of our angular application.

# Dockerfile

# Stage 1: Build Angular application
FROM node AS builder
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run build

# Stage 2: Serve Angular application using nginx
FROM nginx:alpine
COPY --from=builder /app/dist/fresh-app/browser /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

This image will build our application and serve it using nginx reverse proxy listening at port 80. To create an image from this, we can use the docker cli command,

docker build .

Creating a Kubernetes Pod For Angular Application

We will use declarative approach to create our pod for this create a new file in the root directory of our angular application named pod.yaml,

# pod.yaml

apiVersion: v1
kind: Pod
metadata:
  name: sample-angular-app
  labels:
    app: sample-angular-app
spec:
  containers:
  - name: sample-angular-app
    image: dvalley56/sample-angular-app
    resources:
      limits:
        memory: "128Mi"
        cpu: "500m"
    ports:
      - containerPort: 80

Note: The value for the image needs to be a repository URL, simplest way is to make your own repo in docker hub.

To create a pod from this definition file, we can use the command,

kubectl apply -f pod.yaml

This will create a new Kubernetes pod.

To make sure pod is created without any error, we can use the below command and verify it.

kubectl get pods -o wide

Create a Service to Expose Angular Application to the Internet

Newly created pods are not accessible outside their own node, in order to access it from elsewhere we need to define a service that will forward our request to our pod.

Create a new file service.yaml,

# service.yaml

apiVersion: v1
kind: Service
metadata:
  name: sample-angular-app-service
spec:
  selector:
    app: sample-angular-app
  ports:
  - port: 8080
    targetPort: 80
  type: LoadBalancer

Then to create a service from this definition we can use the command,

kubectl apply -f service.yaml

We can use the below command to verify if our service is running or not,

kubectl get services

Here, sample-angular-app-service is the service which we have created.Once our service is running we should be able to see our application at http://localhost:8080