Créer une application avec NextJS est une chose mais le déployer en est une autre. Si vous avez un VPS et que vous ne voulez pas déployer votre site sur Vercel ou vous aimeriez juste savoir comment déployer une application NextJS sur un autre serveur, alors ce tutoriel est fait pour vous.

Dans ce tutoriel, je vous montre étape par étape comment déployer une application sur un VPS. 

Les outils nécessaires au fonctionnement du projet 

Pour mon projet, les outils que j’ai utilisés sont :

• Node : Runtime de Javascript pour exécuter nos codes côté serveur.
• NextJS : le framework de react
• Ant design : le framework css
• NextAuth : pour l’accès au côté Admin de mon blog
• MySQL : pour la gestion de BDD
• GitHub : pour le versioning de mon projet

1- Installation de MySQL

Avant de faire n’importe quoi, on va mettre à jour et utiliser la dernière version de notre système avec la commande : 

sudo apt update 
sudo apt upgrade

On va passer maintenant à l’installation de MySQL dans notre serveur. Suivez les instructions ci-dessous pour cela.

• Récupération du dépôt MySQL :

sudo apt install wget -y 
wget https://dev.mysql.com/get/mysql-apt-config_0.8.24-1_all.deb

• Téléchargement des packages MySQL

sudo apt install ./mysql-apt-config_*_all.deb

La commande juste au-dessus va vous montrer cette fenêtre. Utiliser les boutons flèches pour vous déplacer dans la sélection et déplacer-le vers « Ok » et entrer. Nous allons utiliser la configuration proposée par défaut.

• Actualiser le dépôt de cache de Debian

Après avoir ajouté le dépôt, nous allons lancer la commande « update » pour reconstruire le cache :

sudo apt update

• Installer MySQL

Nous allons maintenant installer la base de données serveur MySQL. Tapez la commande suivante :

sudo apt install mysql-server

Une fenêtre va vous demander un mot de passe pour la base données MySQL. Entrer un bon mot de passe pour bien le sécuriser. Et assurez-vous de bien sélectionner « Strong Authentification (Recomended) » avant de presser « Ok ».

Si vous rencontrer une erreur comme ci-dessous voici quelques liens sur comment la résoudre : https://stackoverflow.com/questions/20259036/mysql-package-mysql-server-has-no-installation-candidate

https://stackoverflow.com/questions/24821521/wget-unable-to-resolve-host-address-http

Démarrer et activer MySQL sur votre serveur

Après toutes ces étapes ci-dessous, nous allons maintenant activer et démarrer MySQL avec la commande suivante : 

sudo systemctl enable --now mysql

Et pour checker que notre base de données est bien en marche, tapez cette commande : 

systemctl status mysql

Plus de sécurité pour MySQL

Pour rajouter un surplus de sécurité à notre MySQL : 

sudo mysql_secure_installation

Vous pouvez modifier certains paramètres comme l’accès à distance à votre base de données.

Voici l’article sur lequel je me suis inspiré pour l’installation de MySQL: https://www.how2shout.com/linux/how-to-install-mysql-8-0-server-on-debian-11-bullseye/

Création de la base de données 

Nous allons finir la configuration de MySQL avec la création de notre base de données dans MySQL.

Suivez les instructions ci-dessous pour le faire :

• Connectez-vous à MySQL :

mysql –u root –p

Et entrez votre mot de passe pour vous identifier.

• Création de la base de données :

CREATE DATABASE IF NOT EXISTS afdev ;

• Création des tables :

Vous pouvez créer vos tables en tapant directement les commandes dans le terminal comme ci-dessous. 

CREATE TABLE IF NOT EXISTS `posts` (
  `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT,
  `title` varchar(200) NOT NULL,
  `description` longtext NOT NULL,
  `banner` varchar(200) DEFAULT NULL,
  `category_id` int(10) UNSIGNED NOT NULL,
  `created_date` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
  `updated_date` timestamp NULL DEFAULT NULL ON UPDATE CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=38 DEFAULT CHARSET=utf8;

Mais pour ma part je vais utiliser un outil de gestion de base de données, à savoir « dbeaver » et me connecter à distance.

• Vérification de la configuration de MySQL pour l’accès à distance

Rendez-vous dans ce fichier et vérifiez que vous avez bien la valeur « bind-address=0.0.0.0 » inscrit dessus. Si non, ajoutez-le ou modifiez-le.  

sudo nano /etc/mysql/mysql.conf.d/mysqld.cnf

Et le contenu devrait donner quelque chose comme cela : 

• Création d’un nouvel utilisateur

Pour se connecter à distance plus tard, on ne va pas utiliser « root » donc on va créer un nouvel utilisateur.

Premièrement, lancer la commande suivante : 

CREATE USER 'rmt _afdev'@'%'  IDENTIFIED BY 'password';

Note : Le « rmt_afdev » est le nom du nouvel utilisateur et le « % » que l’hôte est dynamique c’est-à-dire la machine sur laquelle tu vas te connecter pourrait changer.

• Donner des privilèges au nouvel utilisateur

Pour qu’on puisse faire des opérations comme si on s’était connecté avec le compte root, on va donner au nouvel utilisateur les mêmes privilèges que « root » :

GRANT ALL PRIVILEGES ON *.* TO 'rmt_afdev'@'%';
FLUSH PRIVILEGES;

Note : On exécute toujours ces commandes dans le terminal de MySQL

• Redémarrage MySQL

sudo systemctl restart mysql

• Configuration de notre pare-feu

Pour autoriser la connexion à distance, on doit rajouter une règle dans notre pare-feu :

sudo ufw allow from remote_IP_address to any port 3306

Note : Changer le « remote_ IP_address » par l’adresse IP à laquelle vous souhaitez vous connecter exclusivement à distance.

Si comme moi vous avez l’intention de vous connecter sûrement depuis plusieurs machines différentes, utilisez la commande suivante :

sudo ufw allow 3306/tcp

Attention : cette commande autorise n’importe quelle machine à se connecter à votre base de données. Veuillez ne pas l’utiliser si votre base de données contient des données sensibles. 

1. Configuration de DBeaver

Comme indiqué ci-dessus, je vais utiliser le logiciel « dbeaver » pour gérer ma base de données.

Pour se connecter, 2 onglets important à configurer :

• Onglet SSH

En premier lieu, on va configurer le tunnel d’accès SSH et renseigner toutes les informations nécessaires à notre connexion à distance.

N’oubliez pas de tester la connexion en cliquant sur le bouton « Test tunnel configuration ». 

Si vous rencontrez une erreur du genre « Public Key Retrieval is not allowed », veuillez-vous référer à cet article pour la résoudre, c’est assez facile. 

• Onglet « Général » :

Maintenant que le tunnel d’accès SSH est établi, on va configurer l’accès au serveur MySQL. Dans cet onglet, on va mettre les informations d’authentification à MySQL, le compte que l’on a justement créé pour un accès à distance.

Vous pouvez cliquer sur « Test de la connexion » pour le tester.

Si tout s’est bien passé également pour vous, vous devriez avoir quelque chose comme dans l’image ci-dessous : 

2-     Installation de Node & NPM

Notre projet demande du temps pour se lancer donc nous allons l’installer en premier lieu. Pour cela suivez les instructions ci-après.

• Mise à jour de nos dépôts

Avant de faire une quelconque installation, nous allons déjà mettre nos dépôts pour récupérer les dernières versions.

sudo apt update

• Mis à niveau de notre système

Il est également important de mettre à niveau notre système avant d’installer node et npm. La commande pour ça est la suivante : 

sudo apt upgrade

• Installation de node et npm

Installons maintenant node et notre gestionnaire de paquet npm :

sudo apt install nodejs npm –y

• Vérification de l’installation

Pour être sûr que l’installation s’est bien déroulée tapez la commande suivante : 

node –v ou npm –v

Installation de node via NodeSource PPA

Si votre projet requiert une version plus récente de Node, vous pouvez utiliser le dépôt PPA par NodeSource pour l’installer. PPA est un dépôt alternatif, fournissant des logiciels pas encore disponibles dans le dépôt officiel de Debian. 

Installation de curl

Par défaut, vous devriez avoir la commande « curl » installé, mais dans le cas contraire vous pouvez l’installer avec cette commande : 

sudo apt install curl

Pour vérifier si elle n’est pas déjà présente : 

curl –version

Installation de Node avec curl 

sudo apt update
sudo apt upgrade

• Installation de node : 

sudo apt install nodejs

Installation de Node avec NVM 

NVM ou Node Version Manager est un bon outil pour installer et gérer l’utilisation de différentes versions de node au sein d’un système.

Des fois, l’installation de node avec curl peut être assez compliquée avec ces histoires de dépôt, liste source etc., Je vous recommande donc d’utiliser nvm dans ce cas.

Nous avons besoin de télécharger et installer nvm. Nous pouvons le télécharger et exécuter le script manuellement avec cette commande :  

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash

Nous devons fermer et ré-ouvrir le terminal afin d’actualiser le chemin vers notre « nvm » et ainsi l’utiliser.

Vérifier que nvm marche bien :

nvm --version

Pour lister toutes les versions disponibles :

nvm list-remote

Pour installer la dernière version de node :

nvm install node

Pour installer une version lts :

nvm install --lts

Pour lister toutes les versions de node installées :

nvm ls 

Pour choisir une version à utiliser :

nvm use 18.14.2 

Et enfin, pour voir quelle version de node vous utilisez :

node -v

Passons maintenant au transfert de notre application vers notre serveur.

3- Transfert de notre application

On va créer un répertoire dans notre serveur pour y déposer notre application. Pour mon cas, je vais le mettre dans « /home/afdev/www ». 

La commande pour créer un répertoire c’est 

sudo mkdir /home/afdev/www

Nous allons à présent transférer l’application dans ce répertoire. Je vais utiliser FileZilla pour le transfert, mais vous êtes libre d’utiliser le logiciel FTP de votre choix, du moment que ça fait le job. 

Comme vous le voyez dans l’image ci-dessous, j’ai transféré mon blog vers le répertoire que j’ai créé dans mon serveur. 

Installation des dépendances dans notre projet

Maintenant que tout est transféré, nous allons installer toutes les dépendances de notre projet. Pour cela, on va se rendre dans le répertoire où se situe notre application et lancer la commande pour installer les dépendances.

• Pour se rendre dans le répertoire 

cd /home/afdev/www

• Installer les dépendances :

npm install

Lancement de l’application

Vous l’aurez compris, maintenant que tout est prêt, il nous suffit de taper la commande dans le script de lancement : 

• yarn run dev : pour le démarrer en mode développement
• yarn run build & yarn run start : pour le démarrer en mode production.

Voilà, c’est tout ce qu’il faut faire pour déployer une application NextJS sur un VPS. Cela dit, pour vraiment mettre en production, il est indispensable d’utiliser un outil comme PM2 pour gérer l’état de notre application en ligne. 

Conclusion

Comme vous venez de le voir, déployer une application NextJS n’est pas si compliqué que cela puisse paraître. Il faut juste mettre en place les éléments nécessaires pour que notre application marche.

Pour mon application, j’avais besoin d’une base donnée MySQL, du runtime node et d’un outil qui permettait de transférer mon projet Next sur le serveur.

L’avantage de Vercel c’est qu’il nous abstrait toutes les étapes que je vous ai montrées ci-dessus, mais il nous met à disposition de supers fonctionnalités comme le déploiement continu.

Cependant, il est tout même très important de savoir déployer votre application par vous-même et ne pas dépendre de Vercel. 

Dans un autre article je vous expliquerai comment faire du déploiement continu avec Github Actions, un peu comme la fonctionnalité de Vercel.

Je vous recommande de voir cet article également pour savoir sécuriser votre site web avec Let’s Encrypt et Certbot.