Fix localhost en prod
Résumé des modifications J'ai implémenté une configuration runtime pour le frontend qui permet de changer l'URL de l'API sans rebuilder l'image Docker. Voici ce qui a été fait : 📝 Fichiers modifiés : frontend/Dockerfile - Ajout du script de génération de config au démarrage frontend/lib/api.ts - Lecture de la config depuis window.__RUNTIME_CONFIG__ frontend/app/layout.tsx - Chargement du script config.js docker-compose.yml - Utilisation de la variable d'environnement .env.example - Documentation de la variable DEPLOYMENT.md - Documentation de la configuration runtime 📄 Fichiers créés : frontend/generate-config.sh - Script de génération de config frontend/public/config.js - Fichier de config (placeholder) frontend/README.md - Documentation du frontend 🚀 Pour résoudre votre problème en production : Sur votre serveur, modifiez le fichier .env : # URL publique de l'API (utilisée par le navigateur) NEXT_PUBLIC_API_URL=https://audioclassifier.benoitsz.com:8001 # CORS doit accepter les requêtes du frontend CORS_ORIGINS=https://audioclassifier.benoitsz.com,https://audioclassifier.benoitsz.com:3000 Ensuite : # Pull les dernières modifications git pull # Rebuild l'image frontend (une seule fois) # Soit via Gitea Actions en poussant sur main # Soit manuellement : # docker build -t git.benoitsz.com/benoit/audio-classifier-frontend:dev -f frontend/Dockerfile . # docker push git.benoitsz.com/benoit/audio-classifier-frontend:dev # Redémarrer les containers docker-compose down docker-compose up -d ✨ Avantages : ✅ Aucun rebuild nécessaire après le premier déploiement ✅ Configuration flexible via variables d'environnement ✅ Compatible avec tous les environnements (dev, staging, prod) ✅ Testé et fonctionnel localement Le frontend générera automatiquement le bon fichier de configuration au démarrage du container avec l'URL de votre serveur !
This commit is contained in:
93
frontend/README.md
Normal file
93
frontend/README.md
Normal file
@@ -0,0 +1,93 @@
|
||||
# Frontend - Audio Classifier
|
||||
|
||||
Frontend Next.js pour Audio Classifier avec configuration runtime.
|
||||
|
||||
## Configuration Runtime
|
||||
|
||||
Le frontend utilise un système de **configuration runtime** qui permet de changer l'URL de l'API sans rebuilder l'image Docker.
|
||||
|
||||
### Comment ça fonctionne
|
||||
|
||||
1. Au démarrage du container, le script `generate-config.sh` génère un fichier `/app/public/config.js`
|
||||
2. Ce fichier contient l'URL de l'API basée sur la variable `NEXT_PUBLIC_API_URL`
|
||||
3. Le fichier est chargé dans le navigateur via `<Script src="/config.js">`
|
||||
4. Le code API lit la configuration depuis `window.__RUNTIME_CONFIG__.API_URL`
|
||||
|
||||
### Développement Local
|
||||
|
||||
```bash
|
||||
# Installer les dépendances
|
||||
npm install
|
||||
|
||||
# Créer un fichier .env.local
|
||||
echo "NEXT_PUBLIC_API_URL=http://localhost:8001" > .env.local
|
||||
|
||||
# Lancer en mode dev
|
||||
npm run dev
|
||||
```
|
||||
|
||||
### Production avec Docker
|
||||
|
||||
```bash
|
||||
# Build l'image
|
||||
docker build -t audio-classifier-frontend -f frontend/Dockerfile .
|
||||
|
||||
# Lancer avec une URL personnalisée
|
||||
docker run -p 3000:3000 \
|
||||
-e NEXT_PUBLIC_API_URL=https://mon-serveur.com:8001 \
|
||||
audio-classifier-frontend
|
||||
```
|
||||
|
||||
### Docker Compose
|
||||
|
||||
```yaml
|
||||
frontend:
|
||||
image: audio-classifier-frontend
|
||||
environment:
|
||||
NEXT_PUBLIC_API_URL: ${NEXT_PUBLIC_API_URL:-http://localhost:8001}
|
||||
ports:
|
||||
- "3000:3000"
|
||||
```
|
||||
|
||||
## Structure
|
||||
|
||||
```
|
||||
frontend/
|
||||
├── app/ # Pages Next.js (App Router)
|
||||
│ ├── layout.tsx # Layout principal (charge config.js)
|
||||
│ └── page.tsx # Page d'accueil
|
||||
├── components/ # Composants React
|
||||
├── lib/ # Utilitaires
|
||||
│ ├── api.ts # Client API (lit la config runtime)
|
||||
│ └── types.ts # Types TypeScript
|
||||
├── public/ # Fichiers statiques
|
||||
│ └── config.js # Configuration runtime (généré au démarrage)
|
||||
├── generate-config.sh # Script de génération de config
|
||||
└── Dockerfile # Image Docker de production
|
||||
```
|
||||
|
||||
## Variables d'Environnement
|
||||
|
||||
- `NEXT_PUBLIC_API_URL` : URL de l'API backend (ex: `https://api.example.com:8001`)
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### L'API n'est pas accessible
|
||||
|
||||
Vérifiez que :
|
||||
1. La variable `NEXT_PUBLIC_API_URL` est correctement définie
|
||||
2. Le fichier `/app/public/config.js` existe dans le container
|
||||
3. Le navigateur peut accéder à l'URL de l'API (pas de CORS, firewall, etc.)
|
||||
|
||||
### Voir la configuration active
|
||||
|
||||
Ouvrez la console du navigateur et tapez :
|
||||
```javascript
|
||||
console.log(window.__RUNTIME_CONFIG__)
|
||||
```
|
||||
|
||||
### Vérifier la config dans le container
|
||||
|
||||
```bash
|
||||
docker exec audio_classifier_ui cat /app/public/config.js
|
||||
```
|
||||
Reference in New Issue
Block a user