diff --git a/.env.example b/.env.example index 1ae717a..cea872a 100644 --- a/.env.example +++ b/.env.example @@ -19,4 +19,6 @@ AUDIO_LIBRARY_PATH=/path/to/your/audio/library # Frontend # API URL accessed by the browser (use port 8001 since backend is mapped to 8001) +# For production on a remote server, set this to your server's public URL +# Example: NEXT_PUBLIC_API_URL=http://yourserver.com:8001 NEXT_PUBLIC_API_URL=http://localhost:8001 diff --git a/.gitea/workflows/docker.yml b/.gitea/workflows/docker.yml index fc2dcdc..6e4b273 100644 --- a/.gitea/workflows/docker.yml +++ b/.gitea/workflows/docker.yml @@ -13,95 +13,6 @@ env: IMAGE_FRONTEND: audio-classifier-frontend jobs: - build-backend: - name: Build Backend Image - runs-on: ubuntu-latest - - steps: - - name: Checkout code - uses: actions/checkout@v4 - with: - fetch-depth: 0 - - - name: Download Essentia models - run: | - mkdir -p backend/models - cd backend/models - - # Download models from Essentia - echo "Downloading Essentia models..." - - # Embedding model (18 MB) - curl -L -o discogs-effnet-bs64-1.pb \ - https://essentia.upf.edu/models/feature-extractors/discogs-effnet/discogs-effnet-bs64-1.pb - - # Genre classifier (2 MB) - curl -L -o genre_discogs400-discogs-effnet-1.pb \ - https://essentia.upf.edu/models/classification-heads/genre_discogs400/genre_discogs400-discogs-effnet-1.pb - - # Genre metadata - curl -L -o genre_discogs400-discogs-effnet-1.json \ - https://essentia.upf.edu/models/classification-heads/genre_discogs400/genre_discogs400-discogs-effnet-1.json - - # Mood classifier (2.7 MB) - curl -L -o mtg_jamendo_moodtheme-discogs-effnet-1.pb \ - https://essentia.upf.edu/models/classification-heads/mtg_jamendo_moodtheme/mtg_jamendo_moodtheme-discogs-effnet-1.pb - - # Instrument classifier (2.6 MB) - curl -L -o mtg_jamendo_instrument-discogs-effnet-1.pb \ - https://essentia.upf.edu/models/classification-heads/mtg_jamendo_instrument/mtg_jamendo_instrument-discogs-effnet-1.pb - - # Genre classifier alternative (2.7 MB) - curl -L -o mtg_jamendo_genre-discogs-effnet-1.pb \ - https://essentia.upf.edu/models/classification-heads/mtg_jamendo_genre/mtg_jamendo_genre-discogs-effnet-1.pb - - ls -lh - echo "Models downloaded successfully!" - - - name: Set up Docker Buildx - uses: docker/setup-buildx-action@v3 - - - name: Login to Gitea Container Registry - uses: docker/login-action@v3 - with: - registry: ${{ env.REGISTRY }} - username: ${{ gitea.actor }} - password: ${{ secrets.REGISTRY_TOKEN }} - - - name: Determine version - id: version - run: | - if [[ "${{ gitea.ref }}" == refs/tags/v* ]]; then - echo "VERSION=${GITEA_REF#refs/tags/}" >> $GITHUB_OUTPUT - else - echo "VERSION=dev-$(git rev-parse --short HEAD)" >> $GITHUB_OUTPUT - fi - - - name: Extract metadata - id: meta - uses: docker/metadata-action@v5 - with: - images: ${{ env.REGISTRY }}/${{ gitea.repository_owner }}/${{ env.IMAGE_BACKEND }} - tags: | - type=semver,pattern={{version}} - type=semver,pattern={{major}}.{{minor}} - type=raw,value=latest,enable=${{ startsWith(gitea.ref, 'refs/tags/v') }} - type=raw,value=dev,enable=${{ gitea.ref == 'refs/heads/main' }} - type=sha,prefix=dev-,format=short,enable=${{ gitea.ref == 'refs/heads/main' }} - - - name: Build and push backend - uses: docker/build-push-action@v5 - with: - context: . - file: ./backend/Dockerfile - push: true - build-args: | - VERSION=${{ steps.version.outputs.VERSION }} - tags: ${{ steps.meta.outputs.tags }} - labels: ${{ steps.meta.outputs.labels }} - cache-from: type=registry,ref=${{ env.REGISTRY }}/${{ gitea.repository_owner }}/${{ env.IMAGE_BACKEND }}:buildcache - cache-to: type=registry,ref=${{ env.REGISTRY }}/${{ gitea.repository_owner }}/${{ env.IMAGE_BACKEND }}:buildcache,mode=max - build-frontend: name: Build Frontend Image runs-on: ubuntu-latest diff --git a/DEPLOYMENT.md b/DEPLOYMENT.md index bafebd0..188f194 100644 --- a/DEPLOYMENT.md +++ b/DEPLOYMENT.md @@ -204,13 +204,20 @@ cd Audio-Classifier # Chemin vers musique AUDIO_LIBRARY_PATH=/mnt/musique -# Domaine public -CORS_ORIGINS=http://votre-domaine.com,https://votre-domaine.com +# URL publique de l'API (IMPORTANT pour le frontend) +# Cette URL est utilisée par le navigateur pour accéder à l'API +# Remplacer par votre domaine ou IP publique + port 8001 +NEXT_PUBLIC_API_URL=https://votre-serveur.com:8001 + +# Domaine public pour CORS (doit inclure l'URL du frontend) +CORS_ORIGINS=https://votre-domaine.com,https://votre-domaine.com:3000 # Credentials BDD (sécurisés !) POSTGRES_PASSWORD=motdepasse_fort_aleatoire ``` +**Important :** Le frontend utilise maintenant une configuration **runtime**, ce qui signifie que vous pouvez changer `NEXT_PUBLIC_API_URL` dans le fichier `.env` et redémarrer les containers sans avoir à rebuilder les images. + 4. **Démarrer** : ```bash docker-compose up -d diff --git a/docker-compose.yml b/docker-compose.yml index 46b9707..2f0efb9 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -19,7 +19,7 @@ services: restart: unless-stopped backend: - image: git.benoitsz.com/benoit/audio-classifier-backend:latest + image: git.benoitsz.com/benoit/audio-classifier-backend:dev container_name: audio_classifier_api depends_on: postgres: @@ -38,12 +38,12 @@ services: restart: unless-stopped frontend: - image: git.benoitsz.com/benoit/audio-classifier-frontend:latest + image: git.benoitsz.com/benoit/audio-classifier-frontend:dev container_name: audio_classifier_ui environment: - # Use localhost:8001 because the browser (client-side) needs to access the API - # The backend is mapped to port 8001 on the host machine - NEXT_PUBLIC_API_URL: http://localhost:8001 + # In production, set NEXT_PUBLIC_API_URL to your server's public URL + # Example: NEXT_PUBLIC_API_URL=https://yourserver.com:8001 + NEXT_PUBLIC_API_URL: ${NEXT_PUBLIC_API_URL:-http://localhost:8001} ports: - "3000:3000" depends_on: diff --git a/frontend/Dockerfile b/frontend/Dockerfile index 566423f..c866358 100644 --- a/frontend/Dockerfile +++ b/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"] diff --git a/frontend/README.md b/frontend/README.md new file mode 100644 index 0000000..3921471 --- /dev/null +++ b/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 `