Mettre en ligne

Avant de déployer

• Lancez l'API avec NODE_ENV=production, votre propre JWT_SECRET, et CORS_ORIGIN et FRONTEND_URL réglés sur l'adresse publique du tableau de bord. Une API de production refuse de démarrer sans les deux premiers.
• Derrière un reverse proxy (Nginx, Caddy, un load balancer), définissez TRUST_PROXY=1, pour que la limite de connexion compte les visiteurs et non le proxy.
• Laissez DEMO_MODE et NEXT_PUBLIC_DEMO_MODE désactivés, sauf si le déploiement est une démo publique.

• Variables d'environnement

Avant de déployer

Laissez NEXT_PUBLIC_DEMO_MODE désactivé, sauf si le déploiement est une démo publique.

Les deux applications sur un seul serveur avec Docker

Le docker-compose.yml qui lance le template en local le lance aussi sur un serveur. Donnez à chaque application son propre domaine derrière un serveur web qui ajoute le HTTPS, comme Caddy ou Nginx, en transmettant le domaine du tableau de bord au port 3030 et celui de l'API au port 8000.

1. 01

   Nommer les deux adresses

   Créez .env dans le dossier dashboard-2-full-stack, à côté de docker-compose.yml. Le tableau de bord compile l'adresse de l'API dans son JavaScript, et l'API autorise l'adresse du tableau de bord dans CORS_ORIGIN et FRONTEND_URL, les deux à partir de ces deux lignes.

   dashboard-2-full-stack/.envCopier

   DASHBOARD_URL=https://admin.your-domain.com
   API_URL=https://api.your-domain.com
2. 02

   Ajouter vos clés

   L'API lit aussi back-end/.env quand il existe, pour les clés des fournisseurs d'IA, R2 et la clé MCP. Créez-le à partir de .env.example et ajoutez TRUST_PROXY=1 derrière votre serveur web. Le fichier compose définit lui-même la base de données, le port et NODE_ENV=production, et l'API génère un JWT_SECRET dans le volume de données si vous n'en donnez pas.

   Terminaldans dashboard-2-full-stackCopier

   cp back-end/.env.example back-end/.env
3. 03

   Le démarrer en arrière-plan

   Terminaldans dashboard-2-full-stackCopier

   docker compose up --build -d

   Résultat attendu: https://api.your-domain.com/api/health répond "status":"ok", et le domaine du tableau de bord ouvre la page de connexion.

Les services redémarrent avec le serveur. La base de données vit dans le volume dashboard-2-data. Après avoir changé DASHBOARD_URL, API_URL ou un port, relancez docker compose up --build -d : le tableau de bord doit être construit avec la nouvelle adresse.

L'API seule

back-end a son propre Dockerfile, donc tout hébergeur qui construit depuis un Dockerfile peut faire tourner l'API seule. Le conteneur garde sa base SQLite dans /data : montez-y un volume, sinon les données sont perdues avec le conteneur. Sur un nouveau volume, il crée la base avec les données d'exemple une seule fois.

docker build -t dashboard-api .
docker run -d --restart unless-stopped -p 8000:8000 -v dashboard-data:/data -e CORS_ORIGIN=https://admin.your-domain.com -e FRONTEND_URL=https://admin.your-domain.com dashboard-api

L'image tourne déjà avec NODE_ENV=production et son fichier SQLite dans /data. Ne passez que les valeurs dont vous avez besoin, chacune avec -e, comme -e GOOGLE_API_KEY=.... La façon habituelle de lancer l'API reste docker compose up --build à la racine du pack, qui la démarre avec le tableau de bord.

Sur un hébergeur Node.js sans Docker, la commande de build est yarn build, la commande de démarrage yarn start:prod, et yarn seed:prod se lance une fois pour créer les tables. Un fichier SQLite demande un disque persistant ; sur un hébergeur qui n'en a pas, utilisez MySQL.

• Build de production de l'API
• Utiliser MySQL

Le tableau de bord sur Vercel

1. 01

   Mettre le tableau de bord dans un dépôt Git privé

   Poussez le dossier du tableau de bord (front-end dans le Full Stack, dashboard-2-front-end dans le pack Admin Dashboard) vers un dépôt privé sur GitHub, GitLab ou Bitbucket. Votre licence ne permet pas de partager publiquement le code source.
2. 02

   Importez-le dans Vercel

   Ajoutez un nouveau projet depuis ce dépôt. Vercel détecte Next.js ; gardez les paramètres de build par défaut. Dans le dépôt Full Stack, réglez le répertoire racine du projet sur front-end.
3. 03

   Ajoutez les variables d'environnement

   Ajoutez ENABLE_EXPERIMENTAL_COREPACK avec la valeur 1, pour que Vercel installe avec la version de Yarn fixée par package.json. Puis NEXT_PUBLIC_API_BASE_URL (votre API avec /api), NEXT_PUBLIC_WEBSOCKET_BASE_URL (la même adresse sans /api) et NEXT_PUBLIC_BASE_URL (l'adresse du tableau de bord lui-même). WEATHER_API_KEY est facultative.
4. 04

   Déployez

   Lancez le déploiement, puis ajoutez votre domaine dans les paramètres Domains du projet, et ajoutez cette adresse à CORS_ORIGIN et FRONTEND_URL de l'API.

   Résultat attendu: Votre domaine ouvre la page de connexion.

Après avoir changé une variable NEXT_PUBLIC_*, déployez de nouveau : l'application en cours garde les valeurs avec lesquelles elle a été construite.

Le tableau de bord sur un serveur Node.js

Avec vos paramètres dans le .env du tableau de bord, installez, construisez et démarrez :

corepack enable
yarn install
yarn build
yarn start

Il répond sur le port 3030, ou sur PORT quand l'hébergeur en définit un. Placez un serveur web devant pour votre domaine et le HTTPS, et gardez yarn start actif avec un gestionnaire de processus ou un service système.

Le tableau de bord comme image Docker

Le Dockerfile du tableau de bord construit un serveur autonome sur le port 3030, exécuté par un utilisateur sans droits d'administration. L'adresse de l'API est un argument de build :

docker build -t dashboard-2 --build-arg NEXT_PUBLIC_API_BASE_URL=https://api.your-domain.com/api --build-arg NEXT_PUBLIC_WEBSOCKET_BASE_URL=https://api.your-domain.com --build-arg NEXT_PUBLIC_BASE_URL=https://admin.your-domain.com .
docker run -d --restart unless-stopped -p 3030:3030 dashboard-2

WEATHER_API_KEY est lue quand le conteneur tourne : ajoutez -e WEATHER_API_KEY=... à docker run.

Une fois en ligne

• Connectez-vous à l'adresse de votre tableau de bord, avec /en et /ar, et vérifiez les deux langues.
• Chaque page demande aux moteurs de recherche de ne pas l'indexer, grâce à un en-tête X-Robots-Tag: noindex, nofollow défini dans next.config.js, car un tableau de bord connecté n'a pas sa place dans les résultats de recherche.