549 lines
11 KiB
Markdown
549 lines
11 KiB
Markdown
# Guide de déploiement - 4NK IA Front Notarial
|
||
|
||
## Vue d'ensemble
|
||
|
||
Ce guide couvre le déploiement de l'application 4NK IA Front Notarial dans différents environnements.
|
||
|
||
## Notes de version 0.1.1
|
||
|
||
### Changements principaux
|
||
|
||
- Qualité: lint Markdown stabilisé (guides/rapports ignorés), ESLint corrigé et `coverage/` exclu
|
||
- TypeScript/Build: corrections dans `FilePreview`, `api`, et vues (typage couleurs MUI)
|
||
- Tests: exécution Vitest OK, build de production OK
|
||
|
||
### Impact déploiement
|
||
|
||
- Aucun changement de configuration serveur requis
|
||
- Un simple rebuild et synchronisation de `dist/` suffisent
|
||
|
||
### Étapes recommandées
|
||
|
||
1. Mettre à jour l’environnement: variables `.env.*` si nécessaire
|
||
2. Rebuilder l’application
|
||
3. Synchroniser `dist/` vers le serveur web et recharger Nginx
|
||
|
||
Exemple de séquence côté serveur (Nginx):
|
||
|
||
```bash
|
||
cd /var/www/4nk-ia-front
|
||
git fetch --all --prune
|
||
git checkout dev
|
||
git pull --ff-only
|
||
npm ci
|
||
npm run build
|
||
sudo systemctl reload nginx
|
||
```
|
||
|
||
## Prérequis
|
||
|
||
### Environnement de développement
|
||
|
||
- **Node.js** : >= 22.12.0 (recommandé) ou >= 20.19.0
|
||
- **npm** : >= 10.0.0
|
||
- **Git** : Pour la gestion des versions
|
||
|
||
### Environnement de production
|
||
|
||
- **Serveur web** : Nginx ou Apache
|
||
- **HTTPS** : Certificat SSL valide
|
||
- **CDN** : Optionnel pour les assets statiques
|
||
|
||
## Configuration des environnements
|
||
|
||
### Variables d'environnement
|
||
|
||
#### Développement (.env.development)
|
||
|
||
```env
|
||
NODE_ENV=development
|
||
VITE_API_URL=http://localhost:8000
|
||
VITE_CADASTRE_API_URL=https://api.cadastre.gouv.fr
|
||
VITE_GEORISQUES_API_URL=https://www.georisques.gouv.fr/api
|
||
VITE_GEOFONCIER_API_URL=https://api.geofoncier.fr
|
||
VITE_BODACC_API_URL=https://api.bodacc.fr
|
||
VITE_INFOGREFFE_API_URL=https://api.infogreffe.fr
|
||
```
|
||
|
||
#### Staging (.env.staging)
|
||
|
||
```env
|
||
NODE_ENV=staging
|
||
VITE_API_URL=https://api-staging.4nkweb.com
|
||
VITE_CADASTRE_API_URL=https://api.cadastre.gouv.fr
|
||
VITE_GEORISQUES_API_URL=https://www.georisques.gouv.fr/api
|
||
VITE_GEOFONCIER_API_URL=https://api.geofoncier.fr
|
||
VITE_BODACC_API_URL=https://api.bodacc.fr
|
||
VITE_INFOGREFFE_API_URL=https://api.infogreffe.fr
|
||
```
|
||
|
||
#### Production (.env.production)
|
||
|
||
```env
|
||
NODE_ENV=production
|
||
VITE_API_URL=https://api.4nkweb.com
|
||
VITE_CADASTRE_API_URL=https://api.cadastre.gouv.fr
|
||
VITE_GEORISQUES_API_URL=https://www.georisques.gouv.fr/api
|
||
VITE_GEOFONCIER_API_URL=https://api.geofoncier.fr
|
||
VITE_BODACC_API_URL=https://api.bodacc.fr
|
||
VITE_INFOGREFFE_API_URL=https://api.infogreffe.fr
|
||
```
|
||
|
||
## Build de production
|
||
|
||
### Script de build
|
||
|
||
```bash
|
||
# Build standard
|
||
npm run build
|
||
|
||
# Build avec analyse
|
||
npm run build -- --analyze
|
||
|
||
# Build pour un environnement spécifique
|
||
npm run build -- --mode production
|
||
```
|
||
|
||
### Optimisations automatiques
|
||
|
||
- **Minification** : Code JavaScript et CSS minifié
|
||
- **Tree shaking** : Élimination du code mort
|
||
- **Code splitting** : Division en chunks optimaux
|
||
- **Asset optimization** : Optimisation des images et fonts
|
||
|
||
### Structure du build
|
||
|
||
```text
|
||
dist/
|
||
├── index.html # Point d'entrée HTML
|
||
├── assets/
|
||
│ ├── index-[hash].js # Bundle principal
|
||
│ ├── index-[hash].css # Styles principaux
|
||
│ ├── [chunk]-[hash].js # Chunks de code splitting
|
||
│ └── [asset]-[hash].[ext] # Assets optimisés
|
||
└── favicon.ico # Icône du site
|
||
```
|
||
|
||
## Déploiement sur serveur
|
||
|
||
### Configuration Nginx
|
||
|
||
#### Fichier de configuration
|
||
|
||
```nginx
|
||
server {
|
||
listen 80;
|
||
listen [::]:80;
|
||
server_name app.4nkweb.com;
|
||
return 301 https://$server_name$request_uri;
|
||
}
|
||
|
||
server {
|
||
listen 443 ssl http2;
|
||
listen [::]:443 ssl http2;
|
||
server_name app.4nkweb.com;
|
||
|
||
# Certificats SSL
|
||
ssl_certificate /path/to/certificate.crt;
|
||
ssl_certificate_key /path/to/private.key;
|
||
|
||
# Configuration SSL
|
||
ssl_protocols TLSv1.2 TLSv1.3;
|
||
ssl_ciphers ECDHE-RSA-AES256-GCM-SHA512:DHE-RSA-AES256-GCM-SHA512;
|
||
ssl_prefer_server_ciphers off;
|
||
|
||
# HSTS
|
||
add_header Strict-Transport-Security "max-age=63072000" always;
|
||
|
||
# Root directory
|
||
root /var/www/4nk-ia-front/dist;
|
||
index index.html;
|
||
|
||
# Gestion des routes SPA
|
||
location / {
|
||
try_files $uri $uri/ /index.html;
|
||
}
|
||
|
||
# Cache des assets statiques
|
||
location /assets/ {
|
||
expires 1y;
|
||
add_header Cache-Control "public, immutable";
|
||
}
|
||
|
||
# Sécurité
|
||
add_header X-Frame-Options "SAMEORIGIN" always;
|
||
add_header X-Content-Type-Options "nosniff" always;
|
||
add_header X-XSS-Protection "1; mode=block" always;
|
||
|
||
# Compression
|
||
gzip on;
|
||
gzip_vary on;
|
||
gzip_min_length 1024;
|
||
gzip_types text/plain text/css text/xml text/javascript application/javascript application/xml+rss application/json;
|
||
}
|
||
```
|
||
|
||
### Configuration Apache
|
||
|
||
#### Fichier .htaccess
|
||
|
||
```apache
|
||
RewriteEngine On
|
||
|
||
# Redirection HTTPS
|
||
RewriteCond %{HTTPS} off
|
||
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
|
||
|
||
# Gestion des routes SPA
|
||
RewriteCond %{REQUEST_FILENAME} !-f
|
||
RewriteCond %{REQUEST_FILENAME} !-d
|
||
RewriteRule . /index.html [L]
|
||
|
||
# Cache des assets
|
||
<FilesMatch "\.(css|js|png|jpg|jpeg|gif|ico|svg)$">
|
||
ExpiresActive On
|
||
ExpiresDefault "access plus 1 year"
|
||
Header set Cache-Control "public, immutable"
|
||
</FilesMatch>
|
||
|
||
# Compression
|
||
<IfModule mod_deflate.c>
|
||
AddOutputFilterByType DEFLATE text/plain
|
||
AddOutputFilterByType DEFLATE text/html
|
||
AddOutputFilterByType DEFLATE text/xml
|
||
AddOutputFilterByType DEFLATE text/css
|
||
AddOutputFilterByType DEFLATE application/xml
|
||
AddOutputFilterByType DEFLATE application/xhtml+xml
|
||
AddOutputFilterByType DEFLATE application/rss+xml
|
||
AddOutputFilterByType DEFLATE application/javascript
|
||
AddOutputFilterByType DEFLATE application/x-javascript
|
||
</IfModule>
|
||
|
||
# Sécurité
|
||
Header always set X-Frame-Options "SAMEORIGIN"
|
||
Header always set X-Content-Type-Options "nosniff"
|
||
Header always set X-XSS-Protection "1; mode=block"
|
||
Header always set Strict-Transport-Security "max-age=63072000"
|
||
```
|
||
|
||
## Déploiement avec Docker
|
||
|
||
### Dockerfile
|
||
|
||
```dockerfile
|
||
# Build stage
|
||
FROM node:22.12-alpine AS builder
|
||
|
||
WORKDIR /app
|
||
COPY package*.json ./
|
||
RUN npm ci --only=production
|
||
|
||
COPY . .
|
||
RUN npm run build
|
||
|
||
# Production stage
|
||
FROM nginx:alpine
|
||
|
||
COPY --from=builder /app/dist /usr/share/nginx/html
|
||
COPY nginx.conf /etc/nginx/nginx.conf
|
||
|
||
EXPOSE 80
|
||
CMD ["nginx", "-g", "daemon off;"]
|
||
```
|
||
|
||
### docker-compose.yml
|
||
|
||
```yaml
|
||
version: '3.8'
|
||
|
||
services:
|
||
frontend:
|
||
build: .
|
||
ports:
|
||
- "80:80"
|
||
- "443:443"
|
||
volumes:
|
||
- ./ssl:/etc/nginx/ssl:ro
|
||
environment:
|
||
- NODE_ENV=production
|
||
restart: unless-stopped
|
||
```
|
||
|
||
### Script de déploiement
|
||
|
||
```bash
|
||
#!/bin/bash
|
||
# deploy.sh
|
||
|
||
set -e
|
||
|
||
echo "Building application..."
|
||
docker build -t 4nk-ia-front .
|
||
|
||
echo "Stopping existing container..."
|
||
docker stop 4nk-ia-front || true
|
||
docker rm 4nk-ia-front || true
|
||
|
||
echo "Starting new container..."
|
||
docker run -d \
|
||
--name 4nk-ia-front \
|
||
-p 80:80 \
|
||
-p 443:443 \
|
||
-v /path/to/ssl:/etc/nginx/ssl:ro \
|
||
4nk-ia-front
|
||
|
||
echo "Deployment completed!"
|
||
```
|
||
|
||
## Déploiement avec CI/CD
|
||
|
||
### GitHub Actions
|
||
|
||
```yaml
|
||
name: Deploy
|
||
|
||
on:
|
||
push:
|
||
branches: [release]
|
||
|
||
jobs:
|
||
deploy:
|
||
runs-on: ubuntu-latest
|
||
|
||
steps:
|
||
- uses: actions/checkout@v3
|
||
|
||
- name: Setup Node.js
|
||
uses: actions/setup-node@v3
|
||
with:
|
||
node-version: '22.12'
|
||
cache: 'npm'
|
||
|
||
- name: Install dependencies
|
||
run: npm ci
|
||
|
||
- name: Run tests
|
||
run: npm run test
|
||
|
||
- name: Build application
|
||
run: npm run build
|
||
env:
|
||
NODE_ENV: production
|
||
VITE_API_URL: ${{ secrets.API_URL }}
|
||
|
||
- name: Deploy to server
|
||
uses: appleboy/ssh-action@v0.1.5
|
||
with:
|
||
host: ${{ secrets.HOST }}
|
||
username: ${{ secrets.USERNAME }}
|
||
key: ${{ secrets.SSH_KEY }}
|
||
script: |
|
||
cd /var/www/4nk-ia-front
|
||
git pull origin release
|
||
npm ci
|
||
npm run build
|
||
sudo systemctl reload nginx
|
||
```
|
||
|
||
### GitLab CI
|
||
|
||
```yaml
|
||
stages:
|
||
- test
|
||
- build
|
||
- deploy
|
||
|
||
test:
|
||
stage: test
|
||
image: node:22.12-alpine
|
||
script:
|
||
- npm ci
|
||
- npm run test
|
||
only:
|
||
- merge_requests
|
||
- release
|
||
|
||
build:
|
||
stage: build
|
||
image: node:22.12-alpine
|
||
script:
|
||
- npm ci
|
||
- npm run build
|
||
artifacts:
|
||
paths:
|
||
- dist/
|
||
expire_in: 1 hour
|
||
only:
|
||
- release
|
||
|
||
deploy:
|
||
stage: deploy
|
||
image: alpine:latest
|
||
before_script:
|
||
- apk add --no-cache openssh-client
|
||
- eval $(ssh-agent -s)
|
||
- echo "$SSH_PRIVATE_KEY" | tr -d '\r' | ssh-add -
|
||
- mkdir -p ~/.ssh
|
||
- chmod 700 ~/.ssh
|
||
script:
|
||
- scp -r dist/* $DEPLOY_USER@$DEPLOY_HOST:/var/www/4nk-ia-front/
|
||
- ssh $DEPLOY_USER@$DEPLOY_HOST "sudo systemctl reload nginx"
|
||
only:
|
||
- release
|
||
```
|
||
|
||
## Monitoring et surveillance
|
||
|
||
### Métriques de performance
|
||
|
||
- **Temps de chargement** : Mesure du First Contentful Paint
|
||
- **Taille des bundles** : Surveillance de la taille des assets
|
||
- **Erreurs JavaScript** : Tracking des erreurs côté client
|
||
|
||
### Outils de monitoring
|
||
|
||
- **Google Analytics** : Analytics et performance
|
||
- **Sentry** : Monitoring des erreurs
|
||
- **Lighthouse** : Audit de performance
|
||
|
||
### Configuration Sentry
|
||
|
||
```typescript
|
||
import * as Sentry from "@sentry/react";
|
||
|
||
Sentry.init({
|
||
dsn: "YOUR_SENTRY_DSN",
|
||
environment: process.env.NODE_ENV,
|
||
tracesSampleRate: 1.0,
|
||
});
|
||
```
|
||
|
||
## Rollback et récupération
|
||
|
||
### Stratégie de rollback
|
||
|
||
```bash
|
||
#!/bin/bash
|
||
# rollback.sh
|
||
|
||
PREVIOUS_VERSION=$1
|
||
|
||
if [ -z "$PREVIOUS_VERSION" ]; then
|
||
echo "Usage: ./rollback.sh <version>"
|
||
exit 1
|
||
fi
|
||
|
||
echo "Rolling back to version $PREVIOUS_VERSION..."
|
||
|
||
# Restaurer la version précédente
|
||
git checkout $PREVIOUS_VERSION
|
||
npm ci
|
||
npm run build
|
||
|
||
# Redéployer
|
||
sudo systemctl reload nginx
|
||
|
||
echo "Rollback completed!"
|
||
```
|
||
|
||
### Sauvegarde
|
||
|
||
```bash
|
||
#!/bin/bash
|
||
# backup.sh
|
||
|
||
BACKUP_DIR="/backups/4nk-ia-front"
|
||
DATE=$(date +%Y%m%d_%H%M%S)
|
||
|
||
# Créer le répertoire de sauvegarde
|
||
mkdir -p $BACKUP_DIR
|
||
|
||
# Sauvegarder les fichiers
|
||
tar -czf $BACKUP_DIR/backup_$DATE.tar.gz /var/www/4nk-ia-front
|
||
|
||
# Nettoyer les anciennes sauvegardes (garder 7 jours)
|
||
find $BACKUP_DIR -name "backup_*.tar.gz" -mtime +7 -delete
|
||
|
||
echo "Backup completed: backup_$DATE.tar.gz"
|
||
```
|
||
|
||
## Sécurité
|
||
|
||
### Headers de sécurité
|
||
|
||
- **CSP** : Content Security Policy
|
||
- **HSTS** : HTTP Strict Transport Security
|
||
- **X-Frame-Options** : Protection contre le clickjacking
|
||
- **X-Content-Type-Options** : Protection contre MIME sniffing
|
||
|
||
### Configuration CSP
|
||
|
||
```html
|
||
<meta http-equiv="Content-Security-Policy" content="
|
||
default-src 'self';
|
||
script-src 'self' 'unsafe-inline' 'unsafe-eval';
|
||
style-src 'self' 'unsafe-inline';
|
||
img-src 'self' data: https:;
|
||
connect-src 'self' https://api.4nkweb.com;
|
||
font-src 'self' data:;
|
||
">
|
||
```
|
||
|
||
### Audit de sécurité
|
||
|
||
```bash
|
||
# Audit des dépendances
|
||
npm audit
|
||
|
||
# Audit de sécurité avec Snyk
|
||
npx snyk test
|
||
|
||
# Scan de vulnérabilités
|
||
npx audit-ci --config audit-ci.json
|
||
```
|
||
|
||
## Maintenance
|
||
|
||
### Mise à jour des dépendances
|
||
|
||
```bash
|
||
# Vérifier les mises à jour
|
||
npm outdated
|
||
|
||
# Mettre à jour les dépendances
|
||
npm update
|
||
|
||
# Mise à jour majeure
|
||
npx npm-check-updates -u
|
||
npm install
|
||
```
|
||
|
||
### Nettoyage
|
||
|
||
```bash
|
||
# Nettoyer le cache npm
|
||
npm cache clean --force
|
||
|
||
# Nettoyer les node_modules
|
||
rm -rf node_modules package-lock.json
|
||
npm install
|
||
|
||
# Nettoyer le build
|
||
rm -rf dist
|
||
npm run build
|
||
```
|
||
|
||
### Logs et debugging
|
||
|
||
```bash
|
||
# Logs Nginx
|
||
sudo tail -f /var/log/nginx/access.log
|
||
sudo tail -f /var/log/nginx/error.log
|
||
|
||
# Logs de l'application
|
||
sudo journalctl -u nginx -f
|
||
|
||
# Debug des erreurs
|
||
sudo nginx -t # Test de configuration
|
||
```
|