Déploiement
Déploiement • Chapitre 1 : Introduction au déploiement

Frontend, backend et base de données

L'architecture moderne des applications web repose sur le modèle 3-Tiers (trois couches). Chaque couche possède son propre rôle, ses contraintes matérielles et sa stratégie de déploiement dédiée : le Frontend s'exécute dans le navigateur, le Backend applique la logique métier sur un serveur, et la Base de données garantit la persistance sécurisée des informations.

🎨
Couche Frontend

HTML, CSS et JavaScript compilés (Angular, React, Vue), distribués mondialement via un CDN sans aucune logique serveur.

⚙️
Couche Backend

API REST (Node.js, Express, PHP, Python) exécutant les règles de sécurité, le contrôle d'accès et le traitement des données.

🗄️
Couche Données (DB)

Moteur SQL (MySQL, PostgreSQL) ou NoSQL (MongoDB), accessible exclusivement depuis le réseau privé du backend.

🔒
Sécurité Par cloisonnement

Le frontend ne connaît jamais les identifiants de la base : toute transaction transite obligatoirement par l'API.

Simulateur Interactif : Diagnostic d'Incidents 3-Tiers

Résilience Réseau

Sélectionnez une situation opérationnelle pour analyser comment une anomalie sur l'un des tiers impacte l'ensemble de la chaîne :

💻
1. Frontend SPA
Vercel / Netlify CDN

Reçoit le bundle rapidement, requêtes API 200 OK.

⚙️
2. Backend API
Node.js / Express sur VPS

Traite les requêtes, authentifie les JWT et interroge la BD.

🗄️
3. Base MySQL
Cluster Privé Port 3306

Connexion active sur le port 3306, temps de requête < 5ms.

Action de correction recommandée :

Tout est optimal. Aucun incident à déplorer.

docker-compose.prod.yml : Topologie Isolée des 3 Couches
# ==============================================================================
# FICHIER DOCKER COMPOSE DE PRODUCTION (docker-compose.prod.yml)
# Isole le Frontend, le Backend et la Base de Données dans des réseaux étanches
# ==============================================================================
version: '3.8'

services:
  # 1. Reverse Proxy & Frontend Statique
  reverse-proxy:
    image: nginx:alpine
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - ./frontend/dist:/var/www/frontend:ro
      - ./nginx.conf:/etc/nginx/nginx.conf:ro
    networks:
      - public-network
    depends_on:
      - backend-api

  # 2. Backend API REST (Node.js)
  backend-api:
    build: ./backend
    environment:
      - NODE_ENV=production
      - DATABASE_URL=mysql://app_user:SecureP@ss@database:3306/prod_db
    networks:
      - public-network   # Communique avec Nginx
      - internal-network # Communique avec MySQL
    depends_on:
      - database

  # 3. Base de Données MySQL (ZÉRO port public exposé sur Internet !)
  database:
    image: mysql:8.0
    environment:
      - MYSQL_DATABASE=prod_db
      - MYSQL_USER=app_user
      - MYSQL_PASSWORD=SecureP@ss
      - MYSQL_ROOT_PASSWORD=RootPasswordTresFort
    volumes:
      - db-data:/var/lib/mysql
    networks:
      - internal-network # Totalement invisible depuis l'extérieur

networks:
  public-network:
  internal-network: # Réseau privé étanche

volumes:
  db-data:

Principes Clés de l'Architecture Découplée

1. Pourquoi le Frontend ne doit JAMAIS contacter la Base en Direct Faille Critique

Tout code JavaScript exécuté dans le navigateur est public et inspectable par l'internaute (via F12 / DevTools). Si vous connectiez directement votre frontend Angular ou React à MySQL, la chaîne de connexion (hôte, utilisateur, mot de passe) serait visible dans le bundle. N'importe quel internaute pourrait alors exécuter des requêtes DROP TABLE ou voler l'ensemble des données.

2. Le Rôle de Barrière Protectrice du Backend Validation & Sanitisation

Le backend est l'unique tiers de confiance. Il reçoit les requêtes du frontend, valide les jetons d'authentification (JWT), vérifie que l'utilisateur a le droit d'effectuer l'action (RBAC), assainit les entrées contre les injections SQL et n'exécute que des requêtes préparées strictes sur la base de données.

3. Scalabilité Indépendante des Tiers Économie de Ressources

Cette séparation permet d'adapter la puissance matérielle de chaque couche à ses besoins réels :

  • Frontend : Énormément de requêtes, mais 100% de fichiers statiques mis en cache sur Edge CDN mondial (coût quasi nul).
  • Backend : Puissance CPU et mémoire calibrées pour le traitement logique et le calcul d'API.
  • Base de données : Optimisation poussée des disques NVMe et de la mémoire vive pour accélérer les opérations d'I/O et le cache de requêtes.

Tableau Comparatif des Responsabilités par Couche

CoucheTechnologies TypiquesLieu d'ExécutionExposition InternetMode de Déploiement
1. FrontendAngular, React, Vue, HTML/CSS/JSNavigateur client de l'utilisateurPublique (Port 443 CDN)Netlify, Vercel, Cloudflare Pages, S3/CloudFront
2. BackendNode.js, Express, PHP Laravel, NestJSServeur applicatif distantPublique restreinte (/api)VPS Linux (PM2/Nginx), Render, Railway, Docker
3. Base de DonnéesMySQL, PostgreSQL, MongoDB, RedisServeur de persistance dédiéPRIVÉE STRICTE (Fermée au web)Réseau privé VPC, DBaaS Managé (Supabase, Neon, AWS RDS)