Aller au contenu principal

Déploiement Vercel - Frontend App

Ce guide explique comment déployer l'application apps/frontend sur Vercel depuis ce monorepo Turborepo.

🚀 Configuration Vercel​

1. Paramètres du projet Vercel​

Lors de la création du projet sur Vercel, utilisez ces paramètres :

  • Framework Preset: Next.js
  • Root Directory: apps/frontend
  • Build Command: cd ../.. && pnpm turbo build --filter=my-v0-project
  • Install Command: pnpm install
  • Output Directory: .next (par défaut)
  • Node Version: 22.x

2. Variables d'environnement​

Ajoutez ces variables d'environnement dans les paramètres Vercel :

# Supabase
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
SUPABASE_SERVICE_ROLE_KEY=your_service_role_key

# Database (si nécessaire)
DATABASE_URL=your_database_url

# Autres variables publiques Next.js
NEXT_PUBLIC_API_URL=your_api_url

3. Configuration automatique​

Le fichier apps/frontend/vercel.json configure automatiquement :

  • La commande de build avec Turbo
  • Le framework Next.js
  • Le répertoire de sortie

📦 Structure du monorepo​

Automobile Business Center/
├── apps/
│   ├── frontend/          # ← Application déployée sur Vercel
│   │   ├── vercel.json    # Configuration Vercel
│   │   ├── .npmrc         # Configuration npm/pnpm
│   │   └── package.json
│   ├── admin-panel/
│   └── mobile-app/
├── packages/
│   ├── database/
│   └── ui/
├── turbo.json             # Configuration Turborepo
├── pnpm-workspace.yaml
├── package.json           # packageManager: pnpm@9.15.0
└── .npmrc                 # Configuration npm globale

🔧 Résolution des problèmes​

Erreur: ERR_INVALID_THIS​

Solution: Les fichiers .npmrc avec retry settings sont déjà configurés dans :

  • / (racine)
  • /apps/frontend/
  • /apps/admin-panel/

Ces fichiers configurent :

  • 5 tentatives de retry (au lieu de 2)
  • Timeouts augmentés
  • Configuration du registre npm

Erreur: "packageManager" field conflicts​

Vérification: Assurez-vous qu'aucun sous-package n'a de champ packageManager différent.

# Vérifier tous les package.json
grep -r "packageManager" apps/ packages/

Seul le package.json racine devrait avoir :

{
  "packageManager": "pnpm@9.15.0"
}

Erreur: Lockfile out of sync​

Solution: Régénérer le lockfile localement et le pousser :

# À la racine du projet
rm -rf node_modules pnpm-lock.yaml
rm -rf apps/*/node_modules packages/*/node_modules

# Réinstaller avec pnpm 9
pnpm install

# Commit et push
git add pnpm-lock.yaml
git commit -m "Regenerate lockfile with pnpm 9.15.0"
git push origin master

Erreur: Build fails with workspace dependencies​

Solution: Turbo build avec filter gère automatiquement les dépendances workspace.

Le build command pnpm turbo build --filter=my-v0-project :

  • Build les packages @refine-project/database et @refine-project/ui d'abord
  • Puis build apps/frontend

🎯 Commandes de test local​

Avant de déployer, testez localement :

# Build avec Turbo (comme Vercel)
pnpm turbo build --filter=my-v0-project

# Ou build uniquement frontend
cd apps/frontend
pnpm build

# Démarrer en production
pnpm start

📝 Checklist avant déploiement​

  • pnpm-lock.yaml est à jour et commité
  • packageManager est défini à pnpm@9.15.0 dans le package.json racine
  • Aucun sous-package n'a de champ packageManager conflictuel
  • Les variables d'environnement sont configurées dans Vercel
  • Le build local fonctionne : pnpm turbo build --filter=my-v0-project
  • Les fichiers .npmrc sont présents et commitées

🔄 Workflow de déploiement​

  1. Développement local

    pnpm dev

  2. Test du build

    pnpm turbo build --filter=my-v0-project

  3. Commit et push

    git add .
    git commit -m "Your changes"
    git push origin master

  4. Déploiement automatique

    • Vercel détecte le push
    • Exécute pnpm install avec les settings .npmrc
    • Build avec Turbo
    • Déploie automatiquement

📚 Ressources​

🆘 Support​

Si vous rencontrez des problèmes :

  1. Vérifiez les logs de build Vercel
  2. Consultez docs/NPM_PNPM_CONFIG.md pour les problèmes npm/pnpm
  3. Testez le build localement avec la même commande que Vercel
  4. Vérifiez que toutes les variables d'environnement sont définies