137 lines
5.5 KiB
Markdown
137 lines
5.5 KiB
Markdown
# 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
|
|
|
|
1. Compléter les secrets du `.env` (ou les générer avec `python scripts/init_env.py`).
|
|
2. Modifier si nécessaire `FRONTEND_PORT`, `BACKEND_PORT`, `ALLOWED_HOSTS` et les origines autorisées.
|
|
3. Démarrer :
|
|
|
|
```sh
|
|
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
|
|
|
|
```text
|
|
.
|
|
├── .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.
|
|
|
|
```ini
|
|
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 :
|
|
|
|
```python
|
|
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
|
|
|
|
```sh
|
|
# 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.
|