Frontend Academy · Leçon

Déployer sur Vercel, Netlify et Cloudflare Pages

Connectez votre dépôt à chaque plateforme, configurez les commandes de compilation et les répertoires de sortie, puis découvrez les déploiements de prévisualisation pour les branches.

Déployer sur Vercel, Netlify et Cloudflare Pages est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.

Les trois plateformes modernes d’hébergement frontend

Vercel, Netlify et Cloudflare Pages sont les principales plateformes pour déployer des applications frontend. Elles proposent toutes : des déploiements basés sur Git, des branches de prévisualisation, des domaines personnalisés, un CDN en périphérie et des fonctions sans serveur. Choisissez-en une et tenez-vous-y.

Vercel — conçu pour Next.js

Créé par l’équipe Next.js. Intégration Next.js de premier ordre : optimisation des images sans configuration, ISR, fonctions en périphérie et Speed Insights. Prend également en charge Vite, Nuxt, Astro et la plupart des frameworks statiques.

Déployer sur Vercel

Connectez un dépôt GitHub/GitLab/Bitbucket. Vercel détecte automatiquement le framework, exécute build et déploie l’application.

# Manual deploy (any project):
npm install -g vercel
vercel login
vercel       # preview deploy
vercel --prod  # production deploy

# Or push to main — auto-deploys via Git integration.

Configuration de vercel.json

Remplacez les valeurs par défaut (commandes de compilation, redirections, en-têtes et réécritures).

{
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "framework": "vite",
  "headers": [{
    "source": "/(.*)",
    "headers": [{ "key": "X-Frame-Options", "value": "DENY" }]
  }],
  "redirects": [{ "source": "/old", "destination": "/new", "permanent": true }]
}

Netlify — le pionnier

Netlify a été pionnier des déploiements statiques modernes. Il offre une excellente gestion des formulaires, de l’identité et des analyses. Netlify Functions et Edge Functions permettent d’utiliser des fonctions sans serveur. La prise en charge de Vite, Hugo et Eleventy est excellente.

Déployer sur Netlify

Connectez un dépôt ou faites glisser-déposer un dossier compilé. Configurez le projet via le tableau de bord ou netlify.toml.

# netlify.toml
[build]
  command = "npm run build"
  publish = "dist"

[build.environment]
  NODE_VERSION = "20"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200   # SPA fallback

[[headers]]
  for = "/*"
  [headers.values]
    X-Frame-Options = "DENY"

Netlify CLI

Développement local avec des fonctions sans serveur.

npm install -g netlify-cli
netlify login
netlify init
netlify dev       # local server with functions
netlify deploy    # preview
netlify deploy --prod

Cloudflare Pages

Déploie les applications sur le réseau périphérique mondial de Cloudflare. Pages Functions fournit des fonctions sans serveur sur l’environnement d’exécution Workers. L’offre gratuite est généreuse. La prise en charge d’Astro, Hono et Remix est excellente.

Déployer sur Cloudflare Pages

Connectez un dépôt via le tableau de bord Cloudflare. Vous pouvez aussi utiliser l’interface CLI wrangler.

# Direct upload via wrangler:
npm install -g wrangler
wrangler login
wrangler pages deploy ./dist --project-name=my-site

# Or push to GitHub — auto-deploys.

wrangler.toml pour Pages

Cloudflare Pages utilise wrangler.toml pour la configuration de Workers et des fonctions.

# wrangler.toml
name = "my-site"
compatibility_date = "2024-01-01"
pages_build_output_dir = "dist"

[vars]
API_URL = "https://api.example.com"

[[d1_databases]]
binding = "DB"
database_name = "my-db"
database_id = "..."

Déploiements de prévisualisation

Les trois plateformes créent une URL unique pour chaque branche de PR. Les personnes chargées de la revue peuvent cliquer sur cette URL et tester les modifications de manière isolée. C’est désormais le flux de travail standard des équipes.

Variables d’environnement

Les trois plateformes proposent des variables propres à chaque environnement (production, prévisualisation, développement) via le tableau de bord ou la CLI. Les variables frontend doivent avoir un préfixe (Vite : VITE_, Next : NEXT_PUBLIC_) pour être incluses dans le navigateur.

# Vercel:
vercel env add API_URL production

# Netlify:
netlify env:set API_URL https://api.example.com

# Cloudflare Pages:
wrangler pages secret put API_URL

Domaines personnalisés et SSL

Les trois plateformes gèrent automatiquement les certificats SSL (Let's Encrypt). Dirigez votre enregistrement DNS A/CNAME vers leur cible : elles émettent et renouvellent les certificats. Les domaines personnalisés sont gratuits dans toutes les offres payantes.

Choisir entre les trois plateformes

Vercel : idéal pour Next.js, expérience de développement soignée, légèrement plus cher. Netlify : idéal pour les formulaires et l’identité, écosystème de plugins mature. Cloudflare Pages : meilleures performances en périphérie, coût le plus faible à grande échelle, excellente intégration avec Workers. Les trois plateformes sont excellentes.

Vérification rapide

Quelle est la méthode standard pour créer une URL de prévisualisation déployable pour une demande d’extraction sur Vercel, Netlify ou Cloudflare Pages ?

Récapitulatif : hébergement frontend

Vercel : meilleure intégration avec Next.js. Netlify : formulaires, identité et plugins. Cloudflare Pages : performances en périphérie et coût le plus faible. Les trois plateformes proposent : déploiements automatiques basés sur Git, URL de prévisualisation pour chaque PR, variables d’environnement par environnement, SSL automatique et domaines personnalisés. Configurez-les via le tableau de bord ou le fichier de configuration de la plateforme (vercel.json, netlify.toml, wrangler.toml).

Questions Fréquemment Posées

La leçon « Déployer sur Vercel, Netlify et Cloudflare Pages » est-elle gratuite ?

Oui — le texte complet de « Déployer sur Vercel, Netlify et Cloudflare Pages » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Déployer sur Vercel, Netlify et Cloudflare Pages » ?

Connectez votre dépôt à chaque plateforme, configurez les commandes de compilation et les répertoires de sortie, puis découvrez les déploiements de prévisualisation pour les branches. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Frontend Academy ?

Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « Déployer sur Vercel, Netlify et Cloudflare Pages » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?

Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

GitHub Actions pour le frontend : analyse, tests et compilation
Déployer sur Vercel, Netlify et Cloudflare Pages
Variables d’environnement dans l’intégration continue
Vérifications Lighthouse automatisées

← Retour à Frontend Academy