Deploy Angular application on Kubernetes

Saiprasad Tirumala — Wed, 26 Jan 2022 17:46:01 +0000

Prerequisites:
Nodejs Installed.
Docker Installed.
Kubernetes Installed.

Step 1: Create an angular application
Install angular CLI using below command



npm install -g @angular/cli

Below command helps you to create an Angular application.



ng new hello-world

Alternatively you can clone from my repository link

Now go inside the hello-world directory and run the local server using below command.



ng serve

By default application runs on port number 4200.You can test in your browser using this link

Step 2: Build the application in production environment
Run the below command which creates the dist folder in your root directory.



ng build --prod

Step 3: Create a DockerFile
We need to copy the files from dist folder to nginx path.



FROM nginx:alpine
COPY ./dist/hello-world ./usr/share/nginx/html

Step 4: Build the DockerFile
Navigate to the directory where you created the Dockerfile and enter the below command.



docker build -t angular/hello-world:v1 .

Once the build process is completed, You can check the docker images with below command.



docker ps -a

Step 5: Create a kubernetes Deployment Pod
You can get deployment file from my github repository link



kubectl apply -f deployment.yaml

Explanation for above YAML in short:

Sample template for Deployment file can be found in official site
apiVersion defines the version of kubernetes.
kind indicates the type if it is a Deployment, Service, Job etc.
metadata is the deployment name.
Under spec.template.spec.containers, we need to mention the name of the docker image. In this example, we haven't pushed Docker image to its registry. So we need to mention imagePullPolicy: Never. If it is not mentioned, kubernetes tries to pull the image from the docker registry.
containerPort tells in which port our deployment needs to run.

Step 6: Create a Service
You can get service file from my github repository link
Enter the below command to create a service pod.



kubectl apply -f service.yaml

Service pod helps in connecting to the application based on the deployment name mentioned under spec.selector.app

Verify the deployments



kubectl get all

Step 7: Final Step - Port Forwarding
This helps in forwarding our requests to our application



kubectl port-forward <service-name> <expose port no>:<service port num>

Now go to your browser and check by hitting (http://localhost:80). You should able to access your web application.

DEV Community: Saiprasad Tirumala