Learn

Comprendre Vercel

Vercel

Ce qu'est Vercel, ce que ce n'est pas, et le modèle deploy-on-push.

Vercel est une plateforme de déploiement pensée pour les projets frontend et serverless. Elle résout un problème simple : passer du code sur ton ordinateur à un site accessible dans le monde entier, sans avoir à toucher un serveur. Cette leçon te donne les bases conceptuelles avant de déployer ton premier projet.

Ce qu'est Vercel (et ce que ce n'est pas)

Vercel est une plateforme de déploiement et d'hébergement spécialisée dans les applications web. Tu connectes un dépôt Git, et Vercel se charge du reste : construction du projet, mise en ligne, distribution mondiale.

Ce que Vercel n'est pas :

  • Pas un VPS (Virtual Private Server) : tu ne gères aucun système d'exploitation, aucun service en arrière-plan.
  • Pas un cloud généraliste comme AWS, GCP ou Azure : Vercel ne propose pas de bases de données managées natives, pas de machines virtuelles, pas de stockage objet au sens large.
  • Pas un simple hébergement statique : Vercel exécute aussi du code côté serveur via ses fonctions.

En pratique, Vercel remplace la combinaison classique "serveur + Docker + nginx + pipeline CI/CD" pour la grande majorité des projets frontend modernes.

Le modèle deploy-on-push

Le fonctionnement central de Vercel repose sur une règle simple : chaque push Git déclenche un déploiement automatique.

Voici ce qui se passe concrètement :

  1. Tu connectes ton dépôt GitHub, GitLab ou Bitbucket à un projet Vercel.
  2. À chaque commit ou pull request, Vercel lance un Build : détection du framework, installation des dépendances, compilation.
  3. Le résultat est un Deployment : une version immuable de ton site, accessible via une URL unique générée automatiquement.
  4. Si le push cible ta branche principale (souvent main), le déploiement devient Production et est servi sur ton domaine.
  5. Si c'est une autre branche ou une pull request, le déploiement est un Preview : une URL isolée, parfaite pour tester avant de fusionner.

Chaque déploiement est indépendant et conservé. Tu peux revenir à n'importe quelle version passée en quelques secondes depuis le tableau de bord.

Les briques clés de la plateforme

Vercel est composé de plusieurs briques qui travaillent ensemble :

  • Builds : la phase de compilation. Vercel détecte ton framework automatiquement et sait comment construire le projet sans configuration manuelle dans la plupart des cas.
  • Preview Deployments : chaque branche ou pull request obtient sa propre URL de prévisualisation, accessible à ton équipe avant toute mise en production.
  • Edge Network / CDN : une fois déployé, ton site est distribué sur un réseau mondial de serveurs. Les visiteurs reçoivent les fichiers depuis le serveur le plus proche d'eux géographiquement.
  • Serverless Functions : du code backend (routes API, logique serveur) qui s'exécute à la demande, sans serveur permanent à gérer. Elles s'arrêtent quand personne ne les appelle et redémarrent en quelques millisecondes.
  • Edge Functions : similaires aux Serverless Functions, mais elles s'exécutent au plus près de l'utilisateur sur le réseau Edge, avec des temps de démarrage encore plus courts. Idéales pour les redirections, la géolocalisation, ou la personnalisation légère.

Ce que ça change concrètement

Avant Vercel (ou une plateforme similaire), déployer un projet frontend impliquait souvent : configurer un serveur, installer un reverse proxy (nginx ou Apache), écrire un pipeline CI/CD, gérer les certificats SSL, et maintenir tout ça dans le temps.

Avec Vercel :

  • Le certificat SSL est automatique et renouvelé sans intervention.
  • Le pipeline CI/CD est intégré (le push suffit).
  • La scalabilité est gérée par la plateforme : si ton site reçoit soudainement 10 000 visiteurs, tu ne fais rien de plus.
  • Le rollback est immédiat : en un clic, tu remets en production un déploiement précédent.

La leçon suivante te guide pas à pas pour connecter ton premier projet Git et déclencher ton premier déploiement.

Sources

À côté

À côté · gitQu'est-ce que Git
À côté · fullstackDNS, hébergement, déploiement

Coche les étapes pour débloquer la suite

Retour au cours