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:

benoit

2025-12-23 15:33:52 +01:00

parent cc2f1d0051

commit 04603cd5e9

10 changed files with 148 additions and 100 deletions

									
										frontend/Dockerfile
									
		+7
		-3
	
												View File
												
				@@ -12,15 +12,19 @@ RUN npm ci

				# Copy application code

				COPY frontend/ .

				# Build argument for API URL

				# Build argument for API URL (used for default build)

				ARG NEXT_PUBLIC_API_URL=http://localhost:8001

				ENV NEXT_PUBLIC_API_URL=${NEXT_PUBLIC_API_URL}

				# Build the application

				RUN npm run build

				# Copy runtime config generation script

				COPY frontend/generate-config.sh /app/generate-config.sh

				RUN chmod +x /app/generate-config.sh

				# Expose port

				EXPOSE 3000

				# Start the application

				CMD ["npm", "start"]

				# Generate runtime config and start the application

				CMD ["/bin/sh", "-c", "/app/generate-config.sh && npm start"]