Préparation de l'environnement et compilation du projet

WordExpress, combinant Node.js, React, GraphQL et Apollo, nécessite une préparation adéquate avant sa mise en ligne. Commencez par récupérer le code source et installer les dépendances nécessaires via le gestionnaire de paquets npm.

git clone https://gitcode.com/gh_mirrors/wo/WordExpress
cd WordExpress
npm install

La compilation pour l'environnement de production s'appuie sur Webpack. Le fichier de configuration associé génère les ressources statiques dans un dossier spécifique. Lancez la commande de build pour préparer les assets :

npm run build

Les fichiers compilés seront disponibles dans le répertoire de distribution, tandis que le point d'entrée du serveur back end reste le fichier principal de l'application.

Prérequis serveur :

• Node.js 14 ou supérieur
• Nginx 1.18+
• PM2 pour la gestion des processus
• Un minimum de 1 Go de RAM (2 Go recommandés)

Gestion de l'application Node.js avec PM2

Afin de garantir la disponibilité continue du service backend, l'utilisation de PM2 est fortement recommandée pour superviser le processus.

npm install -g pm2
pm2 start app.js --name "wex-prod"

Configurez ensuite le démarrage automatique de PM2 au redémarrage du serveur :

pm2 startup
pm2 save

Les variables d'environnement sensibles, comme les jetons d'API ou les configurations de base de données, doivent être injectées directement dans l'environnement d'exécution plutôt que d'être codées en dur.

export NODE_PORT=8080
export API_SECRET=votre_cle_secrete

Configuration du proxy inverse Nginx

Nginx agit comme un proxy inverse pour transmettre les requêtes vers l'application Node.js. Créez un nouveau fichier de configuration virtuel dans le répertoire des sites disponibles.

upstream wex_backend {
    server 127.0.0.1:8080;
}

server {
    listen 80;
    server_name mon-domaine.fr;

    location / {
        proxy_pass http://wex_backend;
        proxy_http_version 1.1;
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

Activez la configuration en créant un lien symbolique et redémarrez Nginx :

ln -s /etc/nginx/sites-available/wordexpress /etc/nginx/sites-enabled/
nginx -t && systemctl restart nginx

Sécurisation avec SSL/TLS

Après obtention d'un certificat via Let's Encrypt, modifiez la configuration pour gérer le trafic HTTPS et optimiser les paramètres de chiffrement.

server {
    listen 443 ssl http2;
    server_name mon-domaine.fr;

    ssl_certificate /etc/letsencrypt/live/mon-domaine.fr/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/mon-domaine.fr/privkey.pem;
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_prefer_server_ciphers on;

    location / {
        proxy_pass http://wex_backend;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

Stratégies d'optimisation des performances

Pour accélérer le chargement des pages, la mise en cache des ressources statiques au niveau de Nginx est essentielle.

location ~* \.(?:js|css|png|jpe?g|gif|ico)$ {
    proxy_pass http://wex_backend;
    expires 15d;
    add_header Cache-Control "public";
}

L'activation de la compression Gzip et du protocole HTTP/2 réduit considérablement la taille des données transmises et améliore la multiplexation des requêtes.

server {
    listen 443 ssl http2;
    
    gzip on;
    gzip_vary on;
    gzip_min_length 300;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
    gzip_comp_level 6;
}

Côté application Express, ajustez la durée de mise en cache des fichiers statiques. Les fichiers HTML, en revanche, ne doivent pas être mis en cache pour garantir la distribution des dernières mises à jour.

const staticAssetsPath = './public';
const cacheDuration = 2592000000; // 30 jours en millisecondes

application.use(express.static(staticAssetsPath, {
  maxAge: cacheDuration,
  setHeaders: (res, filePath) => {
    if (filePath.endsWith('.html')) {
      res.setHeader('Cache-Control', 'no-store');
    }
  }
}));

Surveillance et maintenance

La journalisation est cruciale pour le diagnostic. Définissez des fichiers de logs spécifiques pour l'accès et les erreurs Nginx.

access_log /var/log/nginx/wex-access.log;
error_log /var/log/nginx/wex-error.log;

Pour l'application Node.js, PM2 offre un suivi en temps réel des journaux :

pm2 logs wex-prod

La mise en place de sauvegardes régulières via des tâches planifiées (cron) protège contre la perte de données.

# Sauvegarde quotidienne à 3h30 du matin
30 3 * * * tar -czf /backups/wex_$(date +\%F).tar.gz /var/www/wordexpress

Résolution des problèmes courants

Si des erreurs 404 apparaissent sur les fichiers statiques, vérifiez les permissions du répertoire de distribution pour l'utilisateur Nginx.

chmod -R 755 /var/www/wordexpress/public

En cas de ralentissement, l'analyse des ressources système permet d'identifier les goulots d'étranglement. Utilisez des outils comme top ou les fonctionnalités de profilage de Chrome DevTools pour examiner le comportement de l'application.

top -p $(pm2 pid wex-prod)