If you are running an application on Kubernetes, you may want to expose a specific port to a pod so that you can access it outside world. Kubernetes provides several ways to do this and we are going to use one of the method.
Step 1: Let's create an HTML application
I am going to create an EMI calculator using HTML and Javascript and save it as index.html
<!DOCTYPE html>
<html>
<head>
<title>EMI Calculator</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
form {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 50px;
}
input[type="number"], select {
padding: 10px;
margin-bottom: 20px;
width: 300px;
border-radius: 5px;
border: none;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
input[type="submit"] {
padding: 10px;
width: 200px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #3e8e41;
}
</style>
</head>
<body>
<h1>EMI Calculator</h1>
<form onsubmit="calculateEMI(); return false;">
<label for="principal">Loan Amount:</label>
<input type="number" id="principal" name="principal"
placeholder="Enter loan amount in INR" required>
<label for="interest">Interest Rate:</label>
<input type="number" id="interest" name="interest"
placeholder="Enter interest rate in %" required>
<label for="tenure">Loan Tenure:</label>
<select id="tenure" name="tenure" required>
<option value="">--Select Loan Tenure--</option>
<option value="12">1 Year</option>
<option value="24">2 Years</option>
<option value="36">3 Years</option>
<option value="48">4 Years</option>
<option value="60">5 Years</option>
</select>
<input type="submit" value="Calculate EMI">
</form>
<div id="result"></div>
<script>
function calculateEMI() {
// Get input values
let principal = document.getElementById('principal').value;
let interest = document.getElementById('interest').value;
let tenure = document.getElementById('tenure').value;
// Calculate EMI
let monthlyInterest = interest / 1200; // 12 months * 100%
let monthlyPayment =
(principal * monthlyInterest) / (1 - (1 / Math.pow(1 + monthlyInterest, tenure)
));
let totalPayment = monthlyPayment * tenure;
// Display result
document.getElementById('result').innerHTML = `
<h2>EMI Calculation Result</h2>
<p>Loan Amount: INR ${principal}</p>
<p>Interest Rate: ${interest}%</p>
<p>Loan Tenure: ${tenure} months</p>
<p>Monthly EMI: INR ${monthlyPayment.toFixed(2)}</p>
<p>Total Payment: INR ${totalPayment.toFixed(2)}</p>
`;
}
</script>
</body>
</html>
Now your html application is ready.
Step 2: Dockerize your application
let's create a Dockerfile with below command inside it and name it Dockerfile in the same location.
FROM nginx:alpine
COPY index.html /usr/share/nginx/html/index.html
Here we are using nginx server where our index file/EMI calculator will be hosted.
Step 3: Build an image for your application
Use below command to build an image
docker build -t emi .
here -t is called as tag and emi is tag name.
. is current directory. So the docker build command will look for Dockerfile in current directory.
=> [internal] load build definition from Dockerfile
=> => transferring dockerfile: 201B
=> [internal] load .dockerignore
=> => transferring context: 2B
=> [internal] load metadata for docker.io/library/nginx:alpine
=> [internal] load build context
=> => transferring context: 79B
=> [1/2] FROM docker.io/library/nginx:alpine
=> CACHED [2/2] COPY index.html /usr/share/nginx/html/index.html
You would see output like this above.
Now if you check if the image has been created with below command.
docker images
You would see the tag name as emi in your result.
Step 4: Create a deployment
Since we have already created an image, now it's time to create a deployment using the same image.
apiVersion: v1
kind: Pod
metadata:
name: emi
namespace: default
spec:
containers:
- name: emi
image: emi:latest
imagePullPolicy: Never
restartPolicy: Never
save it as deployment.yaml
Now run the below command to create a deployment:
kubectl apply -f deployment.yaml
Once command is completed. Let's verify it by kubectl get pod command like below.
kubectl get pods
NAME READY STATUS RESTARTS AGE
emi 1/1 Running 0 7s
Step 5: Access it via browser
Since we have already created our application want to access it via browser. We may need to use port forwarder. It is for TCP connections only.
kubectl port-forward emi 8087:80
Once command has been completed. Let's access it via localhost:8087 in the browser.
Finally we have created an application, dockerized it and running it on a Pod and able to access via browser. That was it about the spinning up an application on Pod.
Note: If you think this helped you and you want to learn more stuff on devops, then I would recommend joining the Kodecloud devops course and go for the complete certification path by clicking this link
