Comment déployer une application Next.js sur un VPS

Guide complet pour déployer une application Next.js sur un VPS, couvrant la configuration du serveur, l'installation de Node.js (via NVM), le clonage de l'application, la compilation, l'utilisation de PM2 pour la gestion des processus, la configuration de Nginx en tant que proxy inverse et la configuration SSL.

Intermediate

Le déploiement d'une application Next.js sur un serveur privé virtuel (VPS) implique plusieurs étapes clés, de la configuration de votre environnement serveur à la configuration d'un proxy inverse et d'un gestionnaire de processus. Ce guide se concentre sur l'utilisation d'un VPS basé sur Ubuntu, Nginx comme proxy inverse et PM2 pour la gestion des processus, ainsi que Certbot pour les certificats SSL.

Prérequis :

  • Un VPS fonctionnant sous Ubuntu (par exemple, 20.04, 22.04 ou 24.04).
  • Un nom de domaine enregistré dont les enregistrements DNS pointent vers l'adresse IP de votre VPS.
  • Connaissances de base de la ligne de commande Linux.
  • Votre application Next.js prête pour la production (idéalement, poussée vers un dépôt Git).

Étape 1 : connectez-vous à votre VPS et mettez à jour le système

  1. Connectez-vous via SSH : ouvrez votre terminal et connectez-vous à votre VPS à l'aide de SSH : bash ssh votre_nom_d'utilisateur@votre_ip_vps Remplacez votre_ip_vps par l'adresse IP réelle de votre VPS.

  2. Mettez à jour et mettez à niveau les paquets système : il est essentiel de vous assurer que les paquets de votre serveur sont à jour pour garantir la sécurité et la stabilité. bash sudo apt update && sudo apt upgrade -y

Étape 2 : Installer Node.js et npm/yarn

Next.js nécessite Node.js. Vous pouvez installer Node.js en utilisant Node Version Manager (NVM) pour une gestion flexible des versions, ou directement à partir des dépôts Ubuntu. NVM est généralement recommandé.

Option A : installer Node.js à l'aide de NVM (recommandé) 1. Installer NVM : bash curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash (Remarque : la version v0.39.7 provient d'un résultat de recherche. Vous pouvez consulter la page GitHub de NVM pour connaître la dernière version.) 2. Activez NVM : vous devrez peut-être fermer et rouvrir votre terminal, ou exécuter l'une des commandes suivantes en fonction de votre shell : bash source ~/.bashrc # Ou source ~/.profile ou source ~/.zshrc 3. Installez la version LTS de Node.js : bash nvm install --lts Vous pouvez également installer une version spécifique, par exemple nvm install 20. 4. Vérifiez l'installation : bash node -v npm -v Cela devrait afficher les versions installées de Node.js et npm.

Option B : Installez Node.js et npm à partir des référentiels Ubuntu 1. Installez Node.js : bash sudo apt install nodejs -y 2. Installez npm : bash sudo apt install npm -y 3. Vérifiez l'installation : bash node -v npm -v

Étape 3 : déployez votre application Next.js

  1. Clonez votre référentiel : accédez à un répertoire approprié (par exemple, /var/www/) et clonez votre projet Next.js à partir de votre référentiel Git. bash sudo mkdir -p /var/www/your-app-name sudo chown -R your_username:your_username /var/www/your-app-name cd /var/www/your-app-name git clone https://github.com/your-username/your-nextjs-app.git . Si votre référentiel est privé, assurez-vous d'avoir configuré des clés SSH ou utilisez un jeton d'accès personnel pour le clonage via HTTPS.

  2. Installez les dépendances et compilez : installez les dépendances de votre projet, puis compilez l'application Next.js pour la production. bash npm install # ou yarn install npm run build # ou yarn build La commande npm run build crée une version optimisée de votre application pour la production.

Étape 4 : Installer et configurer PM2 (Process Manager)

PM2 est un gestionnaire de processus de production pour les applications Node.js qui les maintient indéfiniment en vie et facilite leur gestion.

npm install -g pm2 

Démarrez votre application Next.js avec PM2. Les applications Next.js s'exécutent généralement sur localhost:3000 par défaut.

pm2 start npm --name "my-nextjs-app" -- start 

Remplacez « my-nextjs-app » par un nom descriptif pour votre application.

Pour vous assurer que PM2 redémarre votre application lors du redémarrage du serveur :

pm2 startup systemd pm2 save 

Étape 5 : Configurer Nginx en tant que proxy inverse

Nginx agira en tant que proxy inverse, transférant les requêtes de votre domaine vers votre application Next.js fonctionnant sur le port 3000.

sudo apt install nginx -y 

Créez un nouveau fichier de configuration Nginx pour votre site. Remplacez your_domain.com par votre domaine réel.

sudo nano /etc/nginx/sites-available/your_domain.com

Ajoutez la configuration suivante :

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

 location / {
 proxy_pass http://localhost:3000; # Port par défaut de Next.js
 proxy_http_version 1.1;
 proxy_set_header Upgrade $http_upgrade;
 proxy_set_header Connection 'upgrade';
 proxy_set_header Host $host;
 proxy_cache_bypass $http_upgrade;  }
} 

Activez le site en créant un lien symbolique vers sites-enabled et testez la configuration Nginx :

sudo ln -s /etc/nginx/sites-available/your_domain.com /etc/nginx/sites-enabled/
sudo nginx -t 

Si le test est réussi, redémarrez Nginx :

sudo systemctl restart nginx 

Étape 6 : Configurer le pare-feu (UFW)

Si vous utilisez UFW (Uncomplicated Firewall), autorisez le trafic HTTP (port 80) et HTTPS (port 443).

sudo ufw allow 'Nginx Full'
sudo ufw enable 

Étape 7 : (facultatif) Configurer SSL avec Certbot (Let's Encrypt)

Pour sécuriser votre application avec HTTPS, utilisez Certbot pour obtenir et configurer des certificats SSL auprès de Let's Encrypt.

sudo apt install certbot python3-certbot-nginx -y
sudo certbot --nginx -d votre_domaine.com -d www.your_domain.com 

Suivez les instructions. Certbot modifiera automatiquement votre configuration Nginx et configurera le renouvellement automatique du certificat.

Étape 8 : vérifiez votre déploiement

Votre application Next.js devrait désormais être accessible via votre nom de domaine (ou l'adresse IP de votre VPS si vous avez ignoré la configuration du domaine) via HTTPS. Ouvrez votre navigateur Web et accédez à https://your_domain.com.

(Facultatif) Configurez CI/CD

Pour les déploiements automatisés, envisagez de configurer un pipeline d'intégration continue/déploiement continu (CI/CD) à l'aide d'outils tels que GitHub Actions, GitLab CI ou Jenkins. Cela automatiserait les étapes de clonage, d'installation, de compilation et de redémarrage de votre application sur le VPS chaque fois que vous poussez un nouveau code vers votre référentiel.

Votre application Next.js devrait désormais être accessible via votre nom de domaine !