4nk/4NK_IA_front
5
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity
4NK_IA_front/docs/DEPLOYMENT.md

11 KiB
Raw Blame History

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.2

Changements principaux

  • Suppression du « mode démo » côté frontend et des fallbacks
  • Routage des APIs externes exclusivement via le backend 4NK_IA_back
  • Exigence Node.js ≥ 20.19 pour la compilation

Impact déploiement

  • Variables .env front simplifiées (uniquement VITE_API_URL)
  • Build requis avec Node.js ≥ 20.19

É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):

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 : >= 20.19.0 (ou >= 22.12.0)
  • npm : >= 10.0.0
  • nvm : recommandé, le projet fournit .nvmrc
  • 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)

NODE_ENV=development
VITE_API_URL=http://localhost:8000

Staging (.env.staging)

NODE_ENV=staging
VITE_API_URL=https://api-staging.4nkweb.com

Production (.env.production)

NODE_ENV=production
VITE_API_URL=https://api.4nkweb.com

Build de production

Script de build

# 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

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

Déploiement via Docker

Construction et push de l'image

# Construire l'image (tag par défaut: commit SHA court)
./scripts/docker-build.sh

# Construire avec tag explicite
IMAGE_TAG=0.1.3 ./scripts/docker-build.sh

# Pousser vers git.4nkweb.com (authentification requise)
IMAGE_TAG=0.1.3 ./scripts/docker-push.sh

Lancement de l'image

docker run -d --name 4nk-ia-front -p 8080:80 git.4nkweb.com/4nk/4nk-ia-front:0.1.3

Fichier de configuration

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

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

# 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

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

#!/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

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

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

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

#!/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

#!/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

<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é

# 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

# 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

# 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

# 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