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 !
112 lines
3.0 KiB
TypeScript
112 lines
3.0 KiB
TypeScript
/**
|
|
* API client for Audio Classifier backend
|
|
*/
|
|
import axios from 'axios'
|
|
import type {
|
|
Track,
|
|
TracksResponse,
|
|
SearchResponse,
|
|
SimilarTracksResponse,
|
|
JobStatus,
|
|
AnalyzeFolderRequest,
|
|
WaveformData,
|
|
Stats,
|
|
FilterParams,
|
|
} from './types'
|
|
|
|
// 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,
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
})
|
|
|
|
// Tracks
|
|
export async function getTracks(params: FilterParams & { skip?: number; limit?: number }): Promise<TracksResponse> {
|
|
const response = await apiClient.get('/api/tracks', { params })
|
|
return response.data
|
|
}
|
|
|
|
export async function getTrack(id: string): Promise<Track> {
|
|
const response = await apiClient.get(`/api/tracks/${id}`)
|
|
return response.data
|
|
}
|
|
|
|
export async function deleteTrack(id: string): Promise<void> {
|
|
await apiClient.delete(`/api/tracks/${id}`)
|
|
}
|
|
|
|
// Search
|
|
export async function searchTracks(
|
|
query: string,
|
|
filters?: { genre?: string; mood?: string; limit?: number }
|
|
): Promise<SearchResponse> {
|
|
const response = await apiClient.get('/api/search', {
|
|
params: { q: query, ...filters },
|
|
})
|
|
return response.data
|
|
}
|
|
|
|
// Similar
|
|
export async function getSimilarTracks(id: string, limit: number = 10): Promise<SimilarTracksResponse> {
|
|
const response = await apiClient.get(`/api/tracks/${id}/similar`, {
|
|
params: { limit },
|
|
})
|
|
return response.data
|
|
}
|
|
|
|
// Analysis
|
|
export async function analyzeFolder(request: AnalyzeFolderRequest): Promise<{ job_id: string }> {
|
|
const response = await apiClient.post('/api/analyze/folder', request)
|
|
return response.data
|
|
}
|
|
|
|
export async function getAnalyzeStatus(jobId: string): Promise<JobStatus> {
|
|
const response = await apiClient.get(`/api/analyze/status/${jobId}`)
|
|
return response.data
|
|
}
|
|
|
|
export async function deleteJob(jobId: string): Promise<void> {
|
|
await apiClient.delete(`/api/analyze/job/${jobId}`)
|
|
}
|
|
|
|
// Audio
|
|
export function getStreamUrl(trackId: string): string {
|
|
return `${API_BASE_URL}/api/audio/stream/${trackId}`
|
|
}
|
|
|
|
export function getDownloadUrl(trackId: string): string {
|
|
return `${API_BASE_URL}/api/audio/download/${trackId}`
|
|
}
|
|
|
|
export async function getWaveform(trackId: string, numPeaks: number = 800): Promise<WaveformData> {
|
|
const response = await apiClient.get(`/api/audio/waveform/${trackId}`, {
|
|
params: { num_peaks: numPeaks },
|
|
})
|
|
return response.data
|
|
}
|
|
|
|
// Stats
|
|
export async function getStats(): Promise<Stats> {
|
|
const response = await apiClient.get('/api/stats')
|
|
return response.data
|
|
}
|
|
|
|
// Health
|
|
export async function healthCheck(): Promise<{ status: string }> {
|
|
const response = await apiClient.get('/health')
|
|
return response.data
|
|
}
|
|
|
|
export default apiClient
|