Déploiement
Déploiement • Chapitre 12 : Déploiement des applications full-stack

Connexion du frontend à la base de données via le backend

Une application frontend ne doit JAMAIS se connecter directement à une base de données en production. Comprenez les failles de sécurité catastrophiques que cela créerait et le rôle fondamental du backend comme intermédiaire de confiance et arbitre métier.

🛑
Zéro Driver SQL Client

Le code JavaScript d'un navigateur ne doit jamais embarquer d'identifiants de BDD.

🛡️
Backend Gardien du Temple

Vérifie l'identité du client (JWT), valide ses permissions et assainit chaque requête.

🌊
Connection Pooling

Le backend gère un réservoir de 10 à 50 connexions SQL réutilisables au lieu de saturer le serveur.

🔒
Réseau Interne Privé

Le port de la BDD (3306/5432) est hermétiquement clos à tout trafic internet extérieur.

secure-three-tier-architecture.txt
# Pourquoi le frontend ne doit JAMAIS interroger la base directement :
[ ❌ SCÉNARIO INTERDIT & CATASTROPHIQUE ]
Navigateur Client ──► (Port 3306 exposé sur Internet) ──► Base MySQL
Dangers :
1. Le mot de passe root/admin de la BDD est visible en clair dans le code JS !
2. N'importe quel internaute peut ouvrir F12 et taper : DROP TABLE users;
3. 10 000 visiteurs ouvrent 10 000 connexions TCP : la base plante en 2 secondes.

[ ✅ ARCHITECTURE 3-TIERS PROFESSIONNELLE SÉCURISÉE ]
Navigateur Client
       │ HTTPS POST /api/v1/orders (Bearer JWT_Token)
       ▼
Backend Express / Laravel (Zone Sécurisée)
       ├─► 1. Vérification cryptographique du JWT (Utilisateur authentifié ?)
       ├─► 2. Validation du rôle (A-t-il le droit de passer cette commande ?)
       ├─► 3. Sanitisation des entrées (Protection contre injections SQL)
       ▼
Base de Données Locale (127.0.0.1:3306 - Inaccessible depuis Internet)
       │ Répond au Backend avec les données filtrées
       ▼
Backend renvoie un JSON épuré au Frontend (sans mots de passe ni colonnes secrètes)

Guide Approfondi & Architecture Système

1. L'Analogie du Guichet de Banque et du Coffre-Fort

Pour expliquer simplement à vos clients ou collègues :
  • Le Navigateur Client : C'est le client qui entre dans l'agence bancaire.
  • Le Backend API : C'est le guichetier derrière une vitre blindée. Il demande une pièce d'identité (Token JWT), vérifie que le solde est suffisant et remplit un formulaire officiel.
  • La Base de Données : C'est la salle des coffres au sous-sol. Aucun client n'a le droit de descendre seul dans la salle des coffres avec son trousseau de clés !

2. Le Rôle Crucial du Connection Pool

Si 5 000 utilisateurs arrivent sur votre site en même temps :

Si le frontend ouvrait une connexion directe, MySQL refuserait la 151e connexion (erreur Too many connections).

Grâce au backend et à son Pool de Connexions (ex: 20 connexions ouvertes en continu), les requêtes des 5 000 utilisateurs font la queue et sont traitées en quelques millisecondes par rotation. La base ne sature jamais !

Tableau Récapitulatif : Les Rôles Étanches des 3 Couches

CoucheCe qu'elle Sait FaireCe qu'elle ne Doit JAMAIS Faire
Frontend (Angular/React/Vue)Afficher l'UI, capter les clics, guider l'expérience utilisateurContenir des mots de passe de BDD ou des requêtes SQL directes
Backend (Node/PHP/Python)Authentifier, valider la logique métier, requêter la BDD avec ORMStocker des données d'état utilisateur en mémoire vive non partagée
Base de Données (MySQL/Postgres)Persister les données avec intégrité ACID, indexer, exécuter les requêtesÊtre exposée sur une adresse IP publique sans pare-feu