Basic Frontend Application with Docker and Kubernetes
You are developing a simple static website (HTML and CSS) for a company's landing page. The goal is to containerize this application using Docker, deploy it to a Kubernetes cluster, and access it through Nginx.
-
Create a new project directory:
mkdir my-landing-page cd my-landing-page -
Inside the directory, create an HTML file ('index.html') and a CSS file ('styles.css'):
-
index.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Company Landing Page</title> <link rel="stylesheet" href="styles.css"> </head> <body> <header> <h1>Welcome to Our Company</h1> </header> <main> <p>This is our landing page.</p> </main> <footer> <p>© 2024 Our Company</p> </footer> </body> </html>
-
styles.cssbody { font-family: Arial, sans-serif; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: space-between; height: 100vh; } header, footer { background-color: #333; color: white; text-align: center; padding: 1em 0; } main { flex-grow: 1; display: flex; justify-content: center; align-items: center; } p { font-size: 1.2em; }
-
- Initialize a Git and clone repository in your project directory:
git init git clone
- Add and commit your initial code to the Git repository:
git add . git commit -m "Initial commit with HTML and CSS files"
- Create a Dockerfile specifying Nginx as the base image:
Dockerfile
# Use the official NGINX base image
FROM nginx:latest
# Set the working directory in the container
WORKDIR /usr/share/nginx/html/
# Copy the local HTML file to the NGINX default public directory
COPY landingPage/* /usr/share/nginx/html/
# Expose port 80 to allow external access
EXPOSE 80
# No need for CMD as NGINX image comes with a default CMD to start the server
check if docker is installed
apt install docker.io
-
Log in to Docker Hub:
docker login
-
Build your Docker image:
docker build -t dockerfile .
- Push your Docker image to Docker Hub:
docker push your-dockerhub-username/frontend:latest
- Instal minikube in Docker:
This command refreshes the Debian-based system
sudo apt-get update
Download and Install minikube
curl -LO https://storage.googleapis.com/minikube/releases/latest/minikube_latest_amd64.deb
If that doesn't work use the command below
sudo dpkg -i minikube_latest_amd64.deb
Using the docker driver based on user configuration The "docker" driver should not be used with root privileges.
exit root user
return into working directory
cd /home/ubuntu/Landing-page/Containerization-and-Container-Orchestration
Add your user to the docker group:
sudo usermod -aG docker $USER
Apply the new group membership:
newgrp docker
Verify Docker version:
docker version
Start Minikube:
minikube start --driver=docker
verify
docker ps -a
use the command below to download the kubernetes commandline(kubectl) too to interact with kubernetes cluster
sudo snap install kubectl --classic
to verify
kubectl get nodes
-
Create a Kubernetes Deployment YAML file specifying the image and desired replicas:
deployment.yaml
apiVersion: apps/v1 kind: Deployment metadata: name: my-landing-page-deployment spec: replicas: 2 selector: matchLabels: app: my-landing-page template: metadata: labels: app: my-landing-page spec: containers:
- name: nginx
image: fumnanya92/frontend:latest
ports:
- containerPort: 80
- containerPort: 80
- Apply the deployment to your cluster:
kubectl apply -f deployment.yaml
-
Create a Kubernetes Service YAML file specifying the type as ClusterIP:
service.yaml
apiVersion: v1 kind: Service metadata: name: my-landing-page-service spec: selector: app: my-landing-page ports:
- protocol: TCP
port: 80
targetPort: 80
type: NodePort
- Apply the service to your cluster:
kubectl apply -f service.yaml
verify Deployment
kubectl get deployments
kubectl get services
-
Port-forward to the service to access the application locally:
kubectl port-forward service/my-landing-page-service 8080:80
docker run -p 8080:80 [dockerfile]
-
Open your browser and visit
http://Host-IP:8080to view your simple frontend application.