Déployer avec Vercel

Guide pour déployer votre Wagoo sur Vercel.

Étape 1 : Créer un compte Vercel

1. Allez sur Vercel.com 
2. Cliquez Sign Up
3. Connectez-vous avec GitHub/GitLab/Bitbucket
4. Autorisez Vercel

Étape 2 : Importer le projet

1. Allez à Vercel Dashboard 
2. Cliquez Add New Project ou Import Project
3. Sélectionnez votre repository Git
4. Cliquez Import

Étape 3 : Configurer le projet

Framework Preset

Vercel détecte automatiquement Next.js ✅

Root Directory

Laissez vide (ou . ) ✅

Build Command

Vercel détecte automatiquement pnpm build ✅

Environment Variables

Cliquez Environment Variables et ajoutez :

DATABASE_URL = "postgresql://..."
BETTER_AUTH_SECRET = "..."
BETTER_AUTH_URL = "https://votre-domaine.vercel.app"
STRIPE_SECRET_KEY = "sk_live_..."
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY = "pk_live_..."
STRIPE_WEBHOOK_SECRET = "whsec_..."

⚠️ Important: Choisissez Production pour le scope

Étape 4 : Déployer

1. Vérifiez les paramètres
2. Cliquez Deploy
3. Attendre le build (~3 minutes)

Vercel vous montre la progression :

• Building
• Functions
• Finalizing

Quand c’est fini : ✅ Production

Étape 5 : Vérifier le déploiement

Accéder au site

Votre URL Vercel :

https://votre-project.vercel.app

Vérifier les logs

1. Vercel Dashboard → Deployments
2. Cliquez le déploiement actuel
3. Cliquez Logs

Affiche :

• Build logs
• Runtime logs
• Errors

Étape 6 : Configurer le domaine

Via Vercel

1. Vercel Dashboard → Settings → Domains
2. Cliquez Add Domain
3. Entrez votre domaine
4. Suivez les instructions DNS

Ou voir : Domaine personnalisé

Étape 7 : Configurer les webhooks Stripe

⚠️ Important

Mettez à jour vos webhooks Stripe :

1. Stripe Dashboard → Webhooks
2. Mettez à jour l’URL :

https://votre-domaine.com/api/webhooks/stripe

Ou gardez l’URL Vercel si pas de domaine :

https://votre-project.vercel.app/api/webhooks/stripe

Déploiement automatique

Branche de déploiement

Par défaut : main

1. Quand vous pushez sur main, Vercel redéploie
2. Automatique et instantané

Preview deployments

Pour les pull requests :

1. Créez une PR
2. Vercel crée une preview URL
3. Testez avant de merger

Utile pour :

• Tests en production-like
• Reviews de code
• QA

Scaling et performances

Vercel Scale automatiquement :

✅ 0 serveurs à gérer ✅ Scaling illimité ✅ CDN global ✅ Regions multiples

Performance Insights

1. Vercel Dashboard → Analytics
2. Affiche :
   • Response time
   • Core Web Vitals
   • Regions

Environnements multiples

Development

BETTER_AUTH_URL = "http://localhost:3000"
NODE_ENV = "development"

Staging (Optionnel)

1. Créez une branch staging
2. Ajouter un projet Vercel pour cette branch
3. URLs séparées pour test

Production

BETTER_AUTH_URL = "https://monsite.com"
NODE_ENV = "production"

Maintenance et updates

Logs en production

# Terminal local
vercel logs --follow

Ou via Dashboard → Logs

Redéployer

# Terminal
git push origin main
 
# Ou manuellement
vercel deploy --prod

Troubleshooting

Build échoue

1. Vérifiez les logs
2. pnpm build localement
3. Vérifiez les dépendances

Erreurs 404 sur images

Vérifiez next.config.mjs :

export default {
  images: {
    domains: ['...'],
  },
}

Base de données non accessible

1. Vérifiez DATABASE_URL
2. IP Vercel est whitelist-ée?
3. Credentials corrects?

Performance optimizations

Caching

Vercel cache automatiquement :

• Images
• CSS/JS
• Static files

Ttl par défaut : 365 jours

Compression

Activée par défaut

• Brotli (texte)
• WebP (images)

Logs et monitoring

Fonction logs

# Voir les logs de fonction
vercel logs --follow

Tail logs

# En temps réel
vercel logs --follow --all

Coûts

Plan Hobby (Gratuit)

• ✅ Déploiements illimités
• ✅ 3 serverless functions
• ✅ 100 GB de bande passante
• ✅ Idéal pour débuter

Plan Pro

• ✅ Illimité tout
• ✅ Priority support
• ✅ Analytics avancé
• 💲 $20/mois

Prochaines étapes

→ Configurer l’environnement → Monitoring