Africa Bridge Pay Wiki

Appearance

Guide de Déploiement - Africa Bridge Pay ​

🚀 Déploiement sur Vercel (Recommandé) ​

Option 1 : Via l'interface Web Vercel ​

  1. Créer un compte Vercel

    • Allez sur vercel.com
    • Connectez-vous avec GitHub/GitLab/Bitbucket

  2. Importer le projet

    • Cliquez sur "New Project"
    • Importez votre dépôt GitHub
    • Vercel détecte automatiquement Next.js

  3. Configurer les variables d'environnement

    • Ajoutez les variables de .env.local.example si nécessaire
    • Pour le MVP, aucune variable n'est requise

  4. Déployer

    • Cliquez sur "Deploy"
    • Vercel construit et déploie automatiquement
    • Vous obtenez une URL en .vercel.app

Option 2 : Via CLI Vercel ​

bash
# Installer Vercel CLI
npm install -g vercel

# Se connecter
vercel login

# Déployer
vercel

# Déployer en production
vercel --prod

📦 Build Local ​

Avant de déployer, testez le build en local :

bash
# Build de production
npm run build

# Tester le build
npm start

🌐 Configuration du Domaine ​

Sur Vercel ​

  1. Allez dans Project Settings > Domains
  2. Ajoutez votre domaine personnalisé : africabridgepay.com
  3. Suivez les instructions pour configurer les DNS

Configuration DNS recommandée ​

Type    Name    Value
A       @       76.76.21.21
CNAME   www     cname.vercel-dns.com

🔒 HTTPS ​

Vercel active automatiquement HTTPS avec Let's Encrypt.

📊 Performance et Optimisation ​

Vercel Edge Network ​

  • CDN global automatique
  • Cache intelligent des pages statiques
  • ISR (Incremental Static Regeneration) disponible

Optimisations recommandées ​

  1. Images : Utiliser next/image pour l'optimisation automatique
  2. Fonts : Les fonts Google sont déjà optimisées avec next/font
  3. Code Splitting : Automatique avec Next.js

🔄 Intégration Continue (CI/CD) ​

Déploiement automatique avec Vercel ​

Chaque push sur la branche principale déclenche :

  • ✅ Build automatique
  • ✅ Tests de qualité
  • ✅ Déploiement en production

Branches de prévisualisation ​

Chaque Pull Request obtient :

  • Une URL de prévisualisation unique
  • Tests automatiques
  • Commentaires dans la PR avec l'URL

🐳 Déploiement Docker (Alternative) ​

Si vous préférez déployer sur votre propre serveur :

dockerfile
# Dockerfile
FROM node:20-alpine AS builder

WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM node:20-alpine AS runner
WORKDIR /app
ENV NODE_ENV=production

COPY --from=builder /app/public ./public
COPY --from=builder /app/.next/standalone ./
COPY --from=builder /app/.next/static ./.next/static

EXPOSE 3000
ENV PORT=3000

CMD ["node", "server.js"]
bash
# Build l'image
docker build -t africa-bridge-pay .

# Lancer le conteneur
docker run -p 3000:3000 africa-bridge-pay

☁️ Autres Plateformes ​

Netlify ​

bash
npm install netlify-cli -g
netlify deploy --prod

AWS Amplify ​

  1. Connectez votre dépôt GitHub
  2. Amplify détecte Next.js automatiquement
  3. Configurez les variables d'environnement
  4. Déployez

Railway ​

bash
# Installer Railway CLI
npm install -g @railway/cli

# Se connecter
railway login

# Déployer
railway up

🔐 Sécurité ​

Variables d'Environnement ​

❌ NE JAMAIS commiter les fichiers .env.local

✅ Configurer les variables dans :

  • Vercel : Settings > Environment Variables
  • GitHub : Settings > Secrets
  • Docker : Via docker-compose.yml

Headers de Sécurité ​

Ajouter dans next.config.js :

javascript
module.exports = {
  async headers() {
    return [
      {
        source: '/:path*',
        headers: [
          {
            key: 'X-Frame-Options',
            value: 'DENY',
          },
          {
            key: 'X-Content-Type-Options',
            value: 'nosniff',
          },
          {
            key: 'Referrer-Policy',
            value: 'origin-when-cross-origin',
          },
        ],
      },
    ]
  },
}

📈 Monitoring ​

Vercel Analytics (Recommandé) ​

bash
npm install @vercel/analytics
typescript
// app/layout.tsx
import { Analytics } from '@vercel/analytics/react'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Analytics />
      </body>
    </html>
  )
}

Alternatives ​

  • Google Analytics
  • Plausible Analytics
  • Sentry (pour le tracking d'erreurs)

🔄 Migration vers un Backend ​

Quand vous serez prêt à connecter une API :

  1. Créer les routes API dans /app/api
  2. Remplacer localStorage par des appels fetch
  3. Configurer CORS sur votre backend
  4. Ajouter les variables d'environnement pour l'API

Exemple de transition :

typescript
// Avant (Mock)
const addTransaction = (data) => {
  localStorage.setItem('transactions', JSON.stringify(data))
}

// Après (API)
const addTransaction = async (data) => {
  const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/transactions`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data)
  })
  return response.json()
}

🆘 Dépannage ​

Erreur de build ​

bash
# Nettoyer le cache
rm -rf .next
npm run build

Module non trouvé ​

bash
# Réinstaller les dépendances
rm -rf node_modules package-lock.json
npm install

Problème de mémoire ​

Augmenter la limite de mémoire Node.js :

json
// package.json
{
  "scripts": {
    "build": "NODE_OPTIONS='--max-old-space-size=4096' next build"
  }
}

📞 Support ​

Documentation Africa Bridge Pay

Copyright © 2026 Africa Bridge Pay