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 !

frontend/Dockerfile

@@ -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"]

frontend/README.md

@@ -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
+```

frontend/app/layout.tsx

@@ -2,6 +2,7 @@ import type { Metadata } from "next"
 import { Inter } from "next/font/google"
 import "./globals.css"
 import { QueryProvider } from "@/components/providers/QueryProvider"
+import Script from "next/script"
 
 const inter = Inter({ subsets: ["latin"] })
 
@@ -17,6 +18,9 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
+      <head>
+        <Script src="/config.js" strategy="beforeInteractive" />
+      </head>
       <body className={inter.className}>
         <QueryProvider>
           {children}

frontend/generate-config.sh

@@ -0,0 +1,15 @@
+#!/bin/sh
+# Generate runtime configuration file
+
+echo "Generating runtime configuration..."
+echo "API URL: ${NEXT_PUBLIC_API_URL:-http://localhost:8001}"
+
+cat > /app/public/config.js << EOF
+// Runtime configuration generated at container startup
+window.__RUNTIME_CONFIG__ = {
+  API_URL: '${NEXT_PUBLIC_API_URL:-http://localhost:8001}'
+};
+EOF
+
+echo "Configuration generated successfully!"
+cat /app/public/config.js

frontend/lib/api.ts

@@ -14,7 +14,15 @@ import type {
   FilterParams,
 } from './types'
 
-const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000'
+// Get API URL from runtime config (injected at container startup) or fallback to env var
+function getApiUrl(): string {
+  if (typeof window !== 'undefined' && (window as any).__RUNTIME_CONFIG__) {
+    return (window as any).__RUNTIME_CONFIG__.API_URL
+  }
+  return process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000'
+}
+
+const API_BASE_URL = getApiUrl()
 
 const apiClient = axios.create({
   baseURL: API_BASE_URL,

frontend/public/config.js

@@ -0,0 +1,4 @@
+// This file will be overwritten at container startup
+window.__RUNTIME_CONFIG__ = {
+  API_URL: 'http://localhost:8001'
+};