Vue d'ensemble de l'Architecture
Diagramme Global
┌─────────────────────────────────┐
│ INTERNET │
└────────────────┬────────────────┘
│
┌────────────────▼────────────────┐
│ TRAEFIK (Reverse Proxy) │
│ • SSL/TLS (Let's Encrypt) │
│ • Routing par domaine │
└────────────────┬────────────────┘
│
┌────────────────────────┬───────────────┼───────────────┬─────────────────────┐
│ │ │ │ │
▼ ▼ ▼ ▼ ▼
┌───────────────────┐ ┌───────────────────┐ ┌───────────────────┐ ┌───────────────────────┐
│ Landing Page │ │ Frontend │ │ Video Generator │ │ Supabase │
│ momentscollectifs │ │ Angular │ │ Node.js │ │ │
│ .fr │ │ │ │ │ │ • PostgreSQL │
├───────────────────┤ │ app.moments │ │ api.moments │ │ • Auth │
│ │ │ collectifs.fr │ │ collectifs.fr │ │ • Storage │
│ • HTML/CSS/JS │ ├───────────────────┤ ├───────────────────┤ │ • Edge Functions │
│ • SEO optimisé │ │ │ │ │ │ • Realtime │
│ • Nginx │ │ • Angular 17 │ │ • Express │ │ │
│ │ │ • NGXS │ │ • FFmpeg │ │ xxx.supabase.co │
│ Port: 80/443 │ │ • Tailwind │ │ • Puppeteer │ │ │
│ │ │ │ │ │ └───────────┬───────────┘
└───────────────────┘ │ Port: 4200 │ │ Port: 5001 │ │
└─────────┬─────────┘ └─────────┬──────────┘ │
│ │ │
│ │ │
└───────────────────────┼──────────────────────────┘
│
┌─ ──────────▼───────────┐
│ Communication │
│ │
│ • REST APIs │
│ • Supabase JS SDK │
│ • Webhooks │
│ • Signed URLs │
└───────────────────────┘
Composants
Landing Page
Rôle: Point d'entrée marketing et SEO
- URL: momentscollectifs.fr
- Tech: HTML statique, CSS, JavaScript vanilla
- Serveur: Nginx dans Docker
- Fonction: Conversion visiteurs → utilisateurs app
Frontend Angular
Rôle: Application principale SPA/SSR
- URL: app.momentscollectifs.fr
- Tech: Angular 17, NGXS, Tailwind CSS
- Rendu: SSR (Server-Side Rendering)
- Fonctions:
- Authentification utilisateurs
- Création/gestion d'événements
- Soumission de messages
- Interface d'administration
Video Generator
Rôle: Microservice de génération vidéo
- URL: api.momentscollectifs.fr
- Tech: Node.js, Express, FFmpeg, Puppeteer
- Fonctions:
- Rendu HTML vers images
- Composition vidéo
- Export multi-formats (desktop/mobile)
Supabase Backend
Rôle: Backend-as-a-Service
- Composants:
- PostgreSQL: Base de données relationnelle
- Auth: Authentification et gestion utilisateurs
- Storage: Stockage fichiers (vidéos)
- Edge Functions: Logique serverless (Deno)
- Realtime: Subscriptions temps réel
Flux de Données
Création d'Événement
Soumission Vidéo
Génération Présentation
Déploiement
Environnement Production
┌─────────────────────────────────────────────────────────────────────┐
│ SERVEUR VPS │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────────────────────────┐ │
│ │ DOCKER ENGINE │ │
│ ├─────────────────────────────────────────────────────────────┤ │
│ │ │ │
│ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │
│ │ │ Traefik │ │ Landing │ │ Frontend │ │Generator │ │ │
│ │ │ │ │ Page │ │ Angular │ │ Video │ │ │
│ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │ │
│ │ │ │ │ │ │ │
│ │ └─────────────┴─────────────┴─────────────┘ │ │
│ │ │ │ │
│ │ Docker Network │ │
│ └─────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────┘
│
│ HTTPS
▼
┌───────────────────────────────┐
│ SUPABASE CLOUD │
│ (Database, Auth, Storage) │
└───────────────────────────────┘
Réseau Docker
networks:
web:
external: true # Réseau Traefik
internal:
internal: true # Communication inter-services
Labels Traefik
# Exemple pour le frontend
labels:
- "traefik.enable=true"
- "traefik.http.routers.frontend.rule=Host(`app.momentscollectifs.fr`)"
- "traefik.http.routers.frontend.entrypoints=websecure"
- "traefik.http.routers.frontend.tls.certresolver=letsencrypt"
- "traefik.http.services.frontend.loadbalancer.server.port=4000"
Scalabilité
Actuelle (Monolithe)
- Tous les services sur un seul serveur
- Adapté au trafic actuel
- Simple à maintenir
Future (si besoin)
┌─────────────┐
│ Load │
│ Balancer │
└──────┬──────┘
│
┌─────────────────┼─────────────────┐
│ │ │
┌────▼────┐ ┌────▼────┐ ┌────▼────┐
│Frontend │ │Frontend │ │Frontend │
│ #1 │ │ #2 │ │ #3 │
└─────────┘ └─────────┘ └─────────┘
│ │ │
└─────────────────┼─────────────────┘
│
┌──────▼──────┐
│ Supabase │
│ (Managed) │
└─────────────┘
Évolutions possibles :
- Réplication horizontale des frontends
- Queue de messages pour la génération vidéo
- CDN pour les assets statiques
- Supabase Pro pour plus de capacité