Déployer un site Node.js/React sur un VPS YorkHost

Prérequis

Avant de commencer, assurez-vous d'avoir :

• Un VPS YorkHost avec accès SSH (Ubuntu/Debian)

• Un nom de domaine (dans cet exemple, nous utilisons Cloudflare comme gestionnaire DNS)

• 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 :

apt update && 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 | bash -
apt install -y nodejs

Vérifiez l'installation :

node -v
npm -v

---

Étape 3 : Installation des outils nécessaires

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

apt install -y git nginx
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 "[email protected]"

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 [email protected]

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 :

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

Avec SSH (recommandé) :

git clone [email protected]:votre-utilisateur/votre-repo.git monsite

Avec Personal Access Token :

git clone https://[email protected]/votre-utilisateur/votre-repo.git monsite

Accédez au répertoire du projet :

cd 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

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

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

Configurez PM2 pour démarrer automatiquement au reboot :

pm2 startup
pm2 save

Vérifiez que l'application tourne :

pm2 status
pm2 logs monsite

---

Étape 7 : Configuration de Nginx comme reverse proxy

Créez un fichier de configuration Nginx :

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 :

ln -s /etc/nginx/sites-available/monsite /etc/nginx/sites-enabled/
nginx -t
systemctl restart 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	Contenu
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 :

apt install -y certbot python3-certbot-nginx

Obtenez et installez le certificat :

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 :

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 :

nginx -t && systemctl reload nginx

---

Étape 10 : Mise à jour automatique depuis GitHub

Créez un script de déploiement :

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	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 : ufw status et autorisez le port 80 : ufw allow 80

• Vérifiez que les DNS Cloudflare 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

---

Support

Besoin d'aide ? Contactez le support YorkHost :

• Email : [email protected]

• Discord : discord.gg/yorkhost

• Panel : panel.yorkhost.fr

---

Documentation YorkHost - Dernière mise à jour : Décembre 2025