Mettre en ligne (Vercel)
À l'issue de cette leçon, le stagiaire déploie son application sur Vercel, configure ses variables d'environnement de production, et lie son dépôt GitHub pour les déploiements automatiques.
Pourquoi Vercel
Vercel est une plateforme d'hébergement spécialisée dans les applications web modernes (Next.js, React, Vue, et autres frameworks compatibles). Trois raisons d'en faire le défaut pour un projet de formation ou un MVP : déploiement en moins de cinq minutes, intégration continue automatique depuis GitHub, plan gratuit suffisant pour un usage personnel ou un MVP confidentiel.
Au-delà du gratuit, les plans payants restent abordables et facturent à l'usage réel. La plateforme prend en charge automatiquement les certificats HTTPS, les noms de domaine personnalisés, et les rollbacks en un clic.
Workflow type
Le déploiement Vercel suit toujours le même cycle :
Code modifié → commit Git → push sur GitHub → Vercel détecte le push → build automatique → URL de prévisualisation pour la branche → fusion sur main → déploiement en production.
Chaque branche Git a son propre environnement de prévisualisation, ce qui permet de tester une feature avant fusion sans toucher à la production. C'est un confort qui change la cadence de développement.
Variables d'environnement
Le passage de .env local aux variables Vercel est l'étape qui rate le plus souvent. Rappel : jamais de secrets dans le code. En local, tout vit dans .env. En production, tout vit dans Project Settings → Environment Variables sur Vercel.
Vercel distingue trois environnements : Production (la branche main), Preview (toutes les autres branches), Development (utilisé par vercel dev en local). Configurez les variables pour chacun selon vos besoins. Pour les secrets différents entre prod et preview (par exemple : base Supabase de test versus prod), c'est ici qu'on les sépare.
Premier déploiement
Comptez quinze minutes en partant d'un projet déjà sur GitHub.
-
Créer un compte Vercel sur vercel.com — l'authentification via GitHub est la plus simple pour la suite.
-
Cliquer sur Add New → Project. Vercel propose la liste de vos dépôts GitHub. Sélectionner le projet à déployer.
-
Vercel détecte automatiquement le framework (Next.js, Vite, etc.) et propose la commande de build. Vérifier qu'elle est correcte.
-
Configurer les variables d'environnement avant le premier build : copier le contenu de votre
.envdans Environment Variables, en remplaçant les valeurs locales par les valeurs de production. Cocher les environnements concernés. -
Lancer le déploiement. Le premier build prend généralement deux à quatre minutes. À la fin, vous obtenez une URL
<projet>.vercel.app. -
Tester l'URL : page d'accueil, connexion, opérations principales. Si quelque chose plante en prod alors que ça marchait en local, c'est presque toujours une variable d'environnement manquante ou mal nommée.
-
Pour un nom de domaine personnalisé : Settings → Domains → Add. Suivre les instructions DNS. Vercel gère le certificat HTTPS automatiquement une fois le DNS pointé.
Déployer le projet
Déployez le projet en cours sur Vercel. Ajoutez ensuite une modification mineure (un texte, une couleur), faites-la passer par une branche dédiée, vérifiez l'URL de prévisualisation, fusionnez. Mesurez le temps total de la modification au déploiement en production.
- vercel.com site officiel Vercel, documentation et tarification
- docs.claude.com documentation produit, chemin précis à vérifier au moment de la consultation
Votre application est en ligne et le déploiement continu fonctionne ?