Kiran Pawar's Blog
Project 1: Deploy Chat Application (3-Tier) using React, Node.js, and MongoDB on Minikube.

Project 1: Deploy Chat Application (3-Tier) using React, Node.js, and MongoDB on Minikube.

Kiran Pawar's photo
Kiran Pawar
·

4 min read

Table of contents

Steps to Deploy a 3-Tier Chat Application on Minikube

1. Install Minikube on Windows

  1. Install Minikube following the official guide.

  2. Verify the installation:

     minikube start
 minikube status

2. Clone the Repository

Clone your chat application repository from GitHub or any other source:

git clone https://github.com/imkiran13/full-stack-chat-app.git
cd full-stack-chat-app

3. Prepare Docker Images

  1. Log in to DockerHub using a personal access token:
    go to account settings>personal access token >Generate

     docker login -u imkiran13

  2. Navigate to the respective directories for the frontend and backend:

    • For the frontend:

        cd frontend
  docker build -t imkiran13/chatapp-frontend:latest .
  docker push imkiran13/chatapp-frontend:latest

    • For the backend:

        cd backend
  docker build -t imkiran13/chatapp-backend:latest .
  docker push imkiran13/chatapp-backend:latest

4. Create Kubernetes Manifests

Create a folder manifests/ to organize the Kubernetes configurations:

mkdir manifests
cd manifests

Required Manifest Files

  • Namespace: Define a dedicated namespace for your application.

  • Secrets: Store sensitive credentials.

  • MongoDB: Deployment, Service, PV, PVC.

  • Backend: Deployment, Service.

  • Frontend: Deployment, Service.

  • Ingress: Configure Ingress for application routing.

Here’s a brief of each file:

1. namespace.yml

apiVersion: v1
kind: Namespace
metadata:
  name: chat-app

2. secrets.yml

apiVersion: v1
kind: Secret
metadata:
  name: chatapp-secrets
  namespace: chat-app
type: Opaque
data:
  jwt: ZXlKMGVYQWlPaUpLVjFRaUxDSmhiR2NpT2lKSVV6STFOaUo5LmV5SnBjM01pT2lKUGJteHBibVVnU2xkVUlFSjFhV3hrWlhJaUxDSnBZWFFpT2pFM016YzRNRGsyTkRZc0ltVjRjQ0k2TVRjMk9UTTBOVFkwTml3aVlYVmtJam9pZDNkM0xtVjRZVzF3YkdVdVkyOXRJaXdpYzNWaUlqb2lhbkp2WTJ0bGRFQmxlR0Z0Y0d4bExtTnZiU0lzSWtkcGRtVnVUbUZ0WlNJNklrcHZhRzV1ZVNJc0lsTjFjbTVoYldVaU9pSlNiMk5yWlhRaUxDSkZiV0ZwYkNJNkltcHliMk5yWlhSQVpYaGhiWEJzWlM1amIyMGlMQ0pTYjJ4bElqcGJJazFoYm1GblpYSWlMQ0pRY205cVpXTjBJRUZrYldsdWFYTjBjbUYwYjNJaVhYMC5NY29mWkRHeHpiNkRaQnpUaTBjV3V4V242R00tZ2lMbGQ0YXpfeEFUc1NBCg==

Replace <base64-encoded-username> and <base64-encoded-password> with base64-encoded values of your MongoDB username and password:


echo -n 'your-password' | base64

3. mongodb-deployment.yml

apiVersion: apps/v1
kind: Deployment
metadata:
  name: mongodb-deployment
  namespace: chat-app
spec:
  replicas: 1
  selector:
    matchLabels:
      app: mongodb
  template:
    metadata:
      name: mongodb-pod
      namespace: chat-app
      labels: 
        app: mongodb
    spec:
      containers:
      - name: chatapp-mongodb
        image: mongo:latest
        ports:
        - containerPort: 27017
        env:
        - name: MONGO_INITDB_ROOT_USERNAME
          value: mongoadmin
        - name: MONGO_INITDB_ROOT_PASSWORD
          value: secret
      volumes:
      - name: mongo-data
        persistentVolumeClaim:
          claimName: mongodb-pvc

4. mongodb-pv.yml

apiVersion: v1
kind: PersistentVolume
metadata:
  name: mongodb-pv
  namespace: chat-app
spec:
  accessModes:
    - ReadWriteOnce
  capacity:
    storage: 5Gi
  hostPath:
    path: /data

5. mongodb-pvc.yml

apiVersion: v1
kind: PersistentVolumeClaim
metadata:
  name: mongodb-pvc
  namespace: chat-app
spec:
  accessModes:
    - ReadWriteOnce
  resources:
    requests:
      storage: 5Gi

6. mongodb-service.yml

apiVersion: v1
kind: Service
metadata:
  name: mongodb
  namespace: chat-app
spec:
  selector:
    app: mongodb
  ports:
  - port: 27017
    targetPort: 27017

7. backend-deployment.yml

apiVersion: apps/v1
kind: Deployment
metadata:
  name: backend-deployment
  namespace: chat-app
spec:
  replicas: 1
  selector:
    matchLabels:
      app: backend
  template:
    metadata:
      name: backend-pod
      namespace: chat-app
      labels: 
        app: backend
    spec:
      containers:
      - name: chatapp-backend
        image: imkiran13/chatapp-backend:latest
        ports:
        - containerPort: 5001
        env:
        - name: NODE_ENV
          value: production
        - name: MONGODB_URI
          value: "mongodb://mongoadmin:secret@mongodb:27017/dbname?authSource=admin"
        - name: JWT_SECRET
          valueFrom:
            secretKeyRef:
              name: chatapp-secrets
              key: jwt 
        - name: PORT
          value: "5001"

Replace <username> and <password> with your MongoDB credentials or secrets.

8. backend-service.yml

apiVersion: v1
kind: Service
metadata:
  name: backend
  namespace: chat-app
spec:
  selector:
    app: backend
  ports:
  - port: 5001
    targetPort: 5001

9. frontend-deployment.yml

apiVersion: apps/v1
kind: Deployment
metadata:
  name: frontend-deployment
  namespace: chat-app
spec:
  replicas: 1
  selector:
    matchLabels:
      app: frontend
  template:
    metadata:
      name: frontend-pod
      namespace: chat-app
      labels: 
        app: frontend
    spec:
      containers:
      - name: chatapp-frontend
        image: imkiran13/chatapp-frontend
        ports:
        - containerPort: 80
        env:
        - name: NODE_ENV
          value: production

10. frontend-service.yml

apiVersion: v1
kind: Service
metadata:
  name: frontend
  namespace: chat-app
spec:
  selector:
    app: frontend
  ports:
  - port: 80
    targetPort: 80

11. ingress.yml

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: chatapp-ingress
  namespace: chat-app
  labels:
    name: chatapp-ingress
  annotations:
    nginx.ingress.kubernetes.io/rewrite-target: /
    nginx.ingress.kubernetes.io/ssl-redirect: "false"
spec:
  rules:
  - host: chat-tws.com
    http:
      paths:
      - pathType: Prefix
        path: "/"
        backend:
          service:
            name: frontend
            port: 
              number: 80
      - pathType: Prefix
        path: "/api"
        backend:
          service:
            name: backend
            port: 
              number: 5001

5. Deploy Minikube Ingress Controller

Enable Minikube’s built-in NGINX ingress controller:

minikube addons enable ingress

6. Apply All Manifest Files

Apply the namespace first:

kubectl apply -f namespace.yml

Run the following commands to apply the manifests:

kubectl apply -f secrets.yml
kubectl apply -f mongodb-pv.yml
kubectl apply -f mongodb-pvc.yml
kubectl apply -f mongodb-deployment.yml
kubectl apply -f mongodb-service.yml
kubectl apply -f backend-deployment.yml
kubectl apply -f backend-service.yml
kubectl apply -f frontend-deployment.yml
kubectl apply -f frontend-service.yml
kubectl apply -f ingress.yml

7. Verify All Resources

Check the status of all deployments and services:

kubectl get all -n chat-app
kubectl get ingress -n chat-app

8. Port Forwarding

Forward ports for debugging and local access:

  • Frontend:

      kubectl port-forward svc/frontend 80:80 -n chat-app &

  • Backend:

      kubectl port-forward svc/backend 5001:5001 -n chat-app &

9. Access the Application

10. Dashboard Access

Start Minikube dashboard to monitor resources:

minikube dashboard

Let me know if you'd like more details or customizations!