Deploy Angular application on Kubernetes

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.