229 lines
6.7 KiB
Markdown
229 lines
6.7 KiB
Markdown
# 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
|
|
```bash
|
|
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
|
|
```bash
|
|
NEXT_PUBLIC_FRONT_APP_HOST=https://app.example.com
|
|
NEXT_PUBLIC_FRONT_APP_PORT=443
|
|
```
|
|
|
|
#### Intégrations externes
|
|
```bash
|
|
# 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:
|
|
|
|
1. **deps**: Installation des dépendances avec support SSH pour git.4nkweb.com
|
|
2. **development**: Image de développement avec hot-reload
|
|
3. **builder**: Build de production
|
|
4. **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
|
|
|
|
```yaml
|
|
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
|
|
|
|
1. **Documentation**: Maintenir la documentation des variables d'environnement
|
|
2. **Tests**: Étendre la couverture de tests
|
|
3. **Monitoring**: Ajouter des métriques de performance
|
|
4. **Sécurité**: Auditer régulièrement les dépendances
|
|
5. **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*
|