Tech Stack
Overview
A production-grade, containerized 3-tier application designed to demonstrate advanced DevOps practices including multi-stage build optimizations, intelligent reverse-proxy routing, automated static asset management, and rigorous container isolation. The architecture completely decouples the frontend (React served by Nginx), the backend (Django REST Framework served by Gunicorn), and the database (MySQL) into separate microservices. By utilizing Nginx as a unified entry point and static web server, it eliminates the need for an active Node.js server in production, drastically reducing memory consumption and attacking surfaces.
Challenges & Solutions
Reducing image bloat and ensuring fast container registry pulls
Solution: Engineered multi-stage Docker builds for both the frontend and backend. Stripped Node.js entirely from the production React image (94.2% reduction) and eliminated C-compilers/headers from the Django backend (90.4% reduction), resulting in highly optimized, minimal containers.
Managing CORS securely while effectively decoupling API and UI layers
Solution: Configured an intelligent Nginx reverse proxy using custom default.conf rules. It seamlessly routes root traffic to static SPA files and selectively forwards /api/ and /admin/ paths to the internal Gunicorn WSGI server, establishing a Zero-CORS environment.
Ensuring database security and persisting data across ephemeral containers
Solution: Deployed the MySQL database on a completely isolated, internal Docker bridge network (notes-app-nw) preventing public access, and utilized mapped host volumes to ensure persistent and reliable local storage.
Architecture & Tiers
Presentation Tier (Frontend)
React static files compiled at build-time using a temporary Node container, then securely served directly by Nginx on port 80.
Application Tier (Backend)
Django REST Framework served via Gunicorn WSGI. Only handles /api/ and /admin/ endpoints, completely shielded behind the proxy.
Data Tier (Database)
MySQL container running strictly on a private subnet, utilizing a Docker volume to persist data locally across container lifecycles.
Network Diagram
┌──────────────────────┐
│ Client Browser │
└──────────┬───────────┘
│ HTTP (Port 80)
▼
┌──────────────────────┐
│ Nginx Reverse Proxy │
└──────────┬───────────┘
│
┌───────────────────┴───────────────────┐
│ (Serves Static UI Assets) │ (Proxies APIs)
▼ ▼
┌─────────────────────────┐ ┌─────────────────────────┐
│ React Presentation │ │ Django REST Framework │
│ Tier 1 (Nginx) │ │ Logic Tier 2 (App) │
└─────────────────────────┘ └────────────┬────────────┘
│ SQL (Port 3306)
▼
┌─────────────────────────┐
│ MySQL Database Tier 3 │
└─────────────────────────┘