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 · 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.

§05 · 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.

Exercice — appropriation

Sur votre projet de référence : (1) poussez-le sur GitHub si ce n'est pas fait, (2) déployez sur Vercel en suivant les 5 étapes, (3) ajoutez les variables d'environnement correspondant à votre .env local. Notez l'URL publique générée et le temps total entre le début et la première URL accessible.

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