Module 5 — Mise en ligne

Mettre en ligne avec Vercel

Capsule 4 min Type pratique Modalité e-learning Niveau maîtrise

Objectif opérationnel

À l'issue de cette leçon, l'application du stagiaire est en ligne et accessible publiquement, avec un déploiement automatique à chaque push GitHub et un environnement de prévisualisation par branche.

§ 01

Pourquoi Vercel

Vercel est une plateforme d'hébergement spécialisée dans les applications web modernes : Next.js (qu'elle a créé), React, Vue, et autres frameworks compatibles. Trois raisons d'en faire le défaut :

Déploiement en moins de 5 minutes

De « code sur ma machine » à « URL publique fonctionnelle » : 3 à 5 minutes la première fois, 30 secondes pour les suivantes.

Intégration continue native

Chaque push sur GitHub déclenche automatiquement un build. Pas de pipeline CI à configurer manuellement.

Plan gratuit suffisant pour MVP

Suffisant pour un usage personnel ou un projet confidentiel. Les plans payants restent abordables et facturent à l'usage réel.

HTTPS et domaines automatiques

La plateforme prend en charge automatiquement les certificats HTTPS, les noms de domaine personnalisés, et les rollbacks en un clic.

§ 02

Le workflow type

Le déploiement Vercel suit toujours le même cycle. Une fois en place, vous n'y pensez plus.

# Le cycle complet :

  Code modifié dans VS Code
    ↓
  git commit + git push
    ↓
  Vercel détecte le push
    ↓
  Build automatique (2 à 4 min)
    ↓
  URL preview pour la branche : branche.projet.vercel.app
    ↓
  Test sur l'URL preview
    ↓
  Merge sur main (Pull Request validée)
    ↓
  Déploiement production : projet.vercel.app

Chaque branche Git a son propre environnement de prévisualisation. Ça permet de tester une feature avant fusion sans toucher à la production. C'est un confort qui change la cadence de développement.

§ 03

Premier déploiement — procédure en 5 étapes

Si ça plante en prod alors que ça marche en local

C'est presque toujours une variable d'environnement manquante ou mal nommée. Première chose à vérifier dans Project Settings → Environment Variables. Comparez ligne par ligne avec votre .env local.

Prérequis : projet déjà sur GitHub. Si ce n'est pas fait : créer un dépôt GitHub (privé ou public), git remote add origin, git push -u origin main.
Sur vercel.com, cliquer Sign up. Choisir Continue with GitHub. Autoriser l'application Vercel à accéder à vos dépôts. C'est la méthode la plus simple pour la suite — vos dépôts apparaîtront automatiquement.
Sur le dashboard Vercel, cliquer Add New → Project. Sélectionner le projet à déployer dans la liste. Vercel détecte automatiquement le framework (Next.js, Vite, React, etc.) et propose la commande de build. Vérifier qu'elle est correcte.
Étape critique : configurer les variables d'environnement avant de cliquer Deploy. Section Environment Variables. Copier le contenu de votre .env local, en remplaçant les valeurs locales par les valeurs de production (URL Supabase de prod, clés de prod, etc.). Cocher les environnements concernés (Production, Preview, Development).
Cliquer Deploy. Le premier build prend 2 à 4 minutes. Suivre les logs en temps réel (utile en cas d'erreur). À la fin, vous obtenez une URL projet.vercel.app. Tester la page d'accueil, la connexion, les opérations principales.

§ 04

Trois environnements distincts

Vercel distingue trois environnements, chacun pouvant avoir ses propres secrets :

Production

La branche main. C'est ce que vos utilisateurs réels voient. Base de données de production, clés API réelles, monitoring activé.

Preview

Toutes les autres branches. Idéalement une base de test ou de staging, pas la base de prod. Vous testez en conditions proches sans risquer les vraies données.

Development

Utilisé par vercel dev en local pour simuler l'environnement Vercel sur votre machine. Rarement utilisé en pratique — on garde un .env local classique.

§ 05

Domaine personnalisé

L'URL projet.vercel.app fonctionne mais n'est pas très professionnelle. Pour un nom de domaine personnalisé :

Dans le dashboard Vercel : Settings → Domains → Add
Entrer votre nom de domaine (acheté chez OVH, Gandi, Cloudflare Registrar, etc.)
Suivre les instructions DNS qui apparaissent — généralement ajout d'un enregistrement A ou CNAME chez votre registrar
Attendre la propagation DNS (5 minutes à 2 heures selon le registrar)
Vercel gère le certificat HTTPS automatiquement une fois le DNS pointé. Pas de manipulation supplémentaire

Exercice — appropriation

Mettre en ligne votre projet de référence

Déployez votre projet de référence sur Vercel. Suivez la procédure complète en 5 étapes. Ajoutez ensuite une modification mineure (un texte, une couleur, un libellé), faites-la passer par une branche dédiée, vérifiez l'URL de prévisualisation Vercel, puis fusionnez en production. Mesurez le temps total de la modification au déploiement en production. Ce temps est votre indicateur de cadence — il devrait converger sous 10 minutes pour une modification simple.

Cet exercice est à conserver dans votre dossier de stagiaire. Il n'est pas évalué mais il est tracé.

Sources officielles consultées

vercel.com site officiel, inscription et dashboard
vercel.com/docs documentation officielle, frameworks supportés
vercel.com/pricing plans tarifaires et limites par plan

Votre projet est en ligne avec déploiement automatique depuis GitHub et environnements preview/production séparés ?