6.7 KiB
Analyse du Repository lecoffre-front
Vue d'ensemble
Le projet lecoffre-front est une application Next.js développée en TypeScript pour la gestion de dossiers notariaux. Il s'agit d'une application frontend qui communique avec une API backend et intègre plusieurs services externes.
Structure du Repository
Architecture générale
lecoffre-front/
├── src/ # Code source principal
│ ├── common/ # Code partagé
│ │ └── Api/ # Services API communs
│ ├── front/ # Code spécifique au frontend
│ │ ├── Api/ # Services API frontend
│ │ ├── Components/ # Composants React
│ │ ├── Config/ # Configuration par environnement
│ │ ├── Hooks/ # Hooks React personnalisés
│ │ ├── Services/ # Services métier
│ │ ├── Stores/ # Gestion d'état
│ │ ├── Themes/ # Thèmes et styles
│ │ └── Utils/ # Utilitaires
│ ├── pages/ # Pages Next.js
│ └── sdk/ # SDK et intégrations
├── docs/ # Documentation
├── tests/ # Tests
├── public/ # Assets statiques
├── Dockerfile # Configuration Docker
├── next.config.js # Configuration Next.js
├── package.json # Dépendances et scripts
└── temp.yaml # Configuration Kubernetes temporaire
Technologies utilisées
- Framework: Next.js 14.2.3
- Language: TypeScript 4.9.5
- UI: Material-UI (MUI) 5.11.13
- Styling: Emotion, SASS
- État: Context API / Hooks
- Build: Docker multi-stage
- Déploiement: Kubernetes
Variables d'Environnement
Variables principales
Le projet utilise un système de variables d'environnement préfixées par NEXT_PUBLIC_
pour la configuration runtime.
Configuration API Backend
NEXT_PUBLIC_BACK_API_PROTOCOL=https://
NEXT_PUBLIC_BACK_API_HOST=api.example.com
NEXT_PUBLIC_BACK_API_PORT=443
NEXT_PUBLIC_BACK_API_ROOT_URL=/api
NEXT_PUBLIC_BACK_API_VERSION=v1
Configuration Frontend
NEXT_PUBLIC_FRONT_APP_HOST=https://app.example.com
NEXT_PUBLIC_FRONT_APP_PORT=443
Intégrations externes
# IDNot (authentification)
NEXT_PUBLIC_IDNOT_AUTHORIZE_ENDPOINT=/oauth/authorize
NEXT_PUBLIC_IDNOT_CLIENT_ID=client_id
NEXT_PUBLIC_IDNOT_BASE_URL=https://idnot.example.com
NEXT_PUBLIC_IDNOT_REDIRECT_URI=https://app.example.com/callback
# Docaposte
NEXT_PUBLIC_DOCAPOSTE_API_URL=https://api.docaposte.com
# 4NK (services blockchain)
NEXT_PUBLIC_4NK_URL=https://dev4.4nkweb.com
NEXT_PUBLIC_4NK_IFRAME_URL=https://dev4.4nkweb.com
# Hotjar (analytics)
NEXT_PUBLIC_HOTJAR_SITE_ID=123456
NEXT_PUBLIC_HOTJAR_VERSION=6
# Configuration système
NEXT_PUBLIC_API_URL=https://api.example.com
NEXT_PUBLIC_DEFAULT_VALIDATOR_ID=862406317a35064537ac959cb5d8bbdf4f849283b63db3ffa9904de2b3427c43:0
NEXT_PUBLIC_DEFAULT_STORAGE_URLS=https://dev3.4nkweb.com/storage
Gestion des environnements
Le projet supporte 4 environnements via la variable NEXTJS_APP_ENV_NAME
:
development
(par défaut)staging
preprod
production
Chaque environnement a sa configuration dans src/front/Config/Module/
:
development.json
staging.json
preprod.json
production.json
Configuration Docker
Multi-stage build
Le Dockerfile utilise un build multi-stage avec 3 cibles:
- deps: Installation des dépendances avec support SSH pour git.4nkweb.com
- development: Image de développement avec hot-reload
- builder: Build de production
- int-dev: Image de production finale
Variables d'environnement Docker
Toutes les variables NEXT_PUBLIC_*
sont passées comme arguments de build et variables d'environnement runtime.
Sécurité
- Utilisateur non-root (
lecoffreuser
avec UID 10000) - Support SSH agent pour cloner les dépendances privées
- Cache npm pour optimiser les builds
Configuration Kubernetes
Déploiement
Le fichier temp.yaml
contient la configuration Kubernetes complète:
- Namespace:
lecoffre
- Service:
lecoffre-front-svc
(port 80 → 3000) - Deployment:
lecoffre-front
avec 1 replica - Ingress:
app.stg.lecoffre.smart-chain.fr
avec SSL
Gestion des secrets
- Vault: Intégration HashiCorp Vault pour les secrets
- External Secrets: Gestion automatique des secrets Docker
- Service Account:
lecoffre-front-sa
avec permissions appropriées
Ressources
resources:
limits:
memory: 2Gi
requests:
cpu: 200m
memory: 1Gi
Dépendances principales
Production
- Next.js: 14.2.3 (framework React)
- React: 18.2.0
- Material-UI: 5.11.13 (composants UI)
- TypeScript: 4.9.5
- le-coffre-resources: v2.167 (ressources partagées)
Développement
- ESLint: 8.36.0
- Prettier: 2.8.7
- SASS: 1.59.2
Intégrations
- Google Tag Manager: Analytics
- Hotjar: Heatmaps et enregistrements
- Docaposte: Services postaux
- 4NK: Services blockchain
Architecture de l'application
Gestion d'état
- FrontendVariables: Singleton pour les variables d'environnement
- Module: Configuration par environnement
- Context API: Gestion d'état React
Communication API
- DatabaseService: Service générique pour les appels API
- BaseApiService: Service de base pour les API
- Construction dynamique d'URLs: Basée sur les variables d'environnement
SDK et intégrations
- Iframe: Communication avec les services 4NK
- MessageBus: Bus de messages pour la communication inter-iframe
- User: Gestion de l'authentification utilisateur
- AuthModal: Modal d'authentification
Points d'attention
Sécurité
- Variables d'environnement exposées côté client (préfixe
NEXT_PUBLIC_
) - Authentification via IDNot
- Communication sécurisée avec les services 4NK
Performance
- Build standalone Next.js
- Cache npm dans Docker
- Optimisation des images avec Sharp
Déploiement
- Support multi-environnement
- Intégration Vault pour les secrets
- Monitoring avec Hotjar et GTM
Recommandations
- Documentation: Maintenir la documentation des variables d'environnement
- Tests: Étendre la couverture de tests
- Monitoring: Ajouter des métriques de performance
- Sécurité: Auditer régulièrement les dépendances
- CI/CD: Automatiser les déploiements avec validation des variables
Version actuelle
- Application: v0.1.6 (package.json)
- Frontend: v2.5.1 (version.json)
- Docker: v0.1.9 (temp.yaml)
Analyse effectuée le $(date) - Repository lecoffre-front