DEV Community

Cover image for Chat App Deploy on Kubernetes Using Kind, Metallb and Ingress
syed kamruzzaman
syed kamruzzaman

Posted on

Chat App Deploy on Kubernetes Using Kind, Metallb and Ingress

#kubernetes #javascript #node #devops

This guide provides step-by-step instructions for deploying a full-stack chat application on Kubernetes using Kind, Metallb, and Ingress. It is designed to help developers set up a robust Kubernetes cluster for hosting containerized applications on a virtual private server (VPS).

The deployment includes setting up essential Kubernetes tools, configuring a load balancer, integrating SSL for secure communication, and deploying both the frontend and backend services. Additionally, optional sections cover monitoring the application with Prometheus and Grafana for enhanced observability and performance tracking.

Whether you are deploying a chat application for production or exploring Kubernetes capabilities, this guide will serve as a comprehensive roadmap to get your application up and running efficiently.

🚀 Getting Started For k8s

Below table helps you to navigate to the particular tool installation section fast.

Tech stack Installation
Docker Install and configure Docker
Kind & Kubectl Install and configure Kind & Kubectl
Metallb Install Metallb
Ingress Install and configure Ingress
Helm Helm Install and configure
SSL Certificate Install and configure Cert Manager
Project Deploy Project Deploy and Others
Monitoring Namespace Create for Groping Prometheus and grafana and Other
Prometheus Install and configure Prometheus
Grafana Install and configure Grafana

📢 Pre-requisites to implement this project:

[!Note]
vps minimum need

  • RAM - 4GB
  • CPU - 2 Core(s)
  • Storage - 20 GB
  • One Domain

🐳 Docker Install and configure 

sudo apt-get update

sudo apt-get install docker.io -y
sudo usermod -aG docker $USER && newgrp docker
Enter fullscreen mode Exit fullscreen mode

📦 Kind & Kubectl Install and configure

Install KIND and kubectl using the provided script. Create kind_kubectl_config.yaml file:


#!/bin/bash

# For AMD64 / x86_64
[ $(uname -m) = x86_64 ] && curl -Lo ./kind https://kind.sigs.k8s.io/dl/v0.26.0/kind-linux-amd64
chmod +x ./kind
sudo cp ./kind /usr/local/bin/kind

VERSION="v1.31.0"
URL="https://dl.k8s.io/release/${VERSION}/bin/linux/amd64/kubectl"
INSTALL_DIR="/usr/local/bin"

curl -LO "$URL"
chmod +x kubectl
sudo mv kubectl $INSTALL_DIR/
kubectl version --client

rm -f kubectl
rm -rf kind

echo "kind & kubectl installation complete."
Enter fullscreen mode Exit fullscreen mode 
./kind_kubectl_config.yaml
Enter fullscreen mode Exit fullscreen mode

[!Note]
If your Vps ARM64 then use this [ $(uname -m) = x86_64 ] && curl -Lo ./kind https://kind.sigs.k8s.io/dl/v0.26.0/kind-linux-amd64
Run this script and it cerate kubectl and kind environment.
Kind Install More Information

🛠️ Setting Up the KIND Cluster

Create a kind-cluster-config.yaml file: 

kind: Cluster
apiVersion: kind.x-k8s.io/v1alpha4

nodes:
- role: control-plane
  image: kindest/node:v1.31.2
- role: worker
  image: kindest/node:v1.31.2
- role: worker
  image: kindest/node:v1.31.2
  extraPortMappings:
  - containerPort: 80
    hostPort: 80
    protocol: TCP
  - containerPort: 443
    hostPort: 443
    protocol: TCP
Enter fullscreen mode Exit fullscreen mode

Create the cluster using the configuration file:

kind create cluster --config kind-cluster-config.yaml --name my-kind-cluster
Enter fullscreen mode Exit fullscreen mode

Verify the cluster:

kubectl get nodes
kubectl cluster-info
Enter fullscreen mode Exit fullscreen mode

[!Note]
Here i add extraPortMappings for running Ingress

Image description

🍏 Metallb Install

[!Note]
I am using Metallb for use LoadBalance. Suppose you are using Aws/Azure/DigitalOcean ect whose provide kubernates loadBalance facility then doesn't need Metallb. Here I buy VPS from a local company. They give one IP address to access VPS.

kubectl apply -f https://raw.githubusercontent.com/metallb/metallb/v0.14.9/config/manifests/metallb-frr.yaml
Enter fullscreen mode Exit fullscreen mode

Check Metallb configuration

kubectl get all -n metallb-system
Enter fullscreen mode Exit fullscreen mode

Image description

🛠️ Create a metallb_config.yaml file: 

apiVersion: metallb.io/v1beta1
kind: IPAddressPool
metadata:
  name: first-pool
  namespace: metallb-system
spec:
  addresses:
  - 160.191.163.33-160.191.163.33
Enter fullscreen mode Exit fullscreen mode

apply metallb_config.yaml file

kubectl apply -f metallb_config.yaml
Enter fullscreen mode Exit fullscreen mode

[!Note]
MY VPS IP address is 160.191.163.33. Change this IP as your require

♻️ Ingress Install and configure

kubectl apply -f https://kind.sigs.k8s.io/examples/ingress/deploy-ingress-nginx.yaml
Enter fullscreen mode Exit fullscreen mode

Image description

[!Note]
Here service/ingress-nginx-controller show EXTERNAL-IP is your VPS IP. My VPS IP is 160.191.163.33. It ensure that Our Metallb LoadBalance wroking.

🧊 Helm Install and configure

curl -fsSL -o get_helm.sh https://raw.githubusercontent.com/helm/helm/main/scripts/get-helm-3
chmod 700 get_helm.sh

./get_helm.sh
Enter fullscreen mode Exit fullscreen mode

Check Helm Version

helm version
Enter fullscreen mode Exit fullscreen mode

Image description

🔒🌐 Install and configure Cert Manager || SSL Certificate

helm repo add jetstack https://charts.jetstack.io --force-update
helm repo update
Enter fullscreen mode Exit fullscreen mode

Installing cert-manager CRDs

helm install cert-manager --namespace cert-manager --version v1.16.2 jetstack/cert-manager
Enter fullscreen mode Exit fullscreen mode

https://artifacthub.io/packages/helm/cert-manager/cert-manager

Image description

📚 Project Deploy and Others

Step One

Clone the below Project in your VPS

git clone https://github.com/kamruzzamanripon/k8-node-react-mongodb-app.git
Enter fullscreen mode Exit fullscreen mode

Step Two

Go to k8s folder and you can see this file \

Image description

Step Three

Create Nampe Space

kubectl apply -f namespace.yaml
Enter fullscreen mode Exit fullscreen mode

Step Four

Apply all Secret file

kubectl apply -f backend-secret.yaml
kubectl apply -f jwt-secret.yaml
kubectl apply -f mongodb-secret.yaml
Enter fullscreen mode Exit fullscreen mode

Step Five

Declear Mongodb Volumes and Others

kubectl apply -f mongo-pv.yaml
kubectl apply -f mongo-pvc.yaml
kubectl apply -f mongodb-deployment.yaml
kubectl apply -f mongodb-service.yaml
Enter fullscreen mode Exit fullscreen mode

Step Six

Apply the Rest of Other file

kubectl apply -f backend-deployment.yaml
kubectl apply -f backend-service.yaml
kubectl apply -f frontend-deployment.yaml
kubectl apply -f frontend-service.yaml
Enter fullscreen mode Exit fullscreen mode

Step Seven

Configure SSL Certificate Domain. Open ssl_certificate.yaml and edit your desired domain name

Image description

Apply ssl_certificate.yaml file

kubectl apply -f ssl_certificate.yaml
Enter fullscreen mode Exit fullscreen mode

Step Eight

Configure Ingress file. Open ingress.yaml and add your desired domain name. \

Image description

Apply ingress.yaml file

kubectl apply -f ingress.yaml
Enter fullscreen mode Exit fullscreen mode

Check Certificate

Image description

Check NameSpace 

kubectl get all -n chat-app
Enter fullscreen mode Exit fullscreen mode

Image description

🌐 Browser View

Image description

Image description

🎉 Conclusion

Congratulations! You’ve successfully deployed the Full-Stack Chat Application . You can now access your Chat App.

💻 Monitoring and Others [Optional]

Now we are doing Extra features like Monitoring. It helps you learn about servers and apps.

Create Namespace 

kubectl create namespace monitoring
Enter fullscreen mode Exit fullscreen mode

Check Namespace

Image description

[!Note]
This Namespace helping to control all monitoring app like- Prometheus, Grafana, Loki ect

Prometheus and Grafana Install and Configure

Install

 helm install prometheus-stack prometheus-community/kube-prometheus-stack --namespace monitoring --set prometheus.service.nodePort=30000 --set grafana.service.nodePort=31000 --set grafana.service.type=NodePort --set prometheus.service.type=NodePort
Enter fullscreen mode Exit fullscreen mode

Run Prometheus Via Port 

 kubectl port-forward svc/prometheus-stack-kube-prom-prometheus 9090:9090 -n monitoring --address=0.0.0.0 &
Enter fullscreen mode Exit fullscreen mode

now you can access Prometheus using this port. Like

http://160.191.163.33:9090
Enter fullscreen mode Exit fullscreen mode

[!Note]
Change IP Address

Image description

Grafana Install and Configure
Run Grafana Via Port

kubectl port-forward svc/prometheus-stack-grafana 3000:80 -n monitoring --address=0.0.0.0  &
Enter fullscreen mode Exit fullscreen mode

Get Grafana Username and Password

UserName

admin
Enter fullscreen mode Exit fullscreen mode

password

kubectl get secret prometheus-stack-grafana -n monitoring -o jsonpath="{.data.admin-password}" | base64 --decode
Enter fullscreen mode Exit fullscreen mode

Image description

[!Note]
You can change password

Image description

Grafana Dashboard.

Here you can choose different type Algorithm Dashboard

Image description

That’s all. Happy Learning :) .
[if it is helpful, giving a star to the repository 😇]

Project Github Link
https://github.com/kamruzzamanripon/k8-node-react-mongodb-app

Top comments (0)

Read next

bcherlapally profile image

Pipeline Analytics: Unlocking the Power of Data to Enhance Software Development

Bal Reddy Cherlapally -

garciadiazjaime profile image

React 19: New hook useActionState

Jaime -

manasirn profile image

Frontend-Challenge - December Edition by Manasi Netrekar

Manasi Netrekar -

velan profile image

Postman vs Insomnia vs SoapUI vs Paw vs EchoAPI: A Comprehensive Comparison of API Testing Tools

Velan<> -