Gatsby est un générateur de site rapide et moderne pour React. Il s'agit d'un framework open source qui combine les fonctionnalités de React, GraphQL et Webpack pour créer des sites Web et des applications statiques.
Gatsby est plus qu'un simple générateur de sites statiques, il permet aux développeurs Web de créer des sites Web à l'aide de React et de travailler avec n'importe quelle source de données (CMS, Markdown, etc.) de leur choix. Dans ce tutoriel, nous allons vous montrer comment installer Gatsby sur Ubuntu 20.04.
Prérequis
- Ubuntu 20.04 VPS
- Accès SSH avec privilèges root
Étape 1. Connectez-vous au serveur
Tout d'abord, connectez-vous à votre serveur Ubuntu 20.04 via SSH en tant qu'utilisateur root :
ssh root@IP_Address -p Port_number
Vous devrez remplacer 'IP_Address' et 'Port_number' par l'adresse IP et le numéro de port SSH respectifs de votre serveur.
Avant de commencer, vous devez vous assurer que tous les packages du système d'exploitation Ubuntu installés sur le serveur sont à jour. Vous pouvez le faire en exécutant les commandes suivantes :
# apt update -y # apt upgrade -y
Étape 2. Créer un utilisateur système
Ensuite, nous allons créer un nouvel utilisateur système et lui accorder les privilèges sudo. Dans ce tutoriel, nous allons créer un nouvel utilisateur système appelé "maître", vous pouvez choisir n'importe quel nom d'utilisateur que vous aimez.
# adduser master
Une fois créé, exécutons cette commande pour ajouter le nouvel utilisateur au groupe sudo. Dans Ubuntu, les utilisateurs membres du groupe sudo sont autorisés à exécuter des commandes sudo.
# usermod -aG sudo master
Maintenant, nous pouvons nous connecter en tant que nouvel utilisateur "maître", et nous utiliserons cet utilisateur pour terminer l'installation.
# su - master
Étape 3. Installer NodeJS et NPM
Il existe quelques méthodes pour installer à la fois NodeJS et NPM. Dans cet article, nous allons les installer en utilisant la source du nœud. Pour d'autres méthodes, vous pouvez consulter notre article de blog sur l'installation de NodeJS et NPM.
$ curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
Une fois terminé, nous devons télécharger les informations sur le package à partir de la source nouvellement ajoutée ci-dessus.
$ sudo apt update
Ensuite, exécutez la commande suivante pour enfin installer NodeJS et NPM.
$ sudo apt install nodejs
NodeJS et NPM ont été installés avec succès, vous pouvez vérifier la version installée à l'aide de cette commande :
$ node -v; npm -v
Étape 4. Installer Gatsby-CLI
Gatsby CLI est le point d'entrée principal pour installer et exécuter l'application Gatsby. Il est conditionné sous la forme d'un exécutable qui peut être utilisé globalement. Nous pouvons installer Gatsby CLI via npm.
$ sudo npm install -g gatsby-cli
Pour vérifier la version installée de Gatsby CLI, exécutez cette commande :
$ gatsby --version
Maintenant, créons un nouveau site Web Gatsby, vous pouvez remplacer "gatsby_site ” avec n'importe quel nom que vous aimez.
$ gatsby new gatsby_site
Attendez quelques instants, et un nouveau répertoire "gatsby_site" est créé.
Appelez la commande ci-dessous pour développer Gatsby et l'exécuter.
$ cd gatsby_site $ gatsby develop -H 0.0.0.0
Vous devriez pouvoir accéder à votre site Gatsby à l'adresse http://YOUR_SERVER_IP_ADDRESS:8000 , appuyez sur CTRL + C si vous voulez l'arrêter.
Maintenant, construisons notre site Web Gatsby :
$ gatsby build
La gatsby build La commande fait partie de la CLI Gatsby. Exécutez gatsby build commande pour créer une version prête pour la production de votre site lorsque vous êtes prêt à publier votre site. Vous pouvez également déployer votre site Web Gatsby sur GitHub pour configurer un pipeline CI/CD (intégration continue et déploiement continu).
Étape 5. Installer PM2
Process Manager (PM2) vous permettra de maintenir les applications en vie pour toujours, de les recharger sans temps d'arrêt et de faciliter les tâches d'administration système courantes. Appelez la commande ci-dessous pour installer PM2 sur votre Ubuntu 20.04 globalement.
$ sudo npm install pm2 -g
Après avoir installé PM2, nous pouvons exécuter ces commandes pour démarrer notre site Web Gatsby sur le port 8000.
$ cd ~/gatsby-site
$ pm2 start gatsby --name mygatsby -- serve -p 8000
Étape 6. Installer et configurer NGINX
Votre installation Gatsby est maintenant terminée et vous devriez pouvoir y accéder à l'adresse IP publique de votre serveur avec le numéro de port 8000. Toutefois, si vous souhaitez accéder à votre site Web Gatsby en utilisant un nom de domaine ou un nom de sous-domaine au lieu de saisir l'adresse IP du serveur et le numéro de port dans l'URL, vous devrez configurer un proxy inverse sur votre serveur.
Dans cette étape, nous allons vous montrer comment implémenter la configuration du proxy inverse à l'aide de Nginx. Nginx est un serveur Web puissant et performant qui met l'accent sur la personnalisation et les performances.
Tout d'abord, installez Nginx avec la commande suivante :
$ sudo apt install nginx
Sur Ubuntu 20.04, Nginx est configuré pour commencer à s'exécuter lors de l'installation, vous pouvez le vérifier en exécutant cette commande :
$ sudo systemctl status nginx
Une fois installé, créez un nouveau fichier de configuration de bloc de serveur Nginx. Remplacez yourdomain.com avec votre nom de domaine ou de sous-domaine :
$ sudo nano /etc/nginx/sites-enabled/yourdomain.com.conf
Ajoutez le contenu suivant au fichier :
server {
listen 80;
server_name yourdomain.com;
location / {
proxy_pass http://localhost:8000;
proxy_http_version 1.1;
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Server $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_set_header Host $http_host;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "Upgrade";
proxy_pass_request_headers on;
}
location ~ /.well-known {
allow all;
}
}
Enregistrez le fichier en appuyant sur CTRL + O puis appuyez sur CTRL + X pour quitter l'éditeur nano puis redémarrez Nginx.
$ sudo systemctl restart nginx
Étape 7. Installer le certificat SSL
Il s'agit d'une étape facultative mais fortement recommandée. Nous allons installer un certificat SSL gratuit de Let's Encrypt.
$ sudo apt install python3-certbot-nginx -y
Une fois terminé, nous pouvons exécuter cette commande pour installer le certificat SSL.
$ sudo certbot
Il vous sera demandé votre adresse e-mail, acceptez les conditions d'utilisation de Let's Encrypt et indiquez si vous souhaitez ou non partager votre adresse e-mail avec l'Electronic Frontier Foundation. Ensuite, vous devez choisir les noms pour lesquels vous souhaitez activer HTTPS. Choisissez votre site Web Gatsby en tapant le numéro et en appuyant sur ENTRÉE. Let's encrypt installera le certificat et il vous demandera si vous souhaitez configurer la redirection HTTP vers HTTPS ou non, vous pouvez choisir la redirection, puis certbot créera la redirection et rechargera Nginx si tout va bien.
Vous devriez maintenant pouvoir accéder à votre site Web Gatsby en mode HTTPS sur https://yourdomain.com , vous pouvez continuer à créer votre application à l'aide de Gatsby.
Bien sûr, vous n'avez pas à vous arracher les cheveux pour installer Gatsby sur Ubuntu 20.04 si vous avez un plan d'hébergement VPS Linux géré hébergé chez nous. Si vous le faites, vous pouvez simplement demander à notre équipe d'assistance d'installer Gatsby sur Ubuntu 20.04 pour vous. Ils sont disponibles 24h/24 et 7j/7 et pourront vous aider avec l'installation de Gatsby, ainsi que toutes les exigences supplémentaires que vous pourriez avoir.
PS. Si vous avez apprécié la lecture de cet article de blog expliquant comment installer Gatsby sur Ubuntu 20.04, n'hésitez pas à le partager sur les réseaux sociaux en utilisant les raccourcis ci-dessous ou simplement en laissant un commentaire dans la section des commentaires. Merci.