DEV Community

Cover image for Full-Stack Application Deployment Guide Using Docker, Kubernetes, Jenkins, and Prometheus Monitoring
ProDevOpsGuy Tech Community profile image H A R S H H A A
H A R S H H A A for ProDevOpsGuy Tech Community

Posted on

Full-Stack Application Deployment Guide Using Docker, Kubernetes, Jenkins, and Prometheus Monitoring

#kubernetes #devops #docker #monitoring

This detailed guide focuses on deploying the MERN E-Commerce Store source code (from https://github.com/HuXn-WebDev/MERN-E-Commerce-Store.git) with a modern DevOps pipeline involving Docker for containerization, Kubernetes for orchestration, Jenkins for CI/CD, and Prometheus for monitoringโ€”purpose-built for DevOps engineers to demonstrate deployment and operational practices.

Image

Table of Contents

  1. Overview & Prerequisites
  2. Application Preparation
  3. Dockerization of MERN App
  4. Jenkins CI/CD Setup
  5. Kubernetes Deployment
  6. Prometheus Monitoring Setup
  7. Best Practices & Tips
  8. Troubleshooting and Future Enhancements

1. Overview & Prerequisites

Objective

Deploy a production-grade MERN (MongoDB, Express, React, Node.js) e-commerce app using DevOps best practices.

Prerequisites

  • OS: Linux preferred (Windows WSL acceptable).
  • Installed Tools:
    • Docker & Docker Compose
    • Kubernetes (Minikube or managed, e.g., EKS, GKE)
    • kubectl CLI
    • Jenkins (standalone or Dockerized)
    • Prometheus and Grafana
    • Git
  • Knowledge Requirements:
    • Familiarity with containerization, Kubernetes constructs, CI/CD principles, and service monitoring.

2. Application Preparation

Clone the Repository 

git clone https://github.com/HuXn-WebDev/MERN-E-Commerce-Store.git cd MERN-E-Commerce-Store
Enter fullscreen mode Exit fullscreen mode

Review Source Structure 

MERN-E-Commerce-Store/ backend/ frontend/ .env package.json README.md
Enter fullscreen mode Exit fullscreen mode

Environment Setup

  • Set up a .env file in the backend directory with MongoDB URI, JWT secrets, and port.
  • Example snippet: 
 MONGO_URI=mongodb://mongo:27017/mernstore JWT_SECRET=your_jwt_secret PORT=5000
Enter fullscreen mode Exit fullscreen mode

3. Dockerization of MERN App

Backend Dockerfile (backend/Dockerfile) 

FROM node:18-alpine WORKDIR /app COPY package*.json ./ RUN npm install COPY . . EXPOSE 5000 CMD ["npm", "start"]
Enter fullscreen mode Exit fullscreen mode

Frontend Dockerfile (frontend/Dockerfile) 

FROM node:18-alpine as build WORKDIR /app COPY package*.json ./ RUN npm install COPY . . RUN npm run build FROM nginx:alpine COPY --from=build /app/build /usr/share/nginx/html EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]
Enter fullscreen mode Exit fullscreen mode

Docker Compose for Local Testing (docker-compose.yml) 

version: '3.8' services: mongo: image: mongo restart: always ports: - "27017:27017" volumes: - mongo-data:/data/db backend: build: ./backend ports: - "5000:5000" environment: - MONGO_URI=mongodb://mongo:27017/mernstore - JWT_SECRET=your_jwt_secret depends_on: - mongo frontend: build: ./frontend ports: - "3000:80" depends_on: - backend volumes: mongo-data:
Enter fullscreen mode Exit fullscreen mode

Test Docker Setup 

docker-compose up --build
Enter fullscreen mode Exit fullscreen mode

Browse to http://localhost:3000 to verify the frontend and backend are connected.

4. Jenkins CI/CD Setup

Jenkins Installation Sample 

docker run -p 8080:8080 -p 50000:50000 -v jenkins_home:/var/jenkins_home jenkins/jenkins:lts
Enter fullscreen mode Exit fullscreen mode

Access Jenkins at http://localhost:8080.

Jenkins Pipeline Example (Jenkinsfile) 

pipeline { agent any environment { DOCKERHUB_USER = 'yourdockerhubusername' REPO = 'mern-ecommerce-store' TAG = 'latest' } stages { stage('Checkout') { steps { git 'https://github.com/HuXn-WebDev/MERN-E-Commerce-Store.git' } } stage('Build Backend Image') { steps { sh 'docker build -t $DOCKERHUB_USER/$REPO-backend:$TAG ./backend' } } stage('Build Frontend Image') { steps { sh 'docker build -t $DOCKERHUB_USER/$REPO-frontend:$TAG ./frontend' } } stage('Push Images') { steps { withCredentials([string(credentialsId: 'dockerhub-pass', variable: 'PASS')]) { sh 'echo $PASS | docker login -u $DOCKERHUB_USER --password-stdin' sh 'docker push $DOCKERHUB_USER/$REPO-backend:$TAG' sh 'docker push $DOCKERHUB_USER/$REPO-frontend:$TAG' } } } stage('Deploy to Kubernetes') { steps { sh 'kubectl apply -f k8s/' } } } }
Enter fullscreen mode Exit fullscreen mode
  • Store Docker registry credentials in Jenkins.
  • Integrate GitHub webhooks for automation.

5. Kubernetes Deployment

Example Kubernetes Manifests (k8s/)

MongoDB Deployment and Service (k8s/mongo-deployment.yaml) 

apiVersion: apps/v1 kind: Deployment metadata: name: mongo spec: replicas: 1 selector: matchLabels: app: mongo template: metadata: labels: app: mongo spec: containers: - name: mongo image: mongo ports: - containerPort: 27017 volumeMounts: - name: mongo-data mountPath: /data/db volumes: - name: mongo-data emptyDir: {} --- apiVersion: v1 kind: Service metadata: name: mongo spec: ports: - port: 27017 selector: app: mongo
Enter fullscreen mode Exit fullscreen mode

Backend Deployment and Service (k8s/backend-deployment.yaml) 

apiVersion: apps/v1 kind: Deployment metadata: name: backend spec: replicas: 2 selector: matchLabels: app: backend template: metadata: labels: app: backend spec: containers: - name: backend image: yourdockerhubusername/mern-ecommerce-store-backend:latest ports: - containerPort: 5000 env: - name: MONGO_URI value: "mongodb://mongo:27017/mernstore" - name: JWT_SECRET value: "your_jwt_secret" --- apiVersion: v1 kind: Service metadata: name: backend spec: ports: - port: 5000 targetPort: 5000 selector: app: backend
Enter fullscreen mode Exit fullscreen mode

Frontend Deployment and Service (k8s/frontend-deployment.yaml) 

apiVersion: apps/v1 kind: Deployment metadata: name: frontend spec: replicas: 2 selector: matchLabels: app: frontend template: metadata: labels: app: frontend spec: containers: - name: frontend image: yourdockerhubusername/mern-ecommerce-store-frontend:latest ports: - containerPort: 80 --- apiVersion: v1 kind: Service metadata: name: frontend spec: ports: - port: 80 targetPort: 80 selector: app: frontend
Enter fullscreen mode Exit fullscreen mode

Ingress Example (k8s/ingress.yaml) 

apiVersion: networking.k8s.io/v1 kind: Ingress metadata: name: mernecommerce-ingress annotations: nginx.ingress.kubernetes.io/rewrite-target: / spec: rules: - host: your-domain.com http: paths: - path: / pathType: Prefix backend: service: name: frontend port: number: 80
Enter fullscreen mode Exit fullscreen mode

Deploy to Kubernetes 

kubectl apply -f k8s/ kubectl get pods,svc,ingress
Enter fullscreen mode Exit fullscreen mode

Access the app using Minikube IP or configured ingress.

6. Prometheus Monitoring Setup

Install Prometheus Stack 

helm repo add prometheus-community https://prometheus-community.github.io/helm-charts helm repo update helm install prometheus prometheus-community/kube-prometheus-stack
Enter fullscreen mode Exit fullscreen mode

Enable Backend Metrics

Add Prometheus annotations to backend pod spec:

metadata: annotations: prometheus.io/scrape: 'true' prometheus.io/port: '5000' prometheus.io/path: '/metrics'
Enter fullscreen mode Exit fullscreen mode

Expose /metrics in your Node.js backend using a library like prom-client.

Access Grafana Dashboard 

kubectl port-forward svc/prometheus-grafana 3000:80
Enter fullscreen mode Exit fullscreen mode

Dashboard is accessible at http://localhost:3000 (login: admin/admin by default).

7. Best Practices & Tips

  • Construct multi-stage Docker builds to optimize image layers.
  • Place sensitive configuration in Kubernetes Secrets.
  • Specify CPU/memory limits for each deployment.
  • Ensure CI/CD runs all tests before deployments.
  • Keep dependencies up-to-date and avoid unnecessary image layers.
  • Use resource requests for optimal cluster utilization.
  • Automate monitoring alerts using Prometheus Alertmanager.

8. Troubleshooting and Future Enhancements

  • Inspect pod/container logs for failure diagnosis: kubectl logs
  • Ensure Jenkins has access to your kubeconfig.
  • Confirm Prometheus scrape targets are valid and reachable.
  • Consider canary or blue/green deployment patterns.
  • Integrate alert notifications to Slack or email via Alertmanager.
  • Use custom Grafana dashboards for e-commerce KPIs (orders, sales, latency).

๐Ÿ› ๏ธ Author & Community

This project is crafted by Harshhaa ๐Ÿ’ก.

Iโ€™d love to hear your feedback! Feel free to share your thoughts.

๐Ÿ“ง Connect with me:

๐Ÿ“ข Stay Connected

Follow Me

Top comments (1)

Collapse
 
hemant_ab0d7e2bbb8fd1b556 profile image
Hemant •

That Github Repo is wrongly structured and hence not working !! But still managing to use it