Deploying a Simple HTML Page on Google Kubernetes Engine (GKE)

Prerequisites

List the prerequisites for readers, including:

A Google Cloud Platform (GCP) account.
Google Cloud SDK installed.
Basic knowledge of Docker.
Familiarity with Kubernetes concepts.

Step 1: Create a Simple HTML Page

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello Name Website</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
        }

        .container {
            text-align: center;
        }

        h1 {
            color: #333;
        }

        input {
            padding: 5px;
            margin: 10px;
        }

        button {
            padding: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }

        button:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>

<div class="container">
    <h1 id="greeting">Hello <span id="name">Name</span></h1>
    <input type="text" id="nameInput" placeholder="Enter your name">
    <button onclick="updateGreeting()">Update Greeting</button>
</div>

<script>
    function updateGreeting() {
        var nameInput = document.getElementById("nameInput");
        var name = nameInput.value;

        if (name.trim() === "") {
            name = "Name";
        }

        var greetingElement = document.getElementById("greeting");
        var nameElement = document.getElementById("name");

        greetingElement.textContent = "Hello " + name;
        nameElement.textContent = name;

        // Clear the input field
        nameInput.value = "";
    }
</script>
</body>
</html>

Step 2: Dockerize the HTML Page

Create a Dockerfile in the project directory and write the Dockerfile to package the HTML page into a Docker image.

 # Use a lightweight base image with Nginx
 FROM nginx:alpine
 # Copy the HTML content to the web root directory
 COPY index.html /usr/share/nginx/html/index.html
 # Expose port 80 for web traffic
 EXPOSE 80
 # Start the Nginx web server
 CMD ["nginx", "-g", "daemon off;"]

Build the Docker image using docker build -t my-hello-website .
```
 docker build -t my-hello-website .
```
Verify the image using docker run -p 8080:80 my-hello-website
```
 docker run -p 8080:80 my-hello-website
```

Accessing the container localhost:8080 in a browser.

Step 3: Push the Docker Image to Container Registry

Tag the Docker image for Google Artifact Registry (AR)

 docker tag my-hello-website gcr.io/[PROJECT_ID]/hello-website
 # docker tag my-hello-website gcr.io/stoked-castle-409104/my-hello-website

To prepare for pushing a Docker image to Artifact Registry, follow these steps:
Use the Google Cloud SDK (gcloud) to log in.

Download a key file from the specified link to enable secure access and follow the below steps.

 # To configure authentication with user credentials, run the following command
 gcloud auth login
 # To configure authentication with service account credentials, run the following command
 gcloud auth activate-service-account [PROJECT-ID] --key-file=[KEY-FILE]
 # gcloud auth activate-service-account 458800713926-compute@developer.gserviceaccount.com --key-file=stoked-castle-409104-cea21308eeb8.json
 # Configure Docker with the following command
 gcloud auth configure-docker

Push the image to GCR using docker push gcr.io/[PROJECT-ID]/my-hello-website.

 docker push gcr.io/[PROJECT-ID]/my-hello-website
 # docker push gcr.io/stoked-castle-409104/my-hello-website

Step 4: Create a GKE Cluster

Use the Google Cloud SDK to create a GKE cluster:

 gcloud container clusters create [Cluster Name] --num-nodes=n
 # gcloud container clusters create my-html-website --num-nodes=1
 # NAME             LOCATION  MASTER_VERSION  MASTER_IP      MACHINE_TYPE  NODE_VERSION    NUM_NODES  STATUS
 # my-html-website  us-east1  1.27.3-gke.100  35.227.54.174  e2-medium     1.27.3-gke.100  3          RUNNING

Verify the cluster using kubectl get nodes or gcloud container clusters get-credentials my-html-website.

 gcloud container clusters get-credentials my-html-website
 # This command configures the kubectl to use the cluster you created

Step 5: Create a Kubernetes Deployment

Write a Kubernetes Deployment YAML file (deployment.yaml) to deploy the HTML page.

 apiVersion: apps/v1
 kind: Deployment
 metadata:
   name: my-hello-website-deployment
 spec:
   replicas: 3
   selector:
     matchLabels:
       app: my-hello-website 
   template:
     metadata:
       labels:
         app: my-hello-website # keeps this name same
     spec:
       containers:
       - name: my-html-container
         image: gcr.io/stoked-castle-409104/my-hello-website
         ports:
         - containerPort: 80

Apply the deployment using kubectl apply -f deployment.yaml.

 kubectl apply -f deployment.yaml
 # deployment.apps/my-hello-website-deployment created

Verify the deployment using kubectl get deployment.

 kubectl get deployment my-hello-website-deployment
 # NAME                          READY   UP-TO-DATE   AVAILABLE   AGE
 # my-hello-website-deployment   3/3     3            3           71s

Step 6: Expose the Deployment with a Service

Write a Kubernetes Service YAML file (service.yaml) to expose the deployment.

 apiVersion: v1
 kind: Service
 metadata:
   name: my-html-service
 spec:
   selector:
     app: my-hello-website # keeps this name same
   ports:
     - protocol: TCP
       port: 80
       targetPort: 80
   type: LoadBalancer

Apply the service using kubectl apply -f service.yaml.

 kubectl apply -f service.yaml
 # service/my-html-service created

Verify the service and external IP using kubectl get service.

 kubectl get service my-html-service
 # NAME              TYPE           CLUSTER-IP   EXTERNAL-IP     PORT(S)        AGE
 # my-html-service   LoadBalancer   10.0.3.233   35.196.200.202   80:30029/TCP   10m

Step 7: Access the Deployed HTML Page

Open a web browser and access the external IP assigned to the service.

 http:<external-ip>:<port number>
 # http://35.196.200.202:8080

Step 8: Delete Everything Clusters, Nodes, Deployments and Services

 kubectl delete service my-html-service
 # deployment.apps "my-hello-website-deployment" deleted
 kubectl delete service my-html-service
 # service "my-html-service" deleted
 gcloud container clusters delete my-html-website --zone=[Zone]
 # The following clusters will be deleted.
  # - [my-html-website] in [us-east1]
 # Do you want to continue (Y/n)?  Y
 # Deleting cluster my-html-website...done.                                                                                                                                                     
 # Deleted [https://container.googleapis.com/v1/projects/stoked-castle-409104/zones/us-east1/clusters/my-html-website].

Conclusion:

In conclusion, the utilization of Docker and Kubernetes for deploying a simple HTML page on GKE showcases the power of containerization and orchestration in modern cloud environments. Docker ensures consistency and portability, while Kubernetes simplifies deployment and management, offering scalability, efficiency, and automated operations. This approach represents a paradigm shift in application deployment, emphasizing the importance of cloud-native technologies for streamlined, resilient, and efficient practices in the cloud.

Deploying a Simple HTML Page on Google Kubernetes Engine (GKE) - Step-by-Step Guide

Table of contents