Déploiement
Déploiement • Chapitre 4 : Déploiement d'une application frontend

Configuration de la commande de build

Comprenez le rôle capital de la commande de compilation transmise à votre hébergeur cloud : cycle d'exécution dans le conteneur distant, gestion de la mémoire Node.js et chaînage des étapes de vérification.

⚙️
Build Command

L'instruction shell exécutée par le conteneur d'intégration pour générer les fichiers de production (ex. npm run build).

📦
npm ci Amont

Avant la commande de build, la plateforme installe toujours automatiquement les dépendances selon package-lock.json.

🧠
Gestion de la RAM

Résolution des erreurs fatales de mémoire (OOM) via la variable NODE_OPTIONS="--max-old-space-size=4096".

🔗
Chaînage Sécurisé

Possibilité d'exécuter des tests ou linters avant le build : npm run test:ci && npm run build.

cloud-build-lifecycle.log
[Cloud Builder] Initializing build container (Linux Ubuntu 22.04 LTS)...
[Cloud Builder] Node.js version detected: v20.12.2
[Cloud Builder] Cloning repository from GitHub (commit 7a93f1)...
[Cloud Builder] Executing dependency install: npm ci
added 842 packages in 12.4s

[Cloud Builder] Executing configured Build Command: npm run build
> mon-projet@1.0.0 build
> tsc -b && vite build

vite v5.2.0 building for production...
✓ 482 modules transformed.
dist/index.html                   0.82 kB │ gzip:  0.42 kB
dist/assets/index-7a2e81.css      9.41 kB │ gzip:  2.70 kB
dist/assets/index-b10c92.js     172.50 kB │ gzip: 52.80 kB
✓ built in 1.48s

[Cloud Builder] Build completed successfully with exit code 0.
[Cloud Builder] Publishing output directory: dist/

Dans les Coulisses de la Commande de Build

1. Le Contrat entre Votre Projet et le Cloud

Quand vous poussez votre code sur GitHub, l'hébergeur (Vercel, Netlify, Render) ne dispose que de vos fichiers sources. Il doit exécuter lui-même la compilation :

🔄 Les 4 étapes successives exécutées par l'hébergeur :
  1. Provisionnement : Démarrage d'un conteneur éphémère avec la version de Node.js spécifiée dans votre package.json ou .nvmrc.
  2. Installation stricte : Exécution de npm ci pour installer les versions exactes du fichier verrouillé package-lock.json.
  3. Exécution de la commande : Lancement de la Build Command configurée. Si la commande renvoie un code d'erreur différent de 0, le déploiement s'interrompt immédiatement.
  4. Déploiement des artefacts : Téléversement exclusif des fichiers générés dans le Publish Directory vers le réseau CDN. Le conteneur de build est ensuite détruit.

2. Les 3 Causes Fréquentes d'Échec de la Commande de Build

1. Rigueur TypeScript

En local, votre éditeur signale parfois des erreurs de type sans bloquer. Mais en production, tsc stoppe net le build dès la moindre incohérence de type.

2. Variables Manquantes

Si un composant lit process.env.VITE_API_URL et que la variable n'a pas été déclarée dans le dashboard de l'hébergeur, le build peut planter lors de la validation.

3. Erreur Mémoire (OOM)

Sur les très gros projets, Node.js sature la limite par défaut de 1,4 Go de RAM. Solution : ajouter la variable d'environnement NODE_OPTIONS="--max-old-space-size=4096".

3. Chaîner et Personnaliser vos Commandes

Vous pouvez personnaliser la commande de build pour imposer des vérifications de qualité avant de valider la mise en production :

# Exécuter les linters puis compiler uniquement si zéro avertissement
npm run lint && npm run build
# Générer d'abord un schéma GraphQL ou un client Prisma avant le build React
npx prisma generate && npm run build

Guide des Commandes de Build Standard par Écosystème

Technologie / FrameworkCommande de Build RecommandéeDossier de Sortie Produit
Vite (React, Vue, Svelte)npm run build (exécute vite build)dist/
Create React App (CRA)npm run build (exécute react-scripts build)build/
Angular CLIng build --configuration productiondist/<projet>/browser/
Astro (Statique)npm run build (exécute astro build)dist/
Next.js (Export Statique)npm run build (avec output: 'export')out/