Déploiement
Déploiement • Chapitre 10 : Déploiement avec Git et GitHub

Connexion du dépôt à une plateforme d'hébergement

Les plateformes modernes (Vercel, Netlify, Render) s'intègrent directement à GitHub via des applications OAuth. Découvrez comment autoriser l'accès, configurer les webhooks et sécuriser les permissions accordées à vos hébergeurs.

🤝
GitHub App OAuth

Protocole sécurisé déléguant l'accès à vos dépôts sans jamais divulguer vos mots de passe.

🎯
Dépôts Sélectifs

N'autorisez l'hébergeur qu'à accéder au dépôt spécifique concerné par la livraison.

⚡
Écoute Webhooks

GitHub informe l'hébergeur en temps réel (150 ms) à chaque push ou création de Pull Request.

🔑
Variables Liées

Synchronisation des secrets de production directement dans l'interface de l'hébergeur.

github-webhook-payload.json
// Exemple de notification Webhook envoyée par GitHub à Vercel/Netlify lors d'un Push :
{
  "event": "push",
  "repository": {
    "name": "learnweb-app",
    "full_name": "organisation/learnweb-app",
    "private": true,
    "clone_url": "https://github.com/organisation/learnweb-app.git"
  },
  "ref": "refs/heads/main",
  "head_commit": {
    "id": "7f3a9bc4123de4568901234567890abcdef12345",
    "message": "fix: correct payment webhook signature verification",
    "author": { "name": "Lead Dev", "email": "dev@learnweb.com" }
  },
  "pusher": { "name": "lead-dev" }
}
// ✅ L'hébergeur valide la signature HMAC SHA-256 du webhook et démarre le Build immédiatement !

Guide Approfondi & Architecture Système

1. Comment Fonctionne la Magie du Déploiement Cloud ?

Lorsque vous cliquez sur « Import Git Repository » sur Vercel ou Netlify :
  1. Handshake OAuth : Vous autorisez l'application GitHub officielle de la plateforme.
  2. Création d'un Webhook : GitHub enregistre une URL d'écoute (ex: https://api.vercel.com/v1/integrations/github/webhook).
  3. Clé de déploiement automatique : L'hébergeur génère un token éphémère lui permettant de cloner le dépôt dans un conteneur éphémère pour exécuter npm run build.

2. Sécurité : Principe du Moindre Privilège

Lorsque GitHub vous demande : « Which repositories do you want to access? » :

Choisissez impérativement « Only select repositories » au lieu de « All repositories ». Si la plateforme d'hébergement subit un incident de sécurité, seuls les dépôts autorisés seront exposés, vos autres projets d'entreprise restant totalement à l'abri.

Tableau Comparatif : Intégration GitHub selon la Plateforme

PlateformeType d'IntégrationTemps de DétectionGénération de Preview URLs
VercelGitHub App native< 1 secondeOui, pour chaque branche et chaque Pull Request
NetlifyGitHub App / Webhook< 1 secondeOui, avec formulaires de commentaires collaboratifs
Render / RailwayGitHub App< 2 secondesOui, avec base de données éphémère en option
VPS Manuel (Git Hook)Script post-receive SSHImmédiatNon, nécessite une configuration Nginx sur mesure