# 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
```