ng-implementation/devops

Documentation des fichiers Docker pour lancer la webapp et l'API Streamlit

Ce dossier contient les fichiers nécessaires pour construire et lancer deux services via Docker :

• Frontend Angular (service frontend)
• Backend Streamlit (service streamlit)

Les Dockerfiles attendent une arborescence suivante relativement à ce dossier devops/ :

• ./frontend/ contient l’application Angular et ses package.json
• ./streamlit/ contient l’application Streamlit, requirements.txt et app.py

1) docker-compose.yml

Orchestre le lancement des services :

• Service frontend (port hôte 4200 → conteneur 4200)
• Service streamlit (port hôte 8501 → conteneur 8501)

Commandes de base :

# Construire les images et démarrer en arrière-plan
docker compose up -d --build

# Voir les logs des deux services
docker compose logs -f

# Arrêter les services
docker compose down

2) frontend-dockerfile.yml (Angular)

Image basée sur node:24 qui :

• installe les dépendances npm à partir de package*.json
• construit l’application (npm run build -- --configuration=production)
• sert le build avec serve sur le port 4200

Attendus côté projet :

• dossier frontend/ avec package.json, code Angular, et un build générant dist/

Accès :

• Application disponible sur http://localhost:4200

Notes :

• Ce Dockerfile sert la version buildée (statique). Pour du hot-reload en dev, prévoir un autre service (ex. ng serve) ou un mapping de volumes.

3) streamlit-dockerfile.yml (Streamlit)

Image basée sur python:3.11 qui :

• installe les dépendances via requirements.txt
• lance l’appli avec streamlit run app.py --server.port=8501 --server.address=0.0.0.0

Attendus côté projet :

• dossier streamlit/ avec requirements.txt et app.py

Accès :

• Application disponible sur http://localhost:8501

4) Variables d’environnement et volumes (optionnel)

Si vous avez besoin de configurer des variables ou des volumes, ajoutez-les dans docker-compose.yml, par exemple :

services:
  frontend:
    environment:
      - NODE_ENV=production
    volumes:
      - ./frontend/dist:/app/dist:ro
  streamlit:
    environment:
      - STREAMLIT_ENV=production
    volumes:
      - ./streamlit:/app:ro

Adaptez selon vos besoins (mode lecture/écriture, fichiers de config, secrets via .env).

5) Dépannage

• Vérifiez que les dossiers ./frontend et ./streamlit existent bien au même niveau que docker-compose.yml.
• Assurez-vous que frontend/package.json contient les scripts et dépendances nécessaires au build.
• Assurez-vous que streamlit/requirements.txt liste toutes les dépendances Python requises et que app.py existe.
• Si un port est déjà utilisé, changez les ports exposés dans docker-compose.yml.
• Pour reconstruire proprement après des changements majeurs : docker compose build --no-cache.

6) Résumé des ports et conteneurs

• frontend → conteneur frontend-app → http://localhost:4200
• streamlit → conteneur streamlit-app → http://localhost:8501