This project is a full-stack web application built using Django for the backend and React for the frontend. The application is deployed using Docker with a multi-container setup, incorporating NGINX as a reverse proxy and static and media file server, and PostgreSQL as the database.
📎React app repo & 📎 Django app repo
Multi-container application with three services:
-
backend: Runs the Django application in a container named backend_django. It uses a custom Dockerfile, loads environment variables from .env, and stores media files in a named volume media_data. This service depends on the postgres database.
-
proxy: Serves as the NGINX reverse proxy, handling requests and serving static and media files. It maps the host directory ./backend/staticfiles to /vol/staticfiles for serving static files and shares the media_data volume for media files. It exposes port 80 and depends on the backend service.
-
postgres: Runs a PostgreSQL database in a container named postgres_db. It uses environment variables for database credentials, stores data in the postgres_data volume, and exposes port 5432.
- Two Named volumes for persistent data storage for Database and Media files.
- Staticfiles are served using Bind mounts.
volumes: - postgres_data:/var/lib/postgresql/data # Named volumes - media_data:/vol/media # Named volumes - ./backend/staticfiles:/vol/staticfiles # Bind mount
The NGINX container serves React, handles static & media files, and proxies requests to the Django backend.
server { listen 80; location /api/ { proxy_pass http://backend:8000; } location /db_admin/ { proxy_pass http://backend:8000; } location /static/ { alias /vol/staticfiles/; } location /media/ { alias /vol/media/; } location / { root /usr/share/nginx/html; try_files $uri $uri/ /index.html; } }Feel free to open issues or pull requests to contribute to this project!😊