Déploiement d'une application JavaScript sur VPS : guide étape par étape

Formateur Python en ligne pour débutants

Apprenez Python facilement sans surcharge théorique. Résolvez des tâches pratiques avec vérification automatique et écrivez du code directement dans le navigateur.

Start Course
```html

Introduction : pourquoi un VPS est le meilleur choix pour la production

Développer une application JavaScript avec Node.js n'est que la moitié du travail. La seconde partie, tout aussi importante, est le déploiement sur un serveur de production. De nombreux développeurs débutants utilisent des hébergements gratuits (Heroku, Render, Vercel), mais pour des projets sérieux, un VPS (Virtual Private Server) sera tôt ou tard nécessaire.

Un VPS offre un contrôle total sur l'environnement : vous choisissez vous-même la version de Node.js, configurez le serveur web, gérez les processus et les ressources. Dans cet article, nous allons détailler le processus étape par étape pour déployer une application JavaScript sur un VPS en utilisant des outils modernes : Nginx comme reverse proxy, PM2 pour la gestion des processus, Let's Encrypt pour le SSL et GitHub Actions pour l'automatisation.

Étape 1 : Préparation du serveur et installation des logiciels nécessaires

La première étape consiste à vous connecter à votre VPS (généralement via SSH) et à installer un ensemble d'outils de base. Supposons que vous utilisiez Ubuntu 22.04 LTS.

# Mise à jour des paquets
sudo apt update && sudo apt upgrade -y

# Installation de Node.js (recommandé via NodeSource)
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt install -y nodejs

# Vérification des versions
node -v
npm -v

# Installation de Git (s'il n'est pas déjà installé)
sudo apt install git -y

# Installation de Nginx
sudo apt install nginx -y

Configurez également un pare-feu de base (UFW) :

sudo ufw allow OpenSSH
sudo ufw allow 'Nginx Full'
sudo ufw enable

Étape 2 : Clonage du dépôt et configuration de l'application

Il faut maintenant transférer le code de l'application sur le serveur. La méthode la plus simple est de cloner le dépôt depuis GitHub/GitLab.

# Aller dans le répertoire /var/www (standard pour les projets web)
cd /var/www

# Cloner le dépôt (remplacez par votre URL)
sudo git clone https://github.com/votre-utilisateur/votre-repository.git myapp

# Donner les droits à l'utilisateur courant
sudo chown -R $USER:$USER /var/www/myapp

# Aller dans le dossier de l'application
cd /var/www/myapp

# Installer les dépendances
npm install --production

Créez un fichier .env pour les variables d'environnement (port, clés API, chaîne de connexion à la base de données) :

# Exemple .env
PORT=3000
NODE_ENV=production
DATABASE_URL=mongodb://localhost:27017/myapp
JWT_SECRET=votre-clé-secrète

Étape 3 : Configuration de PM2 pour la gestion des processus

PM2 est un gestionnaire de processus pour Node.js qui redémarre automatiquement l'application en cas de crash et la maintient en fonctionnement en arrière-plan.

# Installation globale de PM2
sudo npm install -g pm2

# Démarrage de l'application (si le point d'entrée est app.js ou server.js)
pm2 start app.js --name "myapp"

# Sauvegarde de la liste des processus pour un démarrage automatique au redémarrage
pm2 save
pm2 startup systemd

Après avoir exécuté pm2 startup, vous verrez une commande à exécuter avec les droits root. Copiez-la et exécutez-la.

Vous pouvez vérifier le statut avec la commande pm2 status. Si l'application est lancée, elle sera accessible à l'adresse http://votre-ip:3000 (port défini dans .env).

Étape 4 : Configuration de Nginx comme reverse proxy

Un accès direct à Node.js via le port 3000 n'est pas une bonne pratique. Il est préférable d'utiliser Nginx comme serveur proxy, qui acceptera les requêtes sur le port 80 (HTTP) et les redirigera vers votre application.

Créez un fichier de configuration pour votre domaine (ou IP) :

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

Insérez le code suivant :

server {
    listen 80;
    server_name votre-domaine.ru www.votre-domaine.ru;

    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connectio
```                

Blogs

Book Recommendations