ScaleRocket/Web
ENFR

Déploiement

Le guide complet pour déployer ScaleRocket en production — Vercel, Supabase, Stripe, Auth, Email, DNS et une checklist complète.

Déploiement

ScaleRocket fonctionne avec trois applications frontend sur Vercel et un backend qui gère toute la logique côté serveur.

Vue d'ensemble de l'architecture :

ApplicationLocalProductionStack
apps/weblocalhost:3000yourdomain.comNext.js (site marketing)
apps/applocalhost:5173app.yourdomain.comVite + React (tableau de bord utilisateur)
apps/opslocalhost:5174admin.yourdomain.comVite + React (panneau d'administration)

Backend : Les Supabase Edge Functions gèrent les webhooks Stripe, le checkout, le portail, l'utilisation des crédits et la suppression de compte. Les webhooks Stripe pointent vers Supabase, pas vers une application hébergée sur Vercel.

Backend : Les fonctions Convex gèrent les webhooks Stripe, le checkout, le portail, l'utilisation des crédits et la suppression de compte. Les webhooks Stripe pointent vers les endpoints HTTP Convex, pas vers une application hébergée sur Vercel.

1. Déployer sur Vercel (3 projets)

Vous avez besoin de trois projets Vercel séparés, tous connectés au même dépôt Git. Chaque projet a son propre répertoire racine et ses propres variables d'environnement.

1a. Site marketing (apps/web)

  1. Allez sur vercel.com/new
  2. Importez votre dépôt Git
  3. Définissez le Root Directory sur apps/web
  4. Définissez le Framework Preset sur Next.js
  5. Définissez la Build Command sur cd ../.. && pnpm turbo build --filter=web
  6. Définissez la Install Command sur cd ../.. && pnpm install
  7. Ajoutez les variables d'environnement (voir le tableau ci-dessous)
  8. Cliquez sur Deploy

Variables d'environnement pour apps/web :

VariableValeurRequis
NEXT_PUBLIC_WEB_URLhttps://yourdomain.comOui
NEXT_PUBLIC_APP_URLhttps://app.yourdomain.comOui
NEXT_PUBLIC_PLAUSIBLE_DOMAINyourdomain.comOptionnel
NEXT_PUBLIC_GA_IDG-XXXXXXXXXXOptionnel
NEXT_PUBLIC_POSTHOG_KEYphc_...Optionnel

Note : Le site marketing n'a PAS besoin de clés Supabase ou Stripe. Il a seulement besoin de connaître les URLs pour pouvoir créer des liens vers le tableau de bord.

1b. Tableau de bord (apps/app)

  1. Créez un autre projet Vercel depuis le même dépôt
  2. Définissez le Root Directory sur apps/app
  3. Définissez le Framework Preset sur Vite
  4. Définissez la Build Command sur cd ../.. && pnpm turbo build --filter=app
  5. Définissez la Install Command sur cd ../.. && pnpm install
  6. Ajoutez les variables d'environnement (voir le tableau ci-dessous)
  7. Cliquez sur Deploy

Variables d'environnement pour apps/app :

VariableValeurRequis
VITE_WEB_URLhttps://yourdomain.comOui
VITE_APP_URLhttps://app.yourdomain.comOui
VITE_SUPABASE_URLhttps://YOUR_PROJECT_REF.supabase.coOui
VITE_SUPABASE_ANON_KEYeyJ... (depuis le tableau de bord Supabase > Settings > API)Oui
VITE_STRIPE_PUBLISHABLE_KEYpk_live_... (depuis le Stripe Dashboard, LIVE mode)Oui
VariableValeurRequis
VITE_WEB_URLhttps://yourdomain.comOui
VITE_APP_URLhttps://app.yourdomain.comOui
VITE_CONVEX_URLhttps://YOUR_DEPLOYMENT.convex.cloudOui
VITE_STRIPE_PUBLISHABLE_KEYpk_live_... (depuis le Stripe Dashboard, LIVE mode)Oui

1c. Panneau d'administration (apps/ops)

  1. Créez un troisième projet Vercel depuis le même dépôt
  2. Définissez le Root Directory sur apps/ops
  3. Définissez le Framework Preset sur Vite
  4. Définissez la Build Command sur cd ../.. && pnpm turbo build --filter=ops
  5. Définissez la Install Command sur cd ../.. && pnpm install
  6. Ajoutez les variables d'environnement (voir le tableau ci-dessous)
  7. Cliquez sur Deploy

Variables d'environnement pour apps/ops :

VariableValeurRequis
VITE_SUPABASE_URLhttps://YOUR_PROJECT_REF.supabase.coOui
VITE_SUPABASE_ANON_KEYeyJ... (même clé anon que apps/app)Oui
VariableValeurRequis
VITE_CONVEX_URLhttps://YOUR_DEPLOYMENT.convex.cloudOui

Astuce : Les trois projets partagent le même dépôt Git. Vercel détecte les changements par répertoire racine et ne reconstruit que l'application concernée.

2. Déployer le backend

Pousser les migrations de base de données

Exécutez ceci depuis la racine de votre projet pour appliquer toutes les migrations à votre base de données Supabase de production :

npx supabase db push

Si vous n'avez pas encore lié votre projet :

npx supabase link --project-ref YOUR_PROJECT_REF

Déployer les Edge Functions

Déployez toutes les Edge Functions en production :

npx supabase functions deploy

Cela déploie chaque fonction dans supabase/functions/ (stripe-webhook, stripe-checkout, stripe-portal, use-credits, delete-account, et toutes les autres).

Pour déployer une seule fonction :

npx supabase functions deploy stripe-webhook

Définir les secrets de production

Les Edge Functions ont besoin de ces secrets pour fonctionner. Définissez-les tous :

npx supabase secrets set STRIPE_SECRET_KEY=sk_live_...
npx supabase secrets set STRIPE_WEBHOOK_SECRET=whsec_...
npx supabase secrets set RESEND_API_KEY=re_...
npx supabase secrets set RESEND_FROM_EMAIL=hello@yourdomain.com
npx supabase secrets set APP_URL=https://app.yourdomain.com
npx supabase secrets set ADMIN_EMAILS=admin@yourdomain.com

Vérifiez que vos secrets sont définis :

npx supabase secrets list

Important : APP_URL est utilisé par les Edge Functions pour la logique CORS et de redirection. Il doit correspondre exactement à votre URL de tableau de bord de production — https://app.yourdomain.com sans barre oblique finale.

Déployer Convex

Déployez votre backend Convex en production :

npx convex deploy

Cela déploie le schéma, toutes les fonctions et les endpoints HTTP en une seule commande.

Définir les variables d'environnement de production

Les fonctions Convex ont besoin de ces variables d'environnement pour fonctionner. Définissez-les toutes :

npx convex env set STRIPE_SECRET_KEY sk_live_...
npx convex env set STRIPE_WEBHOOK_SECRET whsec_...
npx convex env set RESEND_API_KEY re_...
npx convex env set RESEND_FROM_EMAIL hello@yourdomain.com
npx convex env set APP_URL https://app.yourdomain.com
npx convex env set ADMIN_EMAILS admin@yourdomain.com

Vérifiez que vos variables d'environnement sont définies :

npx convex env list

Important : APP_URL est utilisé pour la logique de redirection. Il doit correspondre exactement à votre URL de tableau de bord de production — https://app.yourdomain.com sans barre oblique finale.

3. Configurer Stripe pour la production

Le Stripe test mode et le live mode sont complètement séparés. Les produits, prix et webhooks du test mode ne sont pas transférés au live mode.

Étape par étape :

  1. Passez en LIVE mode dans le Stripe Dashboard (bouton bascule en haut à gauche)

  2. Créez vos produits et prix en live mode. Ils doivent être créés de zéro — ils ne peuvent pas être copiés depuis le test mode.

  3. Copiez les Price IDs live (ex. price_1Abc...) et mettez-les à jour dans :

    packages/config/src/pricing.ts

    Remplacez chaque Price ID de test (price_1Test...) par le Price ID live correspondant.

  4. Créez un endpoint webhook de production :

    • Allez dans Developers > Webhooks dans le Stripe Dashboard (assurez-vous d'être en LIVE mode)
    • Cliquez sur Add endpoint
    • Définissez l'Endpoint URL sur :
https://YOUR_PROJECT_REF.supabase.co/functions/v1/stripe-webhook
https://YOUR_DEPLOYMENT.convex.site/stripe-webhook
  • Sélectionnez ces événements :
    • checkout.session.completed
    • customer.subscription.created
    • customer.subscription.updated
    • customer.subscription.deleted
    • invoice.payment_succeeded
    • invoice.payment_failed
  • Cliquez sur Add endpoint
  1. Copiez le Signing secret (commence par whsec_) et définissez-le :
npx supabase secrets set STRIPE_WEBHOOK_SECRET=whsec_...
npx convex env set STRIPE_WEBHOOK_SECRET whsec_...
  1. Copiez la Live Publishable Key (pk_live_...) et assurez-vous qu'elle est définie comme VITE_STRIPE_PUBLISHABLE_KEY dans le projet Vercel apps/app.

Critique : L'URL du webhook pointe vers votre fonction backend, pas vers une route API Vercel/Next.js. C'est l'erreur la plus courante.

4. Configurer l'authentification pour la production

Cette étape est critique et fréquemment oubliée. Sans elle, la connexion et le OAuth ne fonctionneront pas en production.

Mettre à jour la configuration des URLs

  1. Allez dans votre tableau de bord Supabase > Authentication > URL Configuration

  2. Définissez le Site URL sur :

    https://app.yourdomain.com

  3. Ajoutez ces Redirect URLs :

    https://app.yourdomain.com/**
https://admin.yourdomain.com/**

    Le wildcard /** garantit que tous les sous-chemins sont autorisés (ex. /auth/callback, /dashboard, etc.).

  1. Définissez la variable d'environnement SITE_URL dans Convex :

    npx convex env set SITE_URL https://app.yourdomain.com

  2. Mettez à jour convex/auth.config.ts avec vos URLs de redirection de production.

Mettre à jour les callbacks des fournisseurs OAuth

Les fournisseurs OAuth (Google, GitHub, etc.) redirigent vers votre backend d'authentification d'abord, puis vers votre application.

Google OAuth :

  1. Allez sur Google Cloud Console > APIs & Services > Credentials
  2. Modifiez votre OAuth 2.0 Client
  3. Sous Authorized redirect URIs, ajoutez : 
    https://YOUR_PROJECT_REF.supabase.co/auth/v1/callback
  4. Supprimez les URIs de redirection localhost (ou gardez-les pour le développement local)

GitHub OAuth :

  1. Allez dans les GitHub Developer Settings > OAuth Apps
  2. Modifiez votre OAuth App
  3. Définissez l'Authorization callback URL sur : 
    https://YOUR_PROJECT_REF.supabase.co/auth/v1/callback

Comment ça fonctionne : L'utilisateur clique sur "Sign in with Google" -> redirigé vers Google -> Google redirige vers https://YOUR_PROJECT_REF.supabase.co/auth/v1/callback -> Supabase crée la session -> Supabase redirige vers votre Site URL (https://app.yourdomain.com).

Google OAuth :

  1. Allez sur Google Cloud Console > APIs & Services > Credentials
  2. Modifiez votre OAuth 2.0 Client
  3. Sous Authorized redirect URIs, ajoutez : 
    https://YOUR_DEPLOYMENT.convex.site/api/auth/callback/google

GitHub OAuth :

  1. Allez dans les GitHub Developer Settings > OAuth Apps
  2. Modifiez votre OAuth App
  3. Définissez l'Authorization callback URL sur : 
    https://YOUR_DEPLOYMENT.convex.site/api/auth/callback/github

Comment ça fonctionne : L'utilisateur clique sur "Sign in with Google" -> redirigé vers Google -> Google redirige vers votre endpoint HTTP Convex -> Convex crée la session -> redirige vers votre application.

5. Configurer l'email (Resend)

Les fonctions côté serveur utilisent Resend pour envoyer des emails transactionnels.

  1. Vérifiez votre domaine dans le tableau de bord Resend :

    • Ajoutez yourdomain.com
    • Ajoutez les enregistrements DNS fournis par Resend (SPF, DKIM, DMARC)
    • Attendez que la vérification soit terminée

  2. Mettez à jour l'email d'envoi dans vos secrets backend :

npx supabase secrets set RESEND_FROM_EMAIL=hello@yourdomain.com
npx convex env set RESEND_FROM_EMAIL hello@yourdomain.com

L'adresse d'envoi doit utiliser votre domaine vérifié. Les emails provenant de domaines non vérifiés seront rejetés.

  1. Testez l'envoi en déclenchant un flux en production (ex. inscrivez un utilisateur test, faites un achat test) et confirmez que l'email arrive.

6. Configurer le CORS

Les Edge Functions utilisent le secret APP_URL pour restreindre le CORS (Cross-Origin Resource Sharing). Seules les requêtes depuis votre tableau de bord de production seront acceptées.

Assurez-vous d'avoir défini :

npx supabase secrets set APP_URL=https://app.yourdomain.com

Si des erreurs CORS apparaissent dans la console du navigateur après le déploiement, vérifiez :

  • Le secret APP_URL est correctement défini (sans barre oblique finale)
  • Les Edge Functions ont été redéployées après avoir défini le secret
  • La requête provient de https://app.yourdomain.com, pas d'une URL de prévisualisation Vercel

Convex gère le CORS automatiquement pour tous les appels de fonctions via le client Convex. Aucune configuration CORS manuelle n'est nécessaire.

Pour les endpoints HTTP (webhooks), le CORS est géré dans convex/http.ts.

7. Domaines personnalisés

Domaines Vercel

Pour chacun des trois projets Vercel :

  1. Allez dans Settings > Domains dans le tableau de bord Vercel
  2. Ajoutez votre domaine :
Projet VercelDomaine(s)
apps/webyourdomain.com et www.yourdomain.com
apps/appapp.yourdomain.com
apps/opsadmin.yourdomain.com
  1. Vercel fournira les enregistrements DNS à ajouter. Les enregistrements exacts dépendent de votre fournisseur DNS.

Configuration DNS

Ajoutez ces enregistrements chez votre registraire de domaine ou fournisseur DNS :

TypeNomValeurProjet
A@76.76.21.21apps/web
CNAMEwwwcname.vercel-dns.comapps/web
CNAMEappcname.vercel-dns.comapps/app
CNAMEadmincname.vercel-dns.comapps/ops

Note : L'adresse IP exacte de l'enregistrement A peut varier. Utilisez toujours les valeurs que Vercel vous affiche dans le tableau de bord. Les certificats SSL sont provisionnés automatiquement par Vercel une fois le DNS propagé.

8. Checklist de production

Passez en revue chaque élément avant d'annoncer votre lancement.

Variables d'environnement

  • apps/web sur Vercel a NEXT_PUBLIC_WEB_URL et NEXT_PUBLIC_APP_URL définis
  • apps/app sur Vercel a VITE_WEB_URL, VITE_APP_URL, VITE_SUPABASE_URL, VITE_SUPABASE_ANON_KEY et VITE_STRIPE_PUBLISHABLE_KEY définis
  • apps/ops sur Vercel a VITE_SUPABASE_URL et VITE_SUPABASE_ANON_KEY définis
  • Les secrets Supabase sont définis : STRIPE_SECRET_KEY, STRIPE_WEBHOOK_SECRET, RESEND_API_KEY, RESEND_FROM_EMAIL, APP_URL, ADMIN_EMAILS
  • apps/web sur Vercel a NEXT_PUBLIC_WEB_URL et NEXT_PUBLIC_APP_URL définis
  • apps/app sur Vercel a VITE_WEB_URL, VITE_APP_URL, VITE_CONVEX_URL et VITE_STRIPE_PUBLISHABLE_KEY définis
  • apps/ops sur Vercel a VITE_CONVEX_URL défini
  • Les variables d'environnement Convex sont définies : STRIPE_SECRET_KEY, STRIPE_WEBHOOK_SECRET, RESEND_API_KEY, RESEND_FROM_EMAIL, APP_URL, ADMIN_EMAILS

Stripe

  • Produits et prix créés en LIVE mode (pas en test mode)
  • Les Price IDs dans packages/config/src/pricing.ts sont mis à jour avec les Price IDs live
  • L'URL de l'endpoint webhook est https://YOUR_PROJECT_REF.supabase.co/functions/v1/stripe-webhook
  • Le webhook signing secret (whsec_...) est défini comme STRIPE_WEBHOOK_SECRET dans les secrets Supabase
  • La publishable key Stripe dans apps/app est la clé LIVE (pk_live_..., pas pk_test_...)
  • Produits et prix créés en LIVE mode (pas en test mode)
  • Les Price IDs dans packages/config/src/pricing.ts sont mis à jour avec les Price IDs live
  • L'URL de l'endpoint webhook est https://YOUR_DEPLOYMENT.convex.site/stripe-webhook
  • Le webhook signing secret (whsec_...) est défini comme STRIPE_WEBHOOK_SECRET dans les variables d'environnement Convex
  • La publishable key Stripe dans apps/app est la clé LIVE (pk_live_..., pas pk_test_...)

Authentification

  • Le Site URL est défini sur https://app.yourdomain.com
  • Les Redirect URLs incluent https://app.yourdomain.com/** et https://admin.yourdomain.com/**
  • L'URI de redirection autorisée Google OAuth est https://YOUR_PROJECT_REF.supabase.co/auth/v1/callback
  • L'URL de callback d'autorisation GitHub OAuth est https://YOUR_PROJECT_REF.supabase.co/auth/v1/callback
  • La variable d'environnement SITE_URL est définie sur https://app.yourdomain.com
  • L'URI de redirection autorisée Google OAuth est https://YOUR_DEPLOYMENT.convex.site/api/auth/callback/google
  • L'URL de callback d'autorisation GitHub OAuth est https://YOUR_DEPLOYMENT.convex.site/api/auth/callback/github

Email

  • Domaine vérifié dans Resend (enregistrements SPF, DKIM, DMARC ajoutés)
  • RESEND_FROM_EMAIL utilise votre domaine vérifié (ex. hello@yourdomain.com)
  • Email de test envoyé et reçu avec succès en production

Base de données

  • Migrations poussées en production (npx supabase db push)
  • RLS (Row Level Security) activé sur toutes les tables
  • Edge Functions déployées (npx supabase functions deploy)
  • Convex déployé en production (npx convex deploy)
  • Schéma et fonctions à jour

Sécurité

  • Le secret ADMIN_EMAILS contient les bonnes adresses email d'administration
  • Le CORS est restreint à l'APP_URL de production uniquement
  • apps/ops (panneau d'administration) n'est pas accessible publiquement, ou dispose d'une vérification d'email admin appropriée

DNS

  • yourdomain.com pointe vers apps/web sur Vercel
  • app.yourdomain.com pointe vers apps/app sur Vercel
  • admin.yourdomain.com pointe vers apps/ops sur Vercel
  • Les certificats SSL sont actifs sur tous les domaines (automatique avec Vercel une fois le DNS propagé)

Dépannage

"Invalid redirect" après la connexion OAuth

Votre Site URL ou vos Redirect URLs d'authentification sont incorrects. Vérifiez qu'ils correspondent exactement à vos domaines de production.

Le webhook Stripe retourne 401 ou 400

  • Vérifiez que l'URL du webhook pointe vers Supabase (https://YOUR_PROJECT_REF.supabase.co/functions/v1/stripe-webhook), pas vers une URL Vercel.
  • Vérifiez que le secret Supabase STRIPE_WEBHOOK_SECRET correspond au signing secret affiché dans le Stripe Dashboard pour votre endpoint webhook de production.
  • Assurez-vous d'avoir créé le webhook en LIVE mode, pas en test mode.
  • Vérifiez que l'URL du webhook pointe vers Convex (https://YOUR_DEPLOYMENT.convex.site/stripe-webhook), pas vers une URL Vercel.
  • Vérifiez que la variable d'environnement Convex STRIPE_WEBHOOK_SECRET correspond au signing secret affiché dans le Stripe Dashboard pour votre endpoint webhook de production.
  • Assurez-vous d'avoir créé le webhook en LIVE mode, pas en test mode.

Erreurs CORS dans la console du navigateur

  • Vérifiez que le secret Supabase APP_URL correspond exactement à votre URL de tableau de bord de production (https://app.yourdomain.com, sans barre oblique finale).
  • Redéployez les Edge Functions après avoir modifié les secrets : npx supabase functions deploy.
  • Convex gère le CORS automatiquement pour les appels de fonctions client. Si vous voyez des erreurs CORS sur les endpoints HTTP, vérifiez votre configuration convex/http.ts.

Les emails ne s'envoient pas

  • Confirmez que votre domaine est vérifié dans Resend.
  • Confirmez que RESEND_FROM_EMAIL utilise le domaine vérifié.
  • Vérifiez le tableau de bord Resend pour les logs de livraison et les erreurs.

Les paiements réussissent mais l'abonnement n'est pas créé

  • Le webhook Stripe n'atteint pas votre fonction backend. Vérifiez les logs du webhook dans le Stripe Dashboard sous Developers > Webhooks > [votre endpoint] > Attempts.
  • Assurez-vous que les six événements requis sont sélectionnés sur l'endpoint webhook.

Fini ? Marquez cette page comme terminée.

On this page

Déploiement1. Déployer sur Vercel (3 projets)1a. Site marketing (apps/web)1b. Tableau de bord (apps/app)1c. Panneau d'administration (apps/ops)2. Déployer le backendPousser les migrations de base de donnéesDéployer les Edge FunctionsDéfinir les secrets de productionDéployer ConvexDéfinir les variables d'environnement de production3. Configurer Stripe pour la productionÉtape par étape :4. Configurer l'authentification pour la productionMettre à jour la configuration des URLsMettre à jour les callbacks des fournisseurs OAuth5. Configurer l'email (Resend)6. Configurer le CORS7. Domaines personnalisésDomaines VercelConfiguration DNS8. Checklist de productionVariables d'environnementStripeAuthentificationEmailBase de donnéesSécuritéDNSDépannage"Invalid redirect" après la connexion OAuthLe webhook Stripe retourne 401 ou 400Erreurs CORS dans la console du navigateurLes emails ne s'envoient pasLes paiements réussissent mais l'abonnement n'est pas créé