Ship it : déployer sur Vercel, connecter un domaine, DNS et Cloudflare

Vue d'ensemble

C'est la leçon qui transforme un projet local en un vrai site web que n'importe qui peut visiter. Vous connectez votre repo GitHub à Vercel, obtenez une URL en direct en quelques minutes, pointez un domaine à vous dessus et comprenez le DNS et Cloudflare assez bien pour ne plus jamais en avoir peur. Bouclez cela et vous aurez fait ce que tout le cours a promis : bâtir et publier une vraie app avec l'IA.

Ce que vous allez apprendre

Vous déployez depuis votre repo GitHub privé sur Vercel, mettez en place des déploiements automatiques à chaque push, connectez un domaine à vous, comprenez ce que font les DNS records et utilisez Cloudflare pour le DNS, le HTTPS gratuit et une protection de base. Aucune expérience d'hébergement préalable nécessaire.

Prérequis

Un projet poussé dans un repo GitHub privé à la leçon précédente, et un compte Vercel gratuit. La page de fondamentaux sur le DNS approfondit la section domaine, mais cette leçon en explique assez pour vous mettre en ligne. Si vous ne possédez pas encore de domaine, vous pouvez d'abord shipper sur l'URL Vercel gratuite et ajouter un domaine plus tard.

Le problème

Les débutants construisent souvent quelque chose de bon, puis ça meurt sur leur laptop, parce que le déploiement ressemble à un mur de mots inconnus : hosting, DNS, nameservers, SSL, CDN. Alors le projet ne passe jamais en direct et ne reçoit jamais de retour. Cette leçon dissout ce mur en le faisant une fois, dans l'ordre, et en expliquant le jargon dès qu'il apparaît.

Pas à pas : déployer sur Vercel

Vercel est une plateforme d'hébergement bâtie exactement pour cela. La voie la plus lisse est de connecter votre repo GitHub : Vercel le surveille et redéploie automatiquement à chaque push. Vous touchez à peine au terminal.

• Connectez-vous à Vercel avec votre compte GitHub.
• Cliquez sur « Add New Project » et importez votre repository privé - Vercel peut lire les repos privés une fois que vous l'autorisez.
• Vercel détecte automatiquement le framework et les réglages de build ; pour une app Vite ou Next.js standard, vous pouvez accepter les défauts.
• Cliquez sur Deploy. En une ou deux minutes, vous obtenez une URL en direct comme my-first-app.vercel.app, que n'importe qui dans le monde peut ouvrir.

À partir de maintenant, chaque git push sur votre branch main déclenche automatiquement un nouveau déploiement. C'est le workflow moderne : vous construisez localement, poussez, et votre site en direct se met à jour tout seul. Si vous mettez les variables d'environnement (vos secrets) dans le dashboard Vercel plutôt que dans le code, elles restent en sécurité et ne touchent jamais votre repo - la même discipline .env de la dernière leçon, appliquée en production.

Ce que le DNS est réellement

Le DNS, le Domain Name System, est l'annuaire de l'Internet. Il traduit un nom humain comme yoursite.com en l'adresse du serveur qui doit répondre. Quand vous « connectez un domaine », vous ajoutez à cet annuaire des entrées qui disent « pour ce nom, envoie les visiteurs vers Vercel ». Les deux records que vous rencontrez le plus souvent sont un A-record (pointe un domaine vers une adresse IP) et un CNAME (pointe un nom vers un autre nom). C'est honnêtement l'essentiel de ce que vous devez savoir pour shipper.

• A-record : mappe un domaine ou sous-domaine vers une adresse IP numérique.
• CNAME-record : mappe un nom vers un autre nom (par exemple www vers votre cible Vercel).
• Nameservers : décident en premier lieu quelle société tient votre annuaire DNS.
• Propagation : les changements DNS peuvent prendre de quelques minutes à quelques heures pour se répandre mondialement - pas cassé, juste lent.

Pas à pas : connecter un domaine à vous

Dans Vercel, ouvrez votre projet, allez dans les réglages de domaine et ajoutez votre domaine. Vercel vous dit alors exactement quels DNS records créer chez votre fournisseur de domaine. Vous copiez ces records dans les réglages DNS de votre fournisseur, sauvegardez et attendez la propagation. Vercel vérifie la connexion et émet automatiquement un certificat HTTPS gratuit, pour que votre site charge en sécurité avec le cadenas.

• Ajoutez votre domaine dans les réglages de projet Vercel.
• Copiez les A-records et/ou CNAME-records que Vercel vous donne.
• Ajoutez-les chez votre fournisseur DNS et sauvegardez.
• Attendez la vérification, puis visitez votre domaine - il sert désormais votre site en direct via HTTPS.

Où Cloudflare entre en jeu

Cloudflare est un endroit populaire pour gérer le DNS, et il fait plus que tenir des records. Pointez les nameservers de votre domaine vers Cloudflare et vous obtenez un dashboard DNS propre, du HTTPS gratuit, un content delivery network global qui fait charger votre site plus vite dans le monde entier, et une protection de base contre les attaques et les bots. Pour la plupart des builders, le schéma est : domaine enregistré quelque part, DNS géré chez Cloudflare, site hébergé sur Vercel, avec les records Cloudflare pointant vers la cible Vercel. Vous n'avez pas besoin de chaque fonctionnalité Cloudflare le premier jour - DNS gratuit, HTTPS et CDN sont déjà une raison suffisante de l'utiliser.

Erreurs fréquentes

Les courantes : supposer que le site est cassé alors que le DNS n'a simplement pas encore propagé (attendez, puis revérifiez) ; éditer les mauvais DNS records ou laisser traîner des périmés qui entrent en conflit ; oublier de mettre les variables d'environnement dans Vercel, si bien que le site en direct manque de ses secrets ; et proxifier via Cloudflare de façon que le HTTPS soit traité en double. Si quelque chose semble faux, vérifiez la propagation et les variables d'environnement avant de supposer le pire.

ROI business

C'est au moment de shipper que la valeur apparaît enfin. Un projet sur votre laptop ne rapporte rien ; un site en direct peut être montré à des clients, indexé par Google, recommandé par l'IA et itéré avec de vrais retours. Les déploiements automatiques veulent dire que shipper une amélioration vous coûte un seul git push, si bien que la boucle de l'idée à la mise à jour en direct prend des minutes, pas des jours. Cette vitesse est tout l'avantage concurrentiel de cette façon de construire.

Checklist

Vous avez terminé le Cours 1 quand tout ceci est vrai. Prenez un instant - c'est un vrai jalon.

• Votre projet est déployé sur Vercel et en direct sous une URL publique.
• Chaque git push redéploie automatiquement le site.
• Les secrets vivent dans les variables d'environnement Vercel, pas dans le repo.
• Un domaine à vous (ou l'URL Vercel) charge votre site via HTTPS.

Ressources

Gardez les dashboards Vercel et Cloudflare en favoris et appuyez-vous sur la page de fondamentaux DNS chaque fois que les records vous embrouillent. La checklist de déploiement Vercel dans la bibliothèque de ressources consigne ces étapes pour la prochaine fois. Vous avez maintenant parcouru toute la boucle : idée, construction, version control, ship.

Votre mission

Déployez votre projet sur Vercel et confirmez qu'il charge sous une URL publique. Si vous possédez un domaine, connectez-le via le DNS et confirmez que le HTTPS fonctionne. Faites ensuite un petit changement en local, committez, poussez et regardez Vercel redéployer automatiquement. Félicitations : vous avez bâti et publié un vrai site web avec l'IA.

Prochaine leçon

Vous savez désormais mener une idée jusqu'à un site en direct. Le Cours 2, Claude Code Mastery, transforme l'agent, d'un outil utile en un workflow fiable de power user : règles de projet, skills réutilisables, quality gates automatisés, MCP et systèmes multi-agents.