Nicolas Cantu
e69fa95463
- Fix line length issues in documentation files - Add language specifications to code blocks - Resolve duplicate heading in README.md - Ensure all markdown files follow best practices
518 lines
10 KiB
Markdown
518 lines
10 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.
|
|
|
|
## 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
|
|
```
|