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.
HTML, CSS et JavaScript compilés (Angular, React, Vue), distribués mondialement via un CDN sans aucune logique serveur.
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.
Moteur SQL (MySQL, PostgreSQL) ou NoSQL (MongoDB), accessible exclusivement depuis le réseau privé du backend.
Le frontend ne connaît jamais les identifiants de la base : toute transaction transite obligatoirement par l'API.
Sélectionnez une situation opérationnelle pour analyser comment une anomalie sur l'un des tiers impacte l'ensemble de la chaîne :
Reçoit le bundle rapidement, requêtes API 200 OK.
Traite les requêtes, authentifie les JWT et interroge la BD.
Connexion active sur le port 3306, temps de requête < 5ms.
Tout est optimal. Aucun incident à déplorer.
# ==============================================================================
# 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: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.
Validation & SanitisationLe 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.
Économie de RessourcesCette séparation permet d'adapter la puissance matérielle de chaque couche à ses besoins réels :
| Couche | Technologies Typiques | Lieu d'Exécution | Exposition Internet | Mode de Déploiement |
|---|---|---|---|---|
| 1. Frontend | Angular, React, Vue, HTML/CSS/JS | Navigateur client de l'utilisateur | Publique (Port 443 CDN) | Netlify, Vercel, Cloudflare Pages, S3/CloudFront |
| 2. Backend | Node.js, Express, PHP Laravel, NestJS | Serveur applicatif distant | Publique restreinte (/api) | VPS Linux (PM2/Nginx), Render, Railway, Docker |
| 3. Base de Données | MySQL, PostgreSQL, MongoDB, Redis | Serveur de persistance dédié | PRIVÉE STRICTE (Fermée au web) | Réseau privé VPC, DBaaS Managé (Supabase, Neon, AWS RDS) |