🚀 Deploying a DevOps Learning Platform with React, Flask, PostgreSQL using Docker & Kubernetes

In this technical article, we’ll walk through the end-to-end deployment of a full-stack DevOps Learning Platform built with React (frontend), Flask (backend), and PostgreSQL (database). The goal is to containerize each component using Docker and orchestrate them with Kubernetes for scalability and resilience.

🛠 Tech Stack

• Frontend: React.js

• Backend: Flask (Python)

• Database: PostgreSQL

• Containerization: Docker

• Orchestration: Kubernetes (Minikube or any cloud provider)

• Reverse Proxy: NGINX (optional)

---

📁 Project Structure

devops-platform/
│
├── client/             # React frontend
│   ├── Dockerfile
│   └── ...
│
├── server/             # Flask backend
│   ├── Dockerfile
│   └── app.py
│
├── db/                 # Postgres initialization
│   └── init.sql
│
├── docker-compose.yml
├── k8s/                # Kubernetes manifests
│   ├── frontend.yaml
│   ├── backend.yaml
│   ├── postgres.yaml
│   └── ingress.yaml
└── README.md

---

🧩 Step 1: Build React Frontend

client/Dockerfile

FROM node:20-alpine as build

WORKDIR /app
COPY . .
RUN npm install && npm run build

FROM nginx:alpine
COPY --from=build /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

---

🐍 Step 2: Build Flask Backend

server/app.py

from flask import Flask, jsonify
import psycopg2

app = Flask(__name__)

@app.route('/api')
def hello():
    return jsonify({"message": "Welcome to DevOps Learning Platform!"})

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000)

server/Dockerfile

FROM python:3.11-slim

WORKDIR /app
COPY . .
RUN pip install flask psycopg2-binary

EXPOSE 5000
CMD ["python", "app.py"]

---

🛢️ Step 3: Setup PostgreSQL

db/init.sql

CREATE DATABASE devops_learn;
CREATE USER devops_user WITH PASSWORD 'password';
GRANT ALL PRIVILEGES ON DATABASE devops_learn TO devops_user;

---

🐳 Step 4: Docker Compose for Local Testing

docker-compose.yml

☸️ Step 5: Kubernetes Deployment

k8s/postgres.yaml

apiVersion: v1
kind: PersistentVolumeClaim
metadata:
  name: postgres-pvc
spec:
  accessModes:
    - ReadWriteOnce
  resources:
    requests:
      storage: 1Gi
---
apiVersion: v1
kind: Service
metadata:
  name: postgres
spec:
  ports:
    - port: 5432
  selector:
    app: postgres
---
apiVersion: apps/v1
kind: Deployment
metadata:
  name: postgres
spec:
  replicas: 1
  selector:
    matchLabels:
      app: postgres
  template:
    metadata:
      labels:
        app: postgres
    spec:
      containers:
        - name: postgres
          image: postgres:14
          env:
            - name: POSTGRES_DB
              value: "devops_learn"
            - name: POSTGRES_USER
              value: "devops_user"
            - name: POSTGRES_PASSWORD
              value: "password"
          volumeMounts:
            - name: postgres-storage
              mountPath: /var/lib/postgresql/data
      volumes:
        - name: postgres-storage
          persistentVolumeClaim:
            claimName: postgres-pvc

k8s/backend.yaml

apiVersion: apps/v1
kind: Deployment
metadata:
  name: backend
spec:
  replicas: 1
  selector:
    matchLabels:
      app: backend
  template:
    metadata:
      labels:
        app: backend
    spec:
      containers:
        - name: backend
          image: your-dockerhub-username/backend:latest
          ports:
            - containerPort: 5000
          env:
            - name: DB_HOST
              value: "postgres"
            - name: DB_NAME
              value: "devops_learn"
            - name: DB_USER
              value: "devops_user"
            - name: DB_PASS
              value: "password"
---
apiVersion: v1
kind: Service
metadata:
  name: backend
spec:
  selector:
    app: backend
  ports:
    - protocol: TCP
      port: 5000
      targetPort: 5000

k8s/frontend.yaml

apiVersion: apps/v1
kind: Deployment
metadata:
  name: frontend
spec:
  replicas: 1
  selector:
    matchLabels:
      app: frontend
  template:
    metadata:
      labels:
        app: frontend
    spec:
      containers:
        - name: frontend
          image: your-dockerhub-username/frontend:latest
          ports:
            - containerPort: 80
---
apiVersion: v1
kind: Service
metadata:
  name: frontend
spec:
  selector:
    app: frontend
  ports:
    - protocol: TCP
      port: 80
      targetPort: 80
  type: LoadBalancer

---

🌐 Optional: Ingress Controller Setup

k8s/ingress.yaml

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: devops-platform-ingress
  annotations:
    nginx.ingress.kubernetes.io/rewrite-target: /
spec:
  rules:
    - host: devops.local
      http:
        paths:
          - path: /
            pathType: Prefix
            backend:
              service:
                name: frontend
                port:
                  number: 80
          - path: /api
            pathType: Prefix
            backend:
              service:
                name: backend
                port:
                  number: 5000

Enable ingress if using Minikube:

minikube addons enable ingress

---

📦 Step 6: Build & Push Docker Images

---

🚀 Step 7: Deploy to Kubernetes

kubectl apply -f k8s/postgres.yaml
kubectl apply -f k8s/backend.yaml
kubectl apply -f k8s/frontend.yaml
kubectl apply -f k8s/ingress.yaml

---

✅ Verify Deployment

1. Pods:
   kubectl get pods

2. Services:
   kubectl get svc

3. Ingress:
   Visit http://devops.local or use minikube service frontend --url

---

🔚 Conclusion

You’ve now deployed a containerized DevOps Learning Platform using modern DevOps tooling:

• React and Flask full-stack app

• Docker for packaging

• Kubernetes for orchestration

This architecture is scalable, portable, and ideal for CI/CD integration in any cloud-native pipeline.