DIJBSOUQ

Guide de Déploiement Render

Ce document décrit les étapes pour déployer DJIB SOUQ sur Render.

✅ Modifications effectuées pour Render

1. Configuration Next.js : Retrait de output: 'export' pour permettre le SSR et les API routes
2. Base de données : Migration de SQLite vers PostgreSQL (requis pour Render)
3. Scripts de build : Ajout de postinstall pour générer Prisma Client automatiquement
4. Configuration Render : Création de render.yaml avec les paramètres optimaux

🚀 Étapes de déploiement

Option A : Déploiement automatique avec render.yaml (Recommandé)

1. Préparer le repository
   • Assurez-vous que votre code est sur GitHub/GitLab/Bitbucket
   • Le fichier render.yaml est déjà configuré dans le projet
2. Créer un compte Render
   • Allez sur https://render.com
   • Créez un compte ou connectez-vous
   • Connectez votre compte GitHub/GitLab/Bitbucket
3. Déployer via Blueprint
   • Dans le dashboard Render, cliquez sur “New +” → “Blueprint”
   • Sélectionnez votre repository
   • Render détectera automatiquement le fichier render.yaml
   • Cliquez sur “Apply” pour créer les services
4. Configurer les variables d’environnement
   • Render créera automatiquement la base de données PostgreSQL
   • DATABASE_URL sera automatiquement configuré
   • Vous devez configurer manuellement :
     • NEXTAUTH_SECRET : Générez avec openssl rand -base64 32
     • NEXTAUTH_URL : Sera automatiquement configuré, mais vérifiez qu’il correspond à votre URL Render
5. Migrer la base de données
   • Une fois le service web déployé, connectez-vous via SSH ou utilisez un script de migration
   • Dans le dashboard Render, allez dans votre service web → “Shell”
   • Exécutez :

     npx prisma migrate deploy
     # Ou pour créer depuis zéro :
     npx prisma db push
     npx prisma db seed
     

Option B : Déploiement manuel

1. Créer la base de données PostgreSQL
   • Dans Render Dashboard, cliquez sur “New +” → “PostgreSQL”
   • Choisissez un nom (ex: djibsouq-db)
   • Sélectionnez un plan (Starter pour commencer)
   • Notez l’URL de connexion (DATABASE_URL)
2. Créer le service Web
   • Cliquez sur “New +” → “Web Service”
   • Connectez votre repository
   • Configurez :
     • Name : djibsouq
     • Environment : Node
     • Build Command : npm install && npm run build
     • Start Command : npm start
     • Plan : Starter (ou supérieur)

3. Configurer les variables d’environnement Dans les paramètres du service web, ajoutez :

   Variable	Valeur
   DATABASE_URL	L’URL de votre base PostgreSQL (copiée à l’étape 1)
   NEXTAUTH_SECRET	Générez avec openssl rand -base64 32
   NEXTAUTH_URL	https://votre-app.onrender.com (votre URL Render)
   NODE_ENV	production

4. Déployer
   • Cliquez sur “Create Web Service”
   • Render commencera le build automatiquement
5. Migrer la base de données
   • Une fois le déploiement terminé, allez dans “Shell” du service web
   • Exécutez :

     npx prisma migrate deploy
     # Ou :
     npx prisma db push
     npx prisma db seed
     

6. Vérifier le déploiement

• Vérifiez que l’application fonctionne sur votre URL Render
• Testez l’authentification
• Testez les fonctionnalités API

🔧 Dépannage

Erreur : “Prisma Client not generated”

Solution :

• Le script postinstall devrait générer automatiquement
• Vérifiez les logs de build dans Render
• Assurez-vous que prisma generate s’exécute dans le build

Erreur : “Database connection failed”

Solution :

• Vérifiez que DATABASE_URL est correctement configurée dans Render
• Assurez-vous que la base de données PostgreSQL est dans le même région que votre service web
• Vérifiez que la base de données est bien créée et active

Erreur : “NEXTAUTH_SECRET missing”

Solution : Assurez-vous que la variable d’environnement est définie dans les paramètres du service web Render.

Erreur : “NextAuth URL mismatch”

Solution :

• Vérifiez que NEXTAUTH_URL correspond exactement à l’URL de votre application Render
• Format attendu : https://votre-app.onrender.com (avec https://)

Erreur : “Build timeout”

Solution :

• Le build peut prendre du temps avec Prisma
• Vérifiez les logs de build
• Assurez-vous que postinstall et build incluent prisma generate

Erreur : “Application crashed”

Solution :

• Vérifiez les logs dans le dashboard Render
• Assurez-vous que toutes les variables d’environnement sont configurées
• Vérifiez que la base de données est accessible
• Assurez-vous que les migrations ont été exécutées

📝 Notes importantes

• SQLite vs PostgreSQL : Le projet utilise PostgreSQL pour la production. Pour le développement local, vous pouvez utiliser SQLite en configurant DATABASE_URL="file:./prisma/dev.db" dans votre .env local.

• Plan Render : Le plan Starter est suffisant pour commencer. Pour la production, considérez un plan supérieur.

• Auto-deploy : Render déploie automatiquement à chaque push sur la branche principale si activé.

• Migrations : Les migrations Prisma doivent être exécutées manuellement après le premier déploiement via le Shell Render.

• Variables d’environnement : Les variables définies dans render.yaml sont automatiquement configurées, mais vous pouvez les modifier dans le dashboard Render.

• Capacitor : Si vous devez aussi déployer pour mobile, utilisez un build séparé avec output: 'export' dans une configuration conditionnelle.

🔄 Workflow de développement

Pour travailler en local avec PostgreSQL :

1. Créez une base de données PostgreSQL locale ou distante
2. Configurez DATABASE_URL dans votre .env local
3. Exécutez npm run db:push ou npm run db:migrate
4. Exécutez npm run db:seed pour les données de test

📊 Structure render.yaml

Le fichier render.yaml configure :

• Service Web : Application Next.js
• Base de données PostgreSQL : Base de données automatiquement créée
• Variables d’environnement : Configuration automatique des variables essentielles

Vous pouvez modifier render.yaml pour ajuster la configuration selon vos besoins.