Deploy Angular application on Kubernetes
Tags: angular, kubernetes, docker, javascript
Published: 2022-01-26 17:46:01

 **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](https://github.com/saiprasad2595/angular-kubernetes)

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](http://localhost:4200)

**Step 2: Build the application in production environment**
Run the below command which creates the dist folder in your root directory.
```
ng build --prod
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1481tpat6x3kmp2ez7xc.png)
 
**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 .
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4maz5n5hdmrgl628t578.png)
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](https://github.com/saiprasad2595/angular-kubernetes/blob/master/deployment.yaml)

```
kubectl apply -f deployment.yaml
```
![deployment.yaml](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g5cvx60riyhtdcyyq29z.png)
 
 
Explanation for above YAML in short:

- Sample template for Deployment file can be found in official [site](https://kubernetes.io/docs/concepts/workloads/controllers/deployment/)
- 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](https://github.com/saiprasad2595/angular-kubernetes/blob/master/service.yaml)
Enter the below command to create a service pod.
```
kubectl apply -f service.yaml
```
![service.yaml](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3etb7mb47tp454t6ypgl.png)
 
Service pod helps in connecting to the application based on the  deployment name mentioned under spec.selector.app

**Verify the deployments**
```
kubectl get all
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k88jby5485wrpfqpeclw.png)

**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>
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/haiezs5stgiexolv0hzi.png)
Now go to your browser and check by hitting (http://localhost:80). You should able to access your web application.