0Pricing
React Academy · Leçon

Déployer sur Vercel : configuration nulle et URL de prévisualisation

Connectez un dépôt GitHub à Vercel, configurez les variables d’environnement et utilisez les déploiements de prévisualisation.

Déployer sur Vercel : configuration nulle et URL de prévisualisation est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 1 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 React Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Academy comprend 4 leçons au total.

Pourquoi Vercel ?

Vercel est la plateforme créée par l’équipe de Next.js. Elle propose un déploiement sans configuration : connectez un dépôt GitHub et Vercel détecte automatiquement le framework, compile l’application et la déploie à chaque envoi.

Connecter un dépôt

Importez un dépôt GitHub/GitLab/Bitbucket depuis le tableau de bord Vercel. Vercel détecte le framework (Next.js, Vite, CRA) et configure automatiquement les paramètres de compilation.

Paramètres du projet

Vercel détecte automatiquement : le framework, la commande de compilation (npm run build), le dossier de sortie (.next, dist) et la commande d’installation (npm install). Modifiez ces valeurs dans les paramètres du projet si nécessaire.

Variables d’environnement

Ajoutez des variables d’environnement dans le tableau de bord Vercel, sous Project Settings → Environment Variables. Définissez des valeurs différentes pour les environnements Production, Preview et Development.

# In Vercel dashboard:
# NEXT_PUBLIC_API_URL = https://api.example.com  (Production)
# NEXT_PUBLIC_API_URL = https://api-staging.example.com  (Preview)

# In code:
const apiUrl = process.env.NEXT_PUBLIC_API_URL;

Déploiements de prévisualisation

Chaque envoi d’une branche Git et chaque demande de fusion obtiennent une URL de prévisualisation unique (par exemple, myapp-git-feature-xyz.vercel.app). Partagez-la pour la revue avant la fusion : aucun environnement de préproduction manuel n’est nécessaire.

Domaines personnalisés

Ajoutez un domaine personnalisé dans le tableau de bord Vercel. Dirigez votre DNS (enregistrement A ou CNAME) vers les adresses IP de Vercel, qui gère automatiquement la délivrance du certificat SSL.

Configuration vercel.json

Affinez le comportement du déploiement : redirections, en-têtes, réécritures et sélection de la région.

// vercel.json
{
  "redirects": [
    { "source": "/old-blog/:path*", "destination": "/blog/:path*", "permanent": true }
  ],
  "headers": [
    {
      "source": "/api/(.*)",
      "headers": [{ "key": "Cache-Control", "value": "no-store" }]
    }
  ],
  "regions": ["iad1"] // deploy edge functions to US East
}

CLI Vercel

Utilisez la CLI Vercel pour déployer depuis le terminal, récupérer localement les variables d’environnement et gérer les projets.

# Install:
npm install -g vercel

# Link project and deploy:
vercel

# Pull env variables for local dev:
vercel env pull .env.local

# Deploy to production:
vercel --prod

Fonctions sans serveur

Les fichiers dans api/ (routeur Pages) ou app/api/*/route.ts (routeur App) sont automatiquement déployés comme des fonctions sans serveur sur l’environnement edge ou Node.js de Vercel.

Hooks de déploiement

Créez des hooks de déploiement (URL de webhook) pour déclencher des déploiements depuis des services externes, ce qui est utile lorsque des modifications du contenu d’un CMS doivent entraîner un nouveau déploiement du site.

# Trigger a deploy from a CMS webhook:
curl -X POST https://api.vercel.com/v1/integrations/deploy/prj_xxx/yyy

# In Sanity Studio:
// Call this URL on document publish

Déploiement d’un dépôt monolithique

Dans un dépôt monolithique Nx ou Turborepo, définissez le dossier racine de Vercel sur le dossier de l’application concernée et configurez la commande de compilation pour utiliser le gestionnaire de tâches du dépôt monolithique.

# Vercel project settings:
# Root Directory: apps/web
# Build Command: npx nx build web --prod
# Output Directory: apps/web/.next

Vérification rapide

Qu’est-ce qu’un déploiement de prévisualisation Vercel ?

Récapitulatif

Connectez un dépôt Git à Vercel pour bénéficier de déploiements sans configuration. Chaque branche obtient une URL de prévisualisation. Gérez les variables d’environnement par environnement dans le tableau de bord, utilisez vercel.json pour les redirections et les en-têtes, et la CLI Vercel pour les déploiements et la récupération des variables depuis le terminal.

Questions Fréquemment Posées

La leçon « Déployer sur Vercel : configuration nulle et URL de prévisualisation » est-elle gratuite ?

Oui — le texte complet de « Déployer sur Vercel : configuration nulle et URL de prévisualisation » 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 React Academy, passe à CoddyKit PRO. Le cours React Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Déployer sur Vercel : configuration nulle et URL de prévisualisation » ?

Connectez un dépôt GitHub à Vercel, configurez les variables d’environnement et utilisez les déploiements de prévisualisation. Tu pratiques React 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 React Academy ?

Aucune expérience préalable n'est requise. React 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 1 sur 4.

Combien de temps prend la leçon « Déployer sur Vercel : configuration nulle et URL de prévisualisation » ?

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 React Academy ?

Oui. Chaque leçon React 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

  1. Déployer sur Vercel : configuration nulle et URL de prévisualisation
  2. Héberger une SPA React sur AWS S3 et CloudFront
  3. Conteneuriser une application React/Next.js
  4. CI/CD GitHub Actions pour React
← Retour à React Academy