Déployer une application Node.js/React

Ce guide complet vous explique comment déployer une application Node.js/React sur votre VPS YorkHost avec PM2, Nginx et SSL.

Prérequis

Avant de commencer, assurez-vous d'avoir :

• Un VPS YorkHost avec accès SSH (Ubuntu/Debian)
• Un nom de domaine pointant vers votre VPS
• Un dépôt GitHub contenant votre projet Node.js/React
• Accès root ou sudo sur votre VPS

Étape 1 : Connexion et préparation du VPS

Connectez-vous à votre VPS via SSH :

ssh root@votre-ip-vps

Mettez à jour le système :

sudo apt update && sudo apt upgrade -y

Étape 2 : Installation de Node.js

Installez Node.js via NodeSource (version LTS recommandée) :

curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt-get install -y nodejs

Vérifiez l'installation :

node --version
npm --version

Étape 3 : Installation des outils nécessaires

Installez Git, PM2 (gestionnaire de processus) et Nginx (reverse proxy) :

sudo apt install git nginx -y
sudo npm install -g pm2

Étape 4 : Cloner votre projet depuis GitHub

Configuration de l'authentification GitHub

GitHub ne permet plus l'authentification par mot de passe. Vous avez deux options :

Option A : Clé SSH (recommandé)

Générez une clé SSH sur votre VPS :

ssh-keygen -t ed25519 -C "votre@email.com"

Appuyez sur Entrée pour accepter l'emplacement par défaut, puis définissez une passphrase (optionnel).

Affichez la clé publique :

cat ~/.ssh/id_ed25519.pub

Copiez cette clé, puis ajoutez-la sur GitHub :

1. Allez sur GitHub.com → Settings → SSH and GPG keys
2. Cliquez sur New SSH key
3. Donnez un titre (ex: "VPS YorkHost") et collez la clé
4. Cliquez sur Add SSH key

Testez la connexion :

ssh -T git@github.com

Vous devriez voir : "Hi username! You've successfully authenticated..."

Option B : Personal Access Token (PAT)

Si vous préférez HTTPS, créez un token :

1. Allez sur GitHub.com → Settings → Developer settings → Personal access tokens → Tokens (classic)
2. Cliquez sur Generate new token (classic)
3. Donnez un nom, sélectionnez une expiration
4. Cochez au minimum le scope repo
5. Cliquez sur Generate token et copiez-le immédiatement

Cloner le projet

Créez un répertoire pour vos applications :

sudo mkdir -p /var/www
cd /var/www

Récupérer l'URL de votre dépôt

Sur GitHub, allez sur la page de votre dépôt, cliquez sur le bouton vert Code, puis copiez l'URL fournie :

• Onglet SSH pour l'URL SSH (ex: git@github.com:username/repo.git)
• Onglet HTTPS pour l'URL HTTPS (ex: https://github.com/username/repo.git)

Avec SSH (recommandé) :

sudo git clone git@github.com:votre-username/votre-repo.git monsite

Avec Personal Access Token :

sudo git clone https://votre-username:votre-token@github.com/votre-username/votre-repo.git monsite

Accédez au répertoire du projet :

cd /var/www/monsite

Étape 5 : Installation des dépendances et build

Installez les dépendances Node.js :

npm install

Pour un projet React (Create React App, Vite, Next.js), construisez l'application :

npm run build

Étape 6 : Lancer l'application avec PM2

Option A : Application React statique (recommandé pour CRA/Vite)

Servez les fichiers statiques avec serve :

npm install -g serve
pm2 start serve --name "monsite" -- -s build -l 3000

Vite

Pour Vite, le dossier de build est dist au lieu de build :

pm2 start serve --name "monsite" -- -s dist -l 3000

Option B : Application Node.js/Next.js avec serveur

pm2 start npm --name "monsite" -- start

Configuration du démarrage automatique

Configurez PM2 pour démarrer automatiquement au reboot :

pm2 startup
pm2 save

Vérifiez que l'application tourne :

pm2 status

Étape 7 : Configuration de Nginx comme reverse proxy

Créez un fichier de configuration Nginx :

sudo nano /etc/nginx/sites-available/monsite

Ajoutez cette configuration :

server {
    listen 80;
    server_name votredomaine.com www.votredomaine.com;

    location / {
        proxy_pass http://127.0.0.1:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header 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;
        proxy_cache_bypass $http_upgrade;
    }
}

Activez le site et redémarrez Nginx :

sudo ln -s /etc/nginx/sites-available/monsite /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx

Étape 8 : Configuration DNS

Configurez les enregistrements DNS chez votre registrar ou gestionnaire DNS pour pointer vers votre VPS.

Enregistrements à créer

Type	Nom	Valeur
A	@	votre-ip-vps
A	www	votre-ip-vps

L'enregistrement @ représente le domaine racine (exemple.com), et www le sous-domaine www.exemple.com.

Exemple avec Cloudflare

Si vous utilisez Cloudflare comme gestionnaire DNS :

1. Connectez-vous au dashboard Cloudflare
2. Sélectionnez votre domaine
3. Allez dans DNS → Records
4. Ajoutez les enregistrements A ci-dessus

Option Proxy Cloudflare

Vous pouvez activer le proxy (nuage orange) pour bénéficier de la protection DDoS et du CDN Cloudflare, ou le désactiver (nuage gris) pour un accès direct au serveur.

Étape 9 : Configuration SSL (HTTPS)

Sécurisez votre site avec un certificat SSL. Voici deux options selon votre configuration.

Option A : Certificat Let's Encrypt (gratuit)

Installez Certbot :

sudo apt install certbot python3-certbot-nginx -y

Obtenez et installez le certificat :

sudo certbot --nginx -d votredomaine.com -d www.votredomaine.com

Suivez les instructions et choisissez de rediriger HTTP vers HTTPS.

Le certificat se renouvellera automatiquement. Testez le renouvellement :

sudo certbot renew --dry-run

Option B : SSL via Cloudflare (si proxy activé)

Si vous utilisez le proxy Cloudflare (nuage orange), vous pouvez utiliser leur SSL :

1. Dans Cloudflare, allez dans SSL/TLS
2. Sélectionnez le mode Full (ou Full (Strict) avec un certificat origine)
3. Activez Always Use HTTPS dans Edge Certificates

Modifiez Nginx pour récupérer l'IP réelle des visiteurs :

server {
    listen 80;
    server_name votredomaine.com www.votredomaine.com;

    location / {
        proxy_pass http://127.0.0.1:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $http_cf_connecting_ip;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_cache_bypass $http_upgrade;
    }
}

Rechargez Nginx :

sudo nginx -t && sudo systemctl reload nginx

Étape 10 : Mise à jour automatique depuis GitHub

Créez un script de déploiement :

sudo nano /var/www/monsite/deploy.sh

#!/bin/bash
cd /var/www/monsite
git pull origin main
npm install
npm run build
pm2 restart monsite
echo "Déploiement terminé - $(date)"

Rendez-le exécutable :

chmod +x /var/www/monsite/deploy.sh

Pour déployer une mise à jour, exécutez simplement :

/var/www/monsite/deploy.sh

Commandes utiles

Action	Commande
Voir le statut de l'app	pm2 status
Voir les logs	pm2 logs monsite
Redémarrer l'app	pm2 restart monsite
Arrêter l'app	pm2 stop monsite
Tester config Nginx	nginx -t
Recharger Nginx	sudo systemctl reload nginx

Dépannage

L'application ne démarre pas

• Vérifiez les logs : pm2 logs monsite
• Assurez-vous que le port 3000 n'est pas utilisé : lsof -i :3000

Erreur 502 Bad Gateway

• Vérifiez que PM2 tourne : pm2 status
• Vérifiez que le port dans Nginx correspond au port de l'app

Le site n'est pas accessible

• Vérifiez le pare-feu : sudo ufw status et autorisez le port 80 : sudo ufw allow 80
• Vérifiez que les DNS pointent vers la bonne IP

Erreur SSL

• Assurez-vous que le mode SSL Cloudflare est sur "Full" et non "Full (Strict)" si vous n'avez pas de certificat origine

Variables d'environnement

Pour les applications nécessitant des variables d'environnement, créez un fichier .env :

nano /var/www/monsite/.env

Et ajoutez-le au .gitignore pour ne pas le versionner.