W01

Fondamentaux du Déploiement Web

Comprendre ce que signifie déployer, les types d'hébergement, et les outils CLI essentiels.

🚀 1. Qu'est-ce que déployer ?

Déployer une application, c'est la rendre accessible sur Internet. Pendant le développement, votre app tourne sur localhost. Le déploiement consiste à la placer sur un serveur accessible publiquement.

Les environnements

Development (local) — votre machine, npm run dev, hot reload
Staging / Preview — copie de production pour tester avant publication
Production (prod) — le vrai site accessible aux utilisateurs

Le cycle de déploiement

# Cycle typique
Source code → Build → Test → Deploy → Monitor

git push → npm run build → npm test → vercel --prod

Le build transforme vos fichiers source (JSX, TypeScript, SCSS) en fichiers optimisés pour le navigateur (HTML, JS minifié, CSS). Le dossier résultant (dist/ ou build/) est ce qu'on déploie.

🏠 2. Types d'hébergement

Type	Exemples	Usage	Prix
Statique	GitHub Pages, Netlify, Vercel	SPA, sites statiques, SSG	Gratuit
Mutualisé	Hostinger Shared	PHP, WordPress, sites simples	~3€/mois
VPS	Hostinger VPS, DigitalOcean	Apps Node.js, API, contrôle total	5-20€/mois
PaaS	Railway, Heroku, Render	Apps Node.js sans serveur à gérer	Gratuit+

SSG vs SPA vs SSR

SSG (Static Site Generation) — pages générées au build, ultra-rapide (Astro, Next.js statique)
SPA (Single Page App) — JS côté client, une seule page HTML (React, Vue)
SSR (Server Side Rendering) — pages générées à la demande côté serveur (Next.js, Nuxt)

Pour un projet React/Vite standard, vous déployez une SPA : un seul index.html + des assets JS/CSS. Tout hébergement statique suffit.

⚙️ 3. Processus de build

Avant de déployer, il faut construire votre application en mode production.

# Générer le dossier de production
npm run build

# Pour un projet Vite — génère dist/
# Pour Create React App — génère build/

# Vérifier le résultat
ls dist/
# → index.html, assets/ (JS, CSS avec hash)

Ce que fait le build Vite

Compile TypeScript / JSX → JavaScript standard
Bundle tous les imports en quelques fichiers optimisés
Minifie le JS et le CSS
Ajoute des hash dans les noms de fichiers pour le cache (main.abc123.js)
Génère un index.html avec les bonnes références

Ne commitez jamais le dossier dist/ dans Git ! Ajoutez-le dans .gitignore. Les plateformes de déploiement rebuild à chaque push.

🔑 4. Variables d'environnement

Les variables d'environnement permettent de configurer votre app différemment selon l'environnement (dev, prod) sans modifier le code.

# .env (développement)
VITE_API_URL=http://localhost:3000
VITE_APP_NAME=Mon App Dev

# .env.production (production)
VITE_API_URL=https://api.monsite.fr
VITE_APP_NAME=Mon App

Sécurité : Ajoutez .env et .env.local dans .gitignore ! Ne commitez jamais de secrets. Créez un .env.example avec les clés vides pour guider les autres développeurs.

💻 5. CLI des plateformes

Vercel CLI

# Installation globale
npm install -g vercel

# Authentification
vercel login

# Déploiement preview
vercel

# Déploiement production
vercel --prod

# Lister les déploiements
vercel ls

Netlify CLI

# Installation globale
npm install -g netlify-cli

# Authentification
netlify login

# Déploiement preview
netlify deploy --dir=dist

# Déploiement production
netlify deploy --dir=dist --prod

gh-pages (GitHub Pages via npm)

# Installation locale
npm install -D gh-pages

# package.json scripts
"predeploy": "npm run build",
"deploy": "gh-pages -d dist"

# Lancer le déploiement
npm run deploy

✅ 6. Bonnes pratiques

.gitignore — toujours inclure node_modules/, dist/, .env, .env.local
.env.example — committé dans Git avec les clés vides (jamais les valeurs)
Scripts npm — predeploy s'exécute automatiquement avant deploy
CI/CD — automatisez les déploiements via GitHub Actions pour éviter les erreurs humaines
Preview avant prod — testez toujours sur une URL de preview avant de pousser en production

# .gitignore minimal
node_modules/
dist/
build/
.env
.env.local
.env.*.local

→ Exercices W01 🔧 Mini-projet W02 : GitHub Pages →