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 !
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
- Au démarrage du container, le script
generate-config.shgénère un fichier/app/public/config.js - Ce fichier contient l'URL de l'API basée sur la variable
NEXT_PUBLIC_API_URL - Le fichier est chargé dans le navigateur via
<Script src="/config.js"> - Le code API lit la configuration depuis
window.__RUNTIME_CONFIG__.API_URL
Développement Local
# 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
# 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
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 :
- La variable
NEXT_PUBLIC_API_URLest correctement définie - Le fichier
/app/public/config.jsexiste dans le container - 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 :
console.log(window.__RUNTIME_CONFIG__)
Vérifier la config dans le container
docker exec audio_classifier_ui cat /app/public/config.js