Multi-Container Django-React Application

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

Architecture

Docker Configuration

Docker Compose File (docker-compose.yml):

Multi-container application with three services:

1. 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.

2. 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.

3. 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.

Data Storages:

• 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

NGINX Configuration

The NGINX container serves React, handles static & media files, and proxies requests to the Django backend.

Example Configuration:

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;
    }
}

Contributors 🤝

Feel free to open issues or pull requests to contribute to this project!😊

---