Déploiement
Déploiement • Chapitre 3 : Déploiement d'un site web statique

Configuration du dossier de publication

Le dossier de publication (Publish Directory ou Output Directory) est le répertoire précis dans lequel l'hébergeur cloud va chercher les fichiers finaux à distribuer. Une mauvaise configuration de ce chemin est la cause numéro 1 d'écrans blancs ou d'erreurs 404 lors d'un déploiement.

🎯
DocumentRoot

Le dossier qui devient la racine / du site web. Il doit impérativement contenir index.html à sa racine.

🛡️
Étanchéité Source

Ne publiez jamais la racine du projet . sous peine d'exposer vos fichiers TypeScript, tests et configurations privées.

🅰️
Le Piège Angular /browser

Angular 17+ génère les fichiers dans dist/nom-projet/browser. Si vous oubliez /browser, le site plantera.

⚡
Build Déterministe

Le dossier est systématiquement vidé puis recréé à neuf par npm run build avant chaque déploiement.

inspection-output.sh
# 1. Compilation de production
$ npm run build

# 2. Inspection du dossier généré (Le fichier index.html DOIT être au premier niveau !)
$ ls -la dist/
# total 32
# -rw-r--r--  1 dev staff   640 11 oct 14:22 index.html    <-- ✅ Présent à la racine !
# -rw-r--r--  1 dev staff 14502 11 oct 14:22 main.a8f9b2.js
# -rw-r--r--  1 dev staff  3410 11 oct 14:22 styles.7e2c91.css
# drwxr-xr-x  4 dev staff   128 11 oct 14:22 assets/

# ⚠️ SI index.html est dans dist/browser ou dist/mon-app/browser,
# votre Publish Directory doit impérativement être configuré sur : dist/browser !

Guide de Configuration selon votre Framework

1. La Règle d'Or : Ne jamais publier la racine du dépôt

Certains développeurs novices configurent le dossier de publication sur . (la racine du dépôt Git) en pensant simplifier le processus. C'est une vulnérabilité de sécurité majeure :

  • Les internautes peuvent télécharger votre code source non minifié, vos fichiers de test et vos commentaires internes.
  • Le dossier node_modules/ peut être interrogé à distance.
  • Les fichiers cachés comme .git/config risquent d'être exposés publiquement.

2. Le Piège spécifique d'Angular 17+ (Application Builder)

Depuis Angular 17, l'Application Builder basé sur esbuild sépare par défaut les fichiers client des fichiers serveur pour préparer le SSR :

❌ Erreur courante

Dossier de publication configuré sur :

dist/mon-app

Résultat : Le serveur cherche index.html dans dist/mon-app/ mais ne le trouve pas car il est dans dist/mon-app/browser/. Résultat : Page Not Found 404.

✅ Configuration exacte

Dossier de publication configuré sur :

dist/mon-app/browser

Résultat : Le serveur pointe exactement sur le dossier contenant index.html. Votre application Angular se lance instantanément !

3. Où configurer le dossier sur votre plateforme ?

  • Sur Netlify : Dans l'interface web (Build settings → Publish directory) ou dans netlify.toml via publish = "dist".
  • Sur Vercel : Dans les paramètres du projet (Project Settings → Build & Output Settings → Output Directory).
  • Sur GitHub Actions : Dans l'étape de déploiement via le paramètre publish_dir: ./dist.

Tableau Comparatif : Dossier de Sortie par Framework

Framework / StackCommande de BuildDossier de Publication Requis
HTML / CSS / JS PurAucune (Fichiers bruts). (Racine) ou public
Vite (React, Vue, Svelte)npm run builddist
Angular (v17+)ng builddist/nom-projet/browser
Astro (Statique)astro builddist
Next.js (Export Statique)next buildout