YOAT Lab
14 · Module 5 — Mise en ligne

Mettre en ligne avec Vercel

Du dépôt GitHub à l'URL publique en 10 minutes.
HTTPS, CI/CD, preview deployments inclus.

4 minutesGitHub + VercelHTTPS automatique
§01 · Pourquoi Vercel

Le déploiement sans configuration

Vercel est la plateforme de déploiement la plus simple pour les applications Next.js, React, Vue et de manière générale toute application JavaScript moderne. Push sur GitHub, déploiement automatique. URL publique. HTTPS. Preview deployments sur chaque pull request. Le tout gratuit pour les projets personnels et petits projets pro.

Le bon outil pour cette stack

Vercel est créée par les auteurs de Next.js. L'intégration est parfaite. Sur d'autres plateformes (Heroku, Railway, AWS), un projet Next.js demande des ajustements. Sur Vercel, ça marche sans configuration.

§02 · Pré-requis

Deux comptes reliés

Compte GitHub

Hébergement du code

Votre projet doit être sur GitHub (ou GitLab, Bitbucket). C'est Vercel qui clone le dépôt et le déploie à chaque push.

Compte Vercel

Déploiement

À créer sur vercel.com. Se connecter avec son compte GitHub pour lier les deux automatiquement et éviter un compte de plus à gérer.

§03 · Procédure de déploiement

Cinq étapes concrètes

1.
Pousser le projet sur GitHub. Si ce n'est pas encore fait : créer un dépôt sur github.com (privé recommandé), git remote add origin ..., git push -u origin main.
2.
Se connecter sur vercel.com avec GitHub. Vercel lit automatiquement la liste de vos dépôts. Pas besoin de configurer quoi que ce soit pour cette étape.
3.
Cliquer Import sur votre projet. Vercel détecte automatiquement le framework (Next.js, Vite, etc.) et propose la configuration adaptée. Dans 95 % des cas, accepter les valeurs par défaut.
4.
Ajouter les variables d'environnement. Section Environment Variables : reproduire le contenu de votre .env local. C'est là que vont vos clés Supabase, vos clés API, etc.
5.
Cliquer Deploy. Vercel clone, installe les dépendances, build, déploie. 2 à 5 minutes selon la taille du projet. URL publique disponible à la fin.
§04 · Démo — le dashboard Vercel

Un commit, un déploiement

1

URL Vercel automatique

Premier déploiement → URL nom-projet.vercel.app en HTTPS. Gratuit.

2

Domaine personnalisé

Settings → Domains. Vercel certifie en HTTPS automatiquement.

3

Preview deployments

Chaque PR a sa propre URL unique. Idéal pour faire valider une fonctionnalité.

4

Rollback en 1 clic

Un déploiement casse ? Bouton « Promote to production » sur n'importe quel build antérieur.

▲ Vercel / eric-alain / dashboard-yoat éric@yoat-lab.fr ▾ dashboard-yoat Ready github.com/eric-alain/dashboard-yoat https://dashboard-yoat.vercel.app ↗ Visit https://app.yoat-lab.fr 🔒 HTTPS Production Deployments Analytics Logs Storage Settings Recent deployments ▲ Ajout export CSV pipeline Production ✓ Ready a3f8b2c · main · pushed by éric · il y a 5 min Build : 1m 24s · Functions : 4 · Domaines : dashboard-yoat.vercel.app, app.yoat-lab.fr ↗ Visit 🔀 PR #47 — Vue kanban filtres Preview ✓ Ready f7e2a1d · feat/kanban-filters · pushed by sophie-m · il y a 32 min dashboard-yoat-git-feat-kanban-filters-eric-alain.vercel.app ↗ Preview ▲ Refactor Filter component Previous b8c3e5f · main · il y a 1 j ✨ Ce que Vercel fait pour vous → HTTPS auto avec certificat Let's Encrypt → CDN mondial sur 30+ régions → Rollback en 1 clic sur n'importe quel déploiement → Preview par PR · une URL unique par feature branch → Logs + Analytics en temps réel → Functions serverless sans config → Edge cache automatique sur les routes statiques
§05 · Ce que vous obtenez automatiquement

Sans rien faire de plus

URL publique

votre-projet.vercel.app

Domaine généré automatiquement. Accessible immédiatement. Vous pouvez le partager.

HTTPS

Certificat gratuit, automatique

Pas de configuration Let's Encrypt à faire. HTTPS dès le premier déploiement.

Déploiement continu

Push = déploiement

À chaque git push sur la branche main, Vercel relance le build et déploie. Pas de FTP, pas de CI/CD à configurer.

Preview deployments

Une URL par branche

Chaque pull request a sa propre URL de prévisualisation. Idéal pour faire valider une fonctionnalité avant merge.

§06 · Domaine personnalisé

Votre nom au lieu de vercel.app

Vercel.app convient pour le développement et les démos internes. Pour un projet client ou un service public, on veut son propre domaine.

1.
Acheter le domaine. OVH, Gandi, Namecheap. Comptez 10 à 20 € par an pour un .fr ou .com. Cabinet PEDETTI peut centraliser les achats domaines pour ses clients.
2.
Ajouter le domaine dans Vercel. Settings → Domains → Add Domain. Saisir le nom du domaine. Vercel affiche les enregistrements DNS à configurer chez votre registrar.
3.
Configurer le DNS chez OVH/Gandi/etc. Ajouter un enregistrement A ou CNAME selon les instructions Vercel. Propagation : 5 minutes à 1 heure typiquement.
4.
Vercel détecte et certifie. Une fois le DNS propagé, HTTPS est généré automatiquement. Votre domaine personnalisé est en ligne.
Fin · Leçon 14 acquise

Cap sur la leçon 15

Votre application est en ligne, en HTTPS, avec déploiement continu. La leçon suivante connecte Claude à Power BI via MCP — pour les profils analystes data et contrôleurs.

Leçon suivante → 15 · Configurer MCP Power BI
Quiz · Validation des acquis

Quiz · Mettre en ligne avec Vercel

8 questions · une seule bonne réponse par question · vous pouvez recommencer autant de fois que nécessaire.

1 / 8
Question à choix multiple

Pourquoi Vercel est-il particulièrement adapté à un projet Next.js ?

Score : 0 / 8
Cliquez sur lecture pour démarrer.
§00 · Intro 0:00 / 4:00 Voix activée