Benoit
04603cd5e9
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 !
94 lines
2.6 KiB
Markdown
94 lines
2.6 KiB
Markdown
# 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
|
|
```
|