In a previous post we have seen how we can deploy a Spring Boot application on a Kubernetes cluster. I have shared a step by step approach in that post where we start by creating a simple application, then create a docker image for the app and finally we create Kubernetes templates for deployment and deploy the app on our cluster created using minikube.
To make things easier we will be following the same steps but this time we will be deploying an Angular 6 application. To make things more practical, our frontend application will be calling our backend application which we have deployed in the old post. This is optional as our new angular application will also work if you do not have our backend service ready.
Prerequisite for this demo
- You have basic understanding of building apps in Angular
- You have docker installed on your system
- You have a running Kubernetes cluster
Lets start with the demo
Creating a sample angular application
BASIC LAYOUT: We will be creating models to get the response from the backend classes. Once models are done we will be creating a service to talk to the hostping API deployed on our Kubernetes cluster.(Refer this post). Once the service is ready we will create a small component to show the response of the service on screen.
Model Interface
export interface HostDetails {
hostname: string;
}import { HostDetails } from './host-details';
export interface PongMessage {
message: string;
host: HostDetails;
}Angular Service
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { PongMessage } from '../model/pong-message';
@Injectable({
providedIn: 'root'
})
export class HostpingService {
// URI of the backend service
endpoint = 'https://192.168.99.100/ping';
constructor(private http: HttpClient) { }
public getPongMessage() {
return this.http.get<PongMessage>(this.endpoint);
}
}Angular Component to call the above service
import { Component, OnInit } from '@angular/core';
import { HostpingService } from 'src/app/service/hostping.service';
import { PongMessage } from 'src/app/model/pong-message';
@Component({
selector: 'app-hostping',
templateUrl: './hostping.component.html',
styleUrls: ['./hostping.component.css']
})
export class HostpingComponent implements OnInit {
pongMessage: PongMessage = null;
constructor(private _hostpingService: HostpingService) { }
ngOnInit() {
this.getHostPing();
}
getHostPing() {
this._hostpingService.getPongMessage()
.subscribe((data: PongMessage) => this.pongMessage = data);
}
}Component .html file
<div *ngIf="pongMessage!=undefined">
<p>
hostping works! We are getting the response from the host : {{pongMessage.host.hostname}}
</p>
</div>
<div *ngIf="pongMessage==undefined">
<p>
Error! in communicating with the rest service
</p>
</div>Add the new component in your app.component
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
<h1>
Welcome to Kubernetes cluster tester!
</h1>
<app-hostping></app-hostping>
</div>Also ensure that the new component and service are added in your app.module.ts. I have added a snippet from the app.module.ts file to show where to add the hostping artefacts.
declarations: [
AppComponent,
HostpingComponent
],
imports: [
BrowserModule,
HttpClientModule
],
providers: [
HostpingService
],Once we have the code ready we can build this application using the below command. It will create a dist/ folder which we can then deploy on any web server for running our application.
ng build --prodCreating a docker image for your angular application
For deploying application on Kubernetes we will package our application as a docker container. For this create a docker file to use nginx base image and copy all our contents of dist folder in our image
FROM nginx:alpine
## Remove default nginx website
RUN rm -rf /usr/share/nginx/html/*
## From 'builder' stage copy over the artifacts in dist folder to default nginx public folder
COPY /dist/k8DemoFE/ /usr/share/nginx/html
CMD ["nginx", "-g", "daemon off;"]Build the docker image using the below command and push it to your docker registry. I am using my own docker registry but you should use your own account. In case you do not have one please create it at https://hub.docker.com. In case you do not want to develop the complete app, you can download the image which I have already created and is available on docker hub
docker build -f docker/Dockerfile -t pulgupta/hostping-fe:latest .
docker push pulgupta/hostping-feCreating Kubernetes artefacts for deploying the application
Please use the below templates for creating service, deployment and ingress.
Service: This service will be used to connect the pods of our application.
apiVersion: v1
kind: Service
metadata:
name: hostping-fe
labels:
run: hostping-fe
spec:
ports:
- port: 80
protocol: TCP
targetPort: 80
selector:
run: hostping-fe
type: NodePortDeployment: For creating replica set with pod details.
apiVersion: apps/v1
kind: Deployment
metadata:
name: hostping-fe
spec:
selector:
matchLabels:
run: hostping-fe
replicas: 2
template:
metadata:
labels:
run: hostping-fe
spec:
containers:
- name: hostping
image: pulgupta/hostping-fe
ports:
- containerPort: 80Ingress: This will expose our newly created service to external traffic.
apiVersion: extensions/v1beta1
kind: Ingress
metadata:
name: hostping-fe
spec:
rules:
- http:
paths:
- path: /
backend:
serviceName: hostping-fe
servicePort: 80We can now create all these artefacts in Kubernetes using the below command.
kubectl create -f k8.templatesValidating deployment
If the above command is successful we can now test our deployment. Execute “minikube ip” to get the IP address and enter the IP in your browser to open our angular application
If you have followed the steps correctly you will see the below page with the response from the backend service.
In case you have not followed our backend service post you should still see the web page correctly just that it will give a message highlighting that it cannot connect to the backend service.
Pulkit Gupta 