Déployer sur Vercel

Vue d'ensemble

ScaleRocket se déploie en trois projets Vercel séparés -- un pour chaque application. Chaque projet pointe vers le même dépôt Git mais utilise des répertoires racines et des commandes de build différents.

Configuration des projets

1. Site Marketing (apps/web)

2. Tableau de bord utilisateur (apps/app)

3. Panneau d'administration (apps/ops)

Étape par étape

Créer le premier projet

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

Créer les deuxième et troisième projets

Répétez les mêmes étapes pour apps/app et apps/ops, en changeant le répertoire racine et le nom du filtre.

Astuce : Vous pouvez importer le même dépôt plusieurs fois dans Vercel. Chaque import crée un projet séparé.

Variables d'environnement

apps/web

NEXT_PUBLIC_WEB_URL            = https://yourdomain.com
NEXT_PUBLIC_APP_URL            = https://app.yourdomain.com

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.

apps/app

VITE_SUPABASE_URL              = https://xxx.supabase.co
VITE_SUPABASE_ANON_KEY         = eyJ...
VITE_WEB_URL                   = https://yourdomain.com

apps/ops

VITE_SUPABASE_URL              = https://xxx.supabase.co
VITE_SUPABASE_ANON_KEY         = eyJ...
# ⚠ ATTENTION : Les clés service role ne doivent JAMAIS être préfixées avec VITE_ —
# Vite expose toutes les variables VITE_ dans le bundle client. Utilisez un nom
# sans préfixe pour que la clé reste côté serveur uniquement.
SUPABASE_SERVICE_ROLE_KEY      = eyJ...

Définissez-les dans chaque projet Vercel sous Settings > Environment Variables.

Domaines personnalisés

Structure de domaines recommandée :

Configurer dans Vercel

1. Allez dans les Settings > Domains de votre projet.
2. Ajoutez votre domaine personnalisé.
3. Suivez les instructions DNS (ajoutez un enregistrement CNAME ou A).
4. Vercel provisionne automatiquement un certificat SSL.

Mettre à jour la configuration

Après avoir configuré les domaines, mettez à jour packages/config/src/site.ts :

export const siteConfig = {
  url: "https://yourdomain.com",
  appUrl: "https://app.yourdomain.com",
  opsUrl: "https://admin.yourdomain.com",
  // ...
};

Et mettez à jour les secrets des Edge Functions Supabase :

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

Détection du monorepo

Vercel détecte automatiquement les workspaces pnpm. Si les builds échouent :

1. Assurez-vous que pnpm-workspace.yaml est à la racine du dépôt.
2. Définissez correctement le Root Directory dans chaque projet.
3. Activez Include source files outside of the Root Directory dans les paramètres du projet (généralement auto-détecté).

Cache de build

Le cache distant de Turborepo accélère les builds CI. Pour l'activer :

1. Exécutez pnpm turbo login et pnpm turbo link dans votre dépôt.
2. Ou définissez les variables d'environnement TURBO_TOKEN et TURBO_TEAM dans chaque projet Vercel.

Cela permet à Turborepo de sauter la reconstruction des packages qui n'ont pas changé.

Déclencheurs de déploiement

Par défaut, Vercel déploie à chaque push sur main. Chaque projet ne se reconstruit que lorsque ses fichiers pertinents changent (Vercel détecte cela via le paramètre root directory).

Pour affiner, ajoutez des commandes Ignored Build Step dans chaque projet :

# apps/web -- only deploy if web or packages changed
npx turbo-ignore web