W03

Netlify

CD depuis Git, netlify.toml, redirects SPA, functions serverless et deploy previews.

🌿 1. Présentation de Netlify

Netlify est une plateforme de déploiement continu (CD) avec un Edge Network mondial. Le tier gratuit est très généreux pour les projets personnels.

Déploiement continu depuis Git (GitHub, GitLab, Bitbucket)
Preview URL automatique pour chaque pull request
Serverless Functions (Node.js)
Formulaires sans backend
Edge Network mondial, CDN intégré
SSL/HTTPS automatique via Let's Encrypt

🔗 2. Connexion Git → Auto-deploy

En liant un dépôt GitHub à Netlify, chaque push déclenche automatiquement un build et un déploiement.

Créer un compte sur netlify.com
Cliquer "Add new site" → "Import from Git"
Autoriser l'accès à GitHub
Sélectionner le dépôt
Configurer : Build command (npm run build) + Publish directory (dist)

Netlify détecte automatiquement les frameworks courants (React, Vue, Vite, Astro). Il configure la commande de build et le dossier de publication sans intervention.

💻 3. Netlify CLI

# Installation
npm install -g netlify-cli

# Authentification (ouvre le navigateur)
netlify login

# Lier le dossier courant à un site Netlify
netlify init

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

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

# Ouvrir le site dans le navigateur
netlify open

# Statut du site
netlify status

⚙️ 4. netlify.toml

Le fichier netlify.toml à la racine du projet configure Netlify de façon déclarative.

[build]
  command = "npm run build"
  publish = "dist"
  functions = "netlify/functions"

[build.environment]
  NODE_VERSION = "20"

# Redirection SPA — INDISPENSABLE pour React/Vue Router
[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

# Cache 1 an pour les assets versionnés
[[headers]]
  for = "/assets/*"
    [headers.values]
    Cache-Control = "public, max-age=31536000, immutable"

# Config différente par contexte
[context.production]
  command = "npm run build"

[context.deploy-preview]
  command = "npm run build:staging"

La redirection from = "/*" avec status = 200 est critique pour les SPA. Sans elle, un rafraîchissement de page sur une route comme /about donnera une erreur 404.

👁️ 5. Branch Deploys & Deploy Previews

Netlify génère automatiquement une URL unique pour chaque pull request et chaque branche.

Production : monsite.netlify.app (branche main)
Branch deploy : develop--monsite.netlify.app (branche develop)
Deploy preview : deploy-preview-42--monsite.netlify.app (PR #42)

Les Deploy Previews permettent de partager un aperçu avec les clients ou l'équipe avant de merger une PR. L'URL est visible directement dans le commentaire GitHub.

⚡ 6. Netlify Functions

Les Netlify Functions sont des fonctions serverless Node.js hébergées automatiquement.

// netlify/functions/hello.js
exports.handler = async (event, context) => {
  return {
    statusCode: 200,
    body: JSON.stringify({ message: 'Hello from Netlify!' })
  };
};

// URL d'accès : /.netlify/functions/hello

# Variables d'environnement via CLI
netlify env:set API_KEY mon-secret
netlify env:list

→ Exercices W03 🔧 Mini-projet W04 : Vercel →