Fix API URL configuration pour production
All checks were successful
Build and Push Docker Images / Build Frontend Image (push) Successful in 3m59s

Problème: Le frontend utilisait localhost:8001 au lieu de l'URL de production
car NEXT_PUBLIC_API_URL était évalué au build time et non au runtime.

Changements:
1. Frontend (api.ts):
   - Remplace apiClient statique par getApiClient() dynamique
   - Chaque appel crée une instance axios avec l'URL runtime
   - getStreamUrl/getDownloadUrl utilisent getApiUrl() au lieu de API_BASE_URL
   - Supprime l'export default apiClient (non utilisé)

2. Docker Compose:
   - Configure NEXT_PUBLIC_API_URL=https://api.audioclassifier.benoitsz.com
   - Simplifie la config (retire le fallback)

Le runtime config (window.__RUNTIME_CONFIG__) fonctionne maintenant correctement
car il est évalué à chaque appel API côté client.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-12-24 10:12:38 +01:00
parent 3b236d6af4
commit 36652ea2cc
2 changed files with 23 additions and 26 deletions

View File

@@ -22,28 +22,29 @@ function getApiUrl(): string {
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',
},
})
// Create axios instance dynamically to use runtime config
function getApiClient() {
return axios.create({
baseURL: getApiUrl(),
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 })
const response = await getApiClient().get('/api/tracks', { params })
return response.data
}
export async function getTrack(id: string): Promise<Track> {
const response = await apiClient.get(`/api/tracks/${id}`)
const response = await getApiClient().get(`/api/tracks/${id}`)
return response.data
}
export async function deleteTrack(id: string): Promise<void> {
await apiClient.delete(`/api/tracks/${id}`)
await getApiClient().delete(`/api/tracks/${id}`)
}
// Search
@@ -51,7 +52,7 @@ export async function searchTracks(
query: string,
filters?: { genre?: string; mood?: string; limit?: number }
): Promise<SearchResponse> {
const response = await apiClient.get('/api/search', {
const response = await getApiClient().get('/api/search', {
params: { q: query, ...filters },
})
return response.data
@@ -59,7 +60,7 @@ export async function searchTracks(
// Similar
export async function getSimilarTracks(id: string, limit: number = 10): Promise<SimilarTracksResponse> {
const response = await apiClient.get(`/api/tracks/${id}/similar`, {
const response = await getApiClient().get(`/api/tracks/${id}/similar`, {
params: { limit },
})
return response.data
@@ -67,30 +68,30 @@ export async function getSimilarTracks(id: string, limit: number = 10): Promise<
// Analysis
export async function analyzeFolder(request: AnalyzeFolderRequest): Promise<{ job_id: string }> {
const response = await apiClient.post('/api/analyze/folder', request)
const response = await getApiClient().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}`)
const response = await getApiClient().get(`/api/analyze/status/${jobId}`)
return response.data
}
export async function deleteJob(jobId: string): Promise<void> {
await apiClient.delete(`/api/analyze/job/${jobId}`)
await getApiClient().delete(`/api/analyze/job/${jobId}`)
}
// Audio
export function getStreamUrl(trackId: string): string {
return `${API_BASE_URL}/api/audio/stream/${trackId}`
return `${getApiUrl()}/api/audio/stream/${trackId}`
}
export function getDownloadUrl(trackId: string): string {
return `${API_BASE_URL}/api/audio/download/${trackId}`
return `${getApiUrl()}/api/audio/download/${trackId}`
}
export async function getWaveform(trackId: string, numPeaks: number = 800): Promise<WaveformData> {
const response = await apiClient.get(`/api/audio/waveform/${trackId}`, {
const response = await getApiClient().get(`/api/audio/waveform/${trackId}`, {
params: { num_peaks: numPeaks },
})
return response.data
@@ -98,14 +99,12 @@ export async function getWaveform(trackId: string, numPeaks: number = 800): Prom
// Stats
export async function getStats(): Promise<Stats> {
const response = await apiClient.get('/api/stats')
const response = await getApiClient().get('/api/stats')
return response.data
}
// Health
export async function healthCheck(): Promise<{ status: string }> {
const response = await apiClient.get('/health')
const response = await getApiClient().get('/health')
return response.data
}
export default apiClient