TechradarDev/docs/app/deploiement.md

Guide de déploiement

Vue d'ensemble

Le projet peut être déployé de plusieurs façons :

• Docker Compose (recommandé pour la production)
• Docker simple
• Build statique avec serveur web
• Portainer (pour le Radar Business)

Déploiement avec Docker

Configuration Docker

Le projet contient plusieurs configurations Docker :

• docker/Dockerfile : Dockerfile principal avec multi-stage build
• docker/docker-compose.yml : Configuration de base
• docker/docker-compose.labels.yml : Labels pour le reverse proxy
• docker/docker-compose.local.yml : Configuration pour développement local
• Dockerfile (racine) : Dockerfile alternatif
• docker-compose.yml (racine) : Docker Compose alternatif
• Dockerfile.business : Dockerfile spécifique pour le Radar Business
• docker-compose.business.yml : Docker Compose pour le Radar Business (Portainer)

Build de l'image Docker

Avec le Dockerfile principal

cd docker
docker compose build

Avec build args

docker build \
  --build-arg BASE_PATH="/techradar" \
  --build-arg UID=1000 \
  --build-arg GID=1000 \
  -f docker/Dockerfile \
  -t techradar:latest \
  .

Variables d'environnement

• BASE_PATH : Chemin de base pour l'application (défaut: /)
• UID : User ID pour l'utilisateur dans le conteneur (défaut: 1000)
• GID : Group ID pour l'utilisateur dans le conteneur (défaut: 1000)

Démarrage avec Docker Compose

cd docker
docker compose up -d

L'application sera accessible sur le port 3000.

Configuration du basePath

Le script docker-entrypoint.sh modifie dynamiquement le basePath dans config.json au démarrage du conteneur en utilisant la variable d'environnement BASE_PATH.

Déploiement du Radar Technologique Laplank avec Portainer

Le Radar Technologique Laplank est déployé via Portainer en utilisant une stack Docker Compose.

Configuration Portainer

1. Créer une nouvelle stack dans Portainer
2. Nom de la stack : laplank-radar-technologique (ou autre nom)
3. Méthode : Git Repository
4. Repository URL : https://git.open.us.org/AJR/TechradarDev.git
5. Reference : refs/heads/dev-tech (branche actuelle)
6. Compose path : docker-compose.business.yml

Note : Si le dépôt est privé, utiliser un Personal Access Token dans l'URL :

• https://<token>@git.open.us.org/AJR/TechradarDev.git

Configuration Docker Compose Laplank

Le fichier docker-compose.business.yml configure :

• Port : 3006:3000 (port 3006 de l'hôte mappé vers le port 3000 du conteneur)
• Container name : laplank-radar-business
• Image : Construite depuis Dockerfile.business lors du déploiement
• Environnement : NODE_ENV=production
• Restart policy : unless-stopped (redémarre automatiquement en cas d'arrêt)

Accès à l'application :

• URL : http://<votre-serveur>:3006
• Mot de passe : laplank-radar

Dockerfile Business

Le Dockerfile.business effectue les opérations suivantes :

1. Installation des dépendances :

   • Node.js 20 Alpine
   • Git et Python3 pour les scripts
   • Variables d'environnement pour désactiver Husky

2. Installation des dépendances :

   • Installation des dépendances racine (pour scripts: generate-team-visualization-data, etc.)
   • Installation des dépendances dans radar-app/ (Next.js et dépendances du framework)
   • Désactivation du script prepare (husky) dans radar-app/package.json

3. Configuration des données :

   • Purge des données de démo : rm -rf radar-app/data/radar/*
   • Copie des blips business : radar-business/2025-01-15/* → radar-app/data/radar/2025-01-15/
   • Copie de la config : radar-business/config-business.json → radar-app/data/config.json
   • Copie des fichiers publics : public/* → radar-app/public/
   • Génération et copie de team-visualization-data.json dans radar-app/public/

4. Modifications personnalisees :

   • Creation de radar-app/src/pages/team.tsx (page Next.js vide pour /team)
   • Modification de radar-app/src/pages/_document.tsx via script Python :
     • Ajout du chargement de team-block-script.js avec strategy="beforeInteractive"
   • Modification de radar-app/src/components/Navigation/Navigation.tsx via script Python :
     • Suppression de tous les liens Equipe existants (evite les doublons)
     • Ajout d'un seul lien "Equipe" apres le lien "Vue d'ensemble"

5. Build Next.js :

   • cd radar-app && npm run build:data : Génère les données du radar
   • cd radar-app && npm run build : Build de l'application Next.js

6. Post-build :

   • Copie des fichiers additionnels (_team-content, team-visualization-data.json, team/) depuis radar-app/public/ vers radar-app/out/

7. Demarrage :

   • Execution de scripts/start-business.sh qui :
     • Verifie que team-visualization-data.json est dans out/
     • Le copie depuis public/ si necessaire
     • Demarre le serveur statique serve sur le port 3000 (sans --single)

Scripts Python pour les modifications

Script pour Navigation.tsx

Le script docker/add_team_link.py :

1. Verifie l'existence du fichier : radar-app/src/components/Navigation/Navigation.tsx
2. Supprime tous les liens Equipe existants : Evite les doublons meme si le script s'execute plusieurs fois
3. Ajoute un seul lien Equipe : Apres le lien "Vue d'ensemble"
4. Verifie le resultat : S'assure qu'il n'y a qu'un seul lien apres l'operation

Le script shell docker/add_team_link.sh orchestre l'execution et verifie le resultat.

Script pour _document.tsx

Le script docker/patch_document.py :

1. Ajoute l'import de Script : Si pas deja present dans le fichier
2. Modifie le composant Head : Ajoute le chargement de team-block-script.js
3. Strategie beforeInteractive : Le script est charge avant le rendu Next.js

Authentification Git pour Portainer

Si le dépôt est privé, utiliser un Personal Access Token (Gitea) :

1. Créer un token dans Gitea avec les permissions de lecture
2. Utiliser l'URL avec le token : https://<token>@git.open.us.org/AJR/TechradarDev.git
3. Exemple : https://glpat-xxxxxxxxxxxx@git.open.us.org/AJR/TechradarDev.git

Configuration complète pour dépôt privé :

• Repository URL : https://<token>@git.open.us.org/AJR/TechradarDev.git
• Reference : refs/heads/dev-tech
• Compose path : docker-compose.business.yml

Mise à jour

Pour mettre à jour le Radar Technologique Laplank dans Portainer :

⚠️ IMPORTANT : Pour que les mises à jour soient effectives, il faut forcer le rebuild sans cache !

Option 1 : Rebuild avec --no-cache (RECOMMANDÉ)

1. Aller dans Stacks → Sélectionner la stack laplank-radar-technologique
2. Cliquer sur Editor
3. Cocher la case "Always pull image" (si disponible)
4. Cocher la case "Rebuild" ou utiliser l'option "Rebuild the stack"
5. Dans les options avancées, cocher "No cache" ou utiliser --no-cache dans les build args
6. Cliquer sur Update the stack
7. Portainer va reconstruire l'image complètement sans utiliser le cache

Option 2 : Rebuild manuel via l'interface

1. Aller dans Stacks → Sélectionner la stack laplank-radar-technologique
2. Cliquer sur Editor
3. Cliquer sur Update the stack
4. Avant de confirmer, dans les options de build, ajouter --no-cache ou cocher "No cache"
5. Confirmer la mise à jour

Option 3 : Supprimer l'image et rebuild (si les options ci-dessus ne fonctionnent pas)

1. Aller dans Containers → Sélectionner laplank-radar-technolologique
2. Cliquer sur Stop pour arrêter le conteneur
3. Aller dans Images → Trouver l'image de la stack
4. Cliquer sur Remove pour supprimer l'image
5. Retourner dans Stacks → Sélectionner la stack
6. Cliquer sur Editor → Update the stack
7. L'image sera reconstruite depuis zéro

Vérification après mise à jour :

• Vérifier les logs : Containers → laplank-radar-technolologique → Logs
• Tester l'application : http://<votre-serveur>:3006
• Vérifier que les changements sont visibles (par exemple, le contenu de about.md ou custom.css)
• Vérifier qu'il n'y a qu'un seul lien "Équipe" dans la navigation

Pourquoi le cache pose problème ? Docker utilise un système de cache par couches. Si les fichiers copiés n'ont pas changé selon l'algorithme de détection de Docker, il réutilise les couches en cache. C'est pourquoi il faut forcer un rebuild complet avec --no-cache pour garantir que tous les fichiers sont bien copiés et que l'application est reconstruite avec les dernières modifications.

Déploiement statique

Build des fichiers statiques

npm install
npm run build

Les fichiers sont générés dans le répertoire build/.

Servir avec un serveur web

Nginx

server {
    listen 80;
    server_name coeurbox.syoul.fr;
    root /chemin/vers/build;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

Apache

<VirtualHost *:80>
    ServerName coeurbox.syoul.fr
    DocumentRoot /chemin/vers/build

    <Directory /chemin/vers/build>
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
    </Directory>
</VirtualHost>

Déploiement avec Drone CI

Le projet est configuré pour le déploiement automatique via Drone CI (.drone.yml).

Pipeline de déploiement

1. Build : Construction de l'image Docker
2. Déploiement : Lancement du conteneur avec Docker Compose
3. Notification : Envoi d'une notification Telegram

Configuration Drone

Le pipeline utilise :

• Variables d'environnement dynamiques basées sur le dépôt Git
• Labels pour le reverse proxy (Traefik)
• Notifications Telegram en cas de succès/échec

Variables d'environnement Drone

• DRONE_REPO_OWNER : Propriétaire du dépôt
• DRONE_REPO_NAME : Nom du dépôt
• DRONE_COMMIT_BRANCH : Branche du commit

Ces variables sont utilisées pour générer le BASE_PATH dynamiquement.

Déploiement en production

Étapes recommandées

1. Préparer l'environnement

   git clone https://git.open.us.org/AJR/TechradarDev.git
   cd TechradarDev
   

2. Configurer les variables

   • Définir BASE_PATH selon votre configuration
   • Ajuster les ports si nécessaire

3. Build et démarrage

   cd docker
   docker compose -f docker-compose.yml -f docker-compose.labels.yml up -d --build
   

4. Vérifier le déploiement

   • Accéder à l'URL configurée
   • Vérifier les logs : docker compose logs -f

Reverse proxy

Le projet est configuré pour fonctionner derrière un reverse proxy (Traefik) via les labels dans docker-compose.labels.yml.

Sécurité

• Utiliser HTTPS en production
• Configurer les headers de sécurité appropriés
• Limiter l'accès si nécessaire
• Surveiller les logs
• Le Radar Business est protégé par un mot de passe client-side

Mise à jour

Mettre à jour le contenu

1. Modifier les fichiers dans radar-business/2025-01-15/
2. Rebuild l'image :

   docker compose build --no-cache
   docker compose up -d
   

Mettre à jour les dépendances

1. Modifier package.json si nécessaire
2. Rebuild l'image complète avec --no-cache

Mettre à jour les profils équipe

1. Modifier les fichiers dans docs/data/team/*.md
2. Régénérer les données :

   node scripts/generate-team-visualization-data.js
   

3. Rebuild l'image Docker

Monitoring

Logs Docker

# Voir les logs
docker compose logs -f

# Logs du dernier démarrage
docker compose logs --tail=100

Santé de l'application

Radar Principal : Expose le port 3000. Vérifier avec :

curl http://localhost:3000/techradar

Radar Technologique Laplank : Expose le port 3006 (mappé depuis 3000). Vérifier avec :

curl http://localhost:3006/

Note : Le Radar Technologique Laplank est protégé par un mot de passe, donc la réponse peut être l'écran d'authentification.

Vérifications post-déploiement

1. Vérifier la navigation :

   • Le lien "👥 Équipe" doit apparaître une seule fois
   • Tous les liens doivent fonctionner

2. Vérifier les données :

   • Tous les blips doivent être affichés (38 blips)
   • Les rings doivent être corrects (adopt, trial, assess, hold)

3. Vérifier la page équipe :

   • /team doit être accessible
   • Les visualisations doivent se charger
   • Les données doivent être présentes

Rollback

En cas de problème, revenir à une version précédente :

# Arrêter le conteneur actuel
docker compose down

# Checkout une version précédente
git checkout <commit-hash>

# Rebuild et redémarrer
docker compose build --no-cache
docker compose up -d

Troubleshooting

Voir troubleshooting.md pour les problèmes courants et leurs solutions.