Template Django + React + MySQL

Un squelette réutilisable inspiré de l'organisation de GoodDrive, sans ses fonctionnalités : Django REST Framework, React/Vite, Tailwind 4, composants shadcn/ui, MySQL 8 et Docker Compose.

Démarrage rapide

Compléter les secrets du .env (ou les générer avec python scripts/init_env.py).
Modifier si nécessaire FRONTEND_PORT, BACKEND_PORT, ALLOWED_HOSTS et les origines autorisées.
Démarrer :

python scripts/init_env.py
docker compose up -d --build

Frontend : http://localhost:1028 (ou FRONTEND_PORT)
Backend : http://localhost:1029/api/health/ (ou BACKEND_PORT)
Admin Django : http://localhost:1028/admin/

Au premier lancement, ensure_admin crée le compte à partir de ADMIN_*. Si le compte existe déjà, il ne change pas son mot de passe à chaque redémarrage.

Attention : ne versionne jamais .env, et remplace les noms/mots de passe par des valeurs propres à chaque projet. DEBUG=True ne doit pas être utilisé en production.

Structure

.
├── .env                # paramètres locaux, non versionné
├── .env.example        # modèle sans secrets
├── docker-compose.yml
├── scripts/
│   └── init_env.py
├── backend/
│   ├── Dockerfile
│   ├── entrypoint.sh
│   ├── requirements.txt
│   ├── manage.py
│   ├── core/
│   │   ├── settings.py
│   │   ├── origins.py
│   │   └── urls.py
│   └── common/
│       ├── urls.py
│       ├── views.py
│       └── management/commands/ensure_admin.py
└── frontend/
    ├── Dockerfile
    ├── nginx.conf
    ├── package.json
    ├── components.json
    ├── vite.config.js
    └── src/
        ├── App.jsx
        ├── index.css
        └── components/ui/

Origines CORS/CSRF et ports automatiques

backend/core/settings.py transforme les origines du .env automatiquement.

FRONTEND_PORT=1028
BACKEND_PORT=1029
CORS_ALLOWED_ORIGINS=http://localhost,http://127.0.0.1
CSRF_TRUSTED_ORIGINS=http://localhost,http://127.0.0.1

Valeurs effectives :

CORS_ALLOWED_ORIGINS = ["http://localhost:1028", "http://127.0.0.1:1028"]
CSRF_TRUSTED_ORIGINS = [
    "http://localhost:1029", "http://127.0.0.1:1029",  # backend
    "http://localhost:1028", "http://127.0.0.1:1028",  # frontend
]

Les origines comportant déjà un port explicite sont conservées telles quelles : http://localhost:3000 reste http://localhost:3000.

Pour un reverse proxy HTTPS avec ports standards 443, mets AUTO_PORT_CORS=False et AUTO_PORT_CSRF=False, puis indique tes origines complètes dans les deux variables. Cela évite d'ajouter :1028 à https://mon-domaine.fr.

Pourquoi le frontend figure également dans CSRF ? Django en a besoin pour les formulaires avec cookie/session provenant de l'interface. Cela complète la règle demandée « port backend pour CSRF, port frontend pour CORS ».

Dans ce template, le frontend utilise /api/ sur le même domaine grâce au proxy Nginx : CORS n'est normalement pas nécessaire pour la communication interne, mais reste configuré si une autre application appelle directement l'API exposée sur le port backend.

Architecture Docker

db : MySQL 8.4 avec volume db_data (non exposé sur le réseau hôte).
backend : Django + Gunicorn sur le port interne 8000, publié sur BACKEND_PORT.
frontend : React compilé puis servi par Nginx sur le port interne 80, publié sur FRONTEND_PORT.
Nginx relaie /api/, /admin/ et /static/ vers Django.

Le port MYSQL_PORT est le port de MySQL dans le réseau des conteneurs (3306 avec le service db). Pour une base distante, adapte MYSQL_HOST et MYSQL_PORT. Le service db reste créé par Compose dans cette version du template.

Ajouter tes fonctionnalités

Django : nouvelle application via python manage.py startapp monapp ; l'ajouter dans INSTALLED_APPS et ses URL dans core/urls.py.
React : nouvelles pages/composants dans frontend/src/.
shadcn/ui : le fichier components.json est présent. Ajouter les composants via la CLI shadcn (npx shadcn@latest add dialog, par exemple). Le template inclut déjà Button et Card.
Variables supplémentaires : les ajouter au .env.example et les lire via decouple.config côté Django.

Vérifier et exploiter

# Logs
docker compose logs -f backend
docker compose logs -f frontend

# Voir les origines effectives (ne pas afficher le SECRET_KEY)
docker compose exec backend python manage.py shell -c "from django.conf import settings; print(settings.CORS_ALLOWED_ORIGINS, settings.CSRF_TRUSTED_ORIGINS)"

# Tests unitaires des origines (sans Django)
cd backend && python -m unittest discover -s tests

# Stopper sans détruire MySQL
docker compose down

Ne pas utiliser docker compose down -v : cela supprime le volume de la base.

Notes de sécurité

SECRET_KEY, MYSQL_PASSWORD, MYSQL_ROOT_PASSWORD et ADMIN_PASSWORD sont générés localement par le script, sans être publiés dans le ZIP.
Les identifiants MySQL ne sont pas intégrés dans les images Docker.
La route de diagnostic /api/health/ est volontairement publique ; les futures routes API sont protégées par défaut dans DRF.
Sur Internet, configure HTTPS, ALLOWED_HOSTS, origines, cookies sécurisés et reverse proxy avant mise en ligne.
En production, évite d'exposer directement le port backend si les appels passent seulement par Nginx.

5.5 KiB Raw Blame History