Déploiement
Déploiement • Chapitre 14 : Projet pratique final

Déployer un site frontend sur Vercel ou Netlify

Première étape de notre grand projet final : mettez en ligne votre application cliente Angular ou React sur le réseau mondial Vercel en connectant votre dépôt GitHub, en configurant le build de production et en gérant le routage SPA sans erreur 404.

🚀
Import GitHub 1-Click

Détection automatique du framework (Angular/React/Next/Vue) et des scripts de compilation.

⚙️
Build Command & Output

Configuration de 'npm run build' et du dossier de sortie 'dist/mon-projet/browser'.

🔀
Règles vercel.json

Redirection universelle vers index.html pour garantir le rafraîchissement des routes clientes.

🌐
URL HTTPS Immédiate

Attribution automatique d'un sous-domaine .vercel.app sécurisé par certificat SSL mondial.

vercel.json
// Configuration de production vercel.json pour application SPA (Angular / React) :
{
  "version": 2,
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/index.html"
    }
  ],
  "headers": [
    {
      "source": "/assets/(.*)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=31536000, immutable"
        }
      ]
    }
  ]
}
// Déploiement en ligne de commande via Vercel CLI (alternative au dashboard web) :
$ npm i -g vercel
$ vercel --prod
Inspect: https://vercel.com/mon-equipe/learnweb-frontend [1s]
Production: https://learnweb-frontend.vercel.app [18s]
✅ Deployed to 300+ Edge locations globally !

Guide Approfondi & Architecture Système

1. Guide Pas-à-Pas : Le Déploiement sur le Dashboard Vercel

Pour déployer votre frontend en moins de 3 minutes :
  1. Rendez-vous sur vercel.com et connectez-vous avec votre compte GitHub.
  2. Cliquez sur « Add New... > Project » et sélectionnez le dépôt de votre projet.
  3. Dans Build and Output Settings, vérifiez que le framework est bien reconnu. Pour Angular 17/18, le dossier de sortie est généralement dist/nom-du-projet/browser.
  4. Dans la section Environment Variables, ajoutez votre variable d'API : NEXT_PUBLIC_API_URL ou la variable requise par votre projet.
  5. Cliquez sur Deploy : en 25 secondes, votre site est en ligne avec un lien mondial !

2. Pourquoi le fichier vercel.json est Indispensable ?

Sans la règle rewrites :

Si votre visiteur accède directement à https://learnweb.vercel.app/cours/deploiement ou recharge la page, les serveurs de Vercel chercheront un fichier statique à ce chemin précis et renverront une page d'erreur 404 Vercel. La règle de réécriture force le serveur Edge à renvoyer index.html pour laisser le routeur JavaScript interne afficher la page !

Tableau Récapitulatif : Configuration des Dossiers de Sortie Frontend

Framework FrontendCommande de BuildDossier de Sortie (Output Directory)Fichier de Configuration SPA
Angular (v17/v18 Application)ng build (ou npm run build)dist/nom-projet/browservercel.json (rewrites)
React (Vite)npm run builddistvercel.json (rewrites)
Vue.js (Vite)npm run builddistvercel.json (rewrites)
Next.js (App Router)next build.next (géré automatiquement)Intégré nativement sans configuration