Start here

Arrows to move, enter to open, escape to close.

Ship/Now

Mettre en ligne · 3 min

Déployer

Pousser vers Vercel, séparer réellement préproduction et production, et savoir laquelle des deux un webhook vient de toucher.

Premier déploiement

Poussez vers un dépôt

Vercel importe depuis GitHub, GitLab ou Bitbucket. Il détecte Next.js ; il n'y a rien à configurer pour le build.

Ajoutez les variables d'environnement

Chaque valeur de .env, plus NEXT_PUBLIC_SITE_URL réglé sur le vrai domaine. Voir Variables d'environnement pour le piège dans la façon de les marquer.

Déployez, puis pointez Stripe dessus

L'endpoint du webhook est https://votredomaine.com/api/webhooks/stripe. Copiez le secret de signature qu'il vous donne dans STRIPE_WEBHOOK_SECRET et redéployez, parce qu'un secret de webhook absent au démarrage est un webhook qui renvoie 503.

Deux environnements

La séparation qui fonctionne avec le moins de cérémonie :

BrancheCible VercelClésDomaine
mainProductionStripe live, Supabase livevotredomaine.com
developPreviewStripe teststaging.votredomaine.com

Vercel isole les variables d'environnement par cible, donc le même nom de variable porte la clé de test en preview et la clé live en production. Rien dans le code ne teste l'environnement, et c'est le but : le code ne peut pas se tromper.

Le prouver

Ne supposez rien. Prenez une charge utile de webhook signée en live et postez-la sur la préproduction. Elle doit renvoyer 400, parce que la préproduction vérifie contre un autre secret de signature. Si elle renvoie 200, les deux environnements partagent un secret et une vente réelle est traitée par votre déploiement de préproduction.

curl -i https://staging.votredomaine.com/api/webhooks/stripe \
  -H "stripe-signature: t=...,v1=..." \
  -d @payload-live.json
# on attend 400

Ailleurs que sur Vercel

Rien ici n'est spécifique à Vercel sauf le runtime d'image sociale et les variables par cible. npm run build && npm run start tourne partout où Node 20 tourne. Sur Fly ou Railway, la séparation des environnements est à votre charge, en général sous forme de deux applications.

Le coût à zéro utilisateur

Vercel Hobby, Supabase gratuit, Resend gratuit, Stripe à la vente. Rien n'est facturé tant que personne n'achète, et la première limite gratuite que vous dépasserez est le quota d'envoi mensuel de Resend, bien après que ce soit devenu un problème agréable.

Une erreur ou un manque sur cette page ? Dites-le-nous.