GNU/Linux >> Tutoriels Linux >  >> Linux

Comment installer et configurer MERN Stack avec Nginx sur Ubuntu 20.04

La pile MERN est une configuration avec MongoDB, Express, React et Node.js. C'est l'une des variantes de la pile MEAN. MongoDB est la base de données, Express avec Node.js est utilisé pour le backend qui communique avec la base de données, React est le côté client ou frontend. Nous allons utiliser le proxy inverse Nginx vers le serveur Node.js et configurer Let'sEncrypt SSL.

Dans ce guide, vous allez apprendre à configurer la pile MERN sur votre serveur Ubuntu 20.04.

Cette configuration est testée sur Google Cloud, elle devrait donc fonctionner correctement sur d'autres VPS, serveurs cloud exécutant Ubuntu 20.04 ou Ubuntu 18.04.

Prérequis

  • Un serveur Ubuntu avec accès sudo.
  • Un nom de domaine pointant vers votre serveur.

Table des matières

  1. Installez MongoDB.
  2. Configurer MongoDB.
  3. Installez Node.js avec NVM.
  4. Installez React.js.
  5. Installez Express.js.
  6. Configurez PM2 pour exécuter Node.js en backend.
  7. Installez Nginx et configurez-le.
  8. Installez Let'sEncrypt SSL.

Configuration initiale du serveur

Commencez par mettre à jour les packages du serveur vers les derniers disponibles.

sudo apt update
sudo apt dist-upgrade -y

Vous pouvez maintenant procéder à la configuration de la pile MERN.

Installer MongoDB

Ici, nous allons installer MongoDB Community Edition avec LTS en utilisant le apt paquet géré. La dernière version actuelle de MongoDB au moment de cet article est la 5.0.5.

Vous devrez peut-être installer gnupg pour importer la clé.

 sudo apt install gnupg

Importez la clé publique à l'aide de la commande suivante.

wget -qO - https://www.mongodb.org/static/pgp/server-5.0.asc | sudo apt-key add -

Ajoutez le référentiel MongoDB à la liste des sources.

echo "deb [ arch=amd64,arm64 ] https://repo.mongodb.org/apt/ubuntu focal/mongodb-org/5.0 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-5.0.list

Mettez à jour les packages et installez MongoDB.

sudo apt update
sudo apt install -y mongodb-org

Une fois l'installation terminée, activez MongoDB pour démarrer au démarrage du système.

sudo systemctl enable mongod

Démarrez le serveur MongoDB.

sudo service mongod start

Vous pouvez afficher l'état à l'aide de la commande suivante.

sudo service mongod status

Output
● mongod.service - MongoDB Database Server
     Loaded: loaded (/lib/systemd/system/mongod.service; enabled; vendor preset: enabled)
     Active: active (running) since Sun 2022-01-16 22:08:26 UTC; 7h ago
       Docs: https://docs.mongodb.org/manual
   Main PID: 1942 (mongod)
     Memory: 164.5M
     CGroup: /system.slice/mongod.service
             └─1942 /usr/bin/mongod --config /etc/mongod.conf

Jan 16 22:08:26 staging systemd[1]: Started MongoDB Database Server.

Configurer MongoDB

Nous pouvons maintenant sécuriser MongoDB, configurer MongoDB pour accepter les connexions à distance et également créer une nouvelle base de données.

MongoDB sécurisé

Modifier le fichier de configuration MongoDB.

sudo nano /etc/mongod.conf

Faites défiler jusqu'à la section de sécurité #security et décommentez-le et activez l'autorisation. La modification finale devrait ressembler à celle ci-dessous.

security:
  authorization: enabled

Activer les connexions à distance

Pour activer les connexions à distance, vous devez modifier le même fichier et ajouter votre adresse IP interne ou privée aux interfaces réseau. Votre configuration devrait ressembler à celle ci-dessous.

net:
  port: 27017
  bindIp: 127.0.0.1,10.128.10.1

Remplacez 10.128.10.1 par votre adresse IP.

Ouvrez le pare-feu le cas échéant pour le port 27017.

Redémarrez MongoDB.

sudo systemctl restart mongod

Confirmez si MongoDB autorise les connexions à distance à l'aide de la commande suivante.

sudo lsof -i | grep mongo

Vous devriez recevoir une sortie similaire à celle ci-dessous.

mongod 1942 mongodb 11u IPv4 31550 0t0 TCP instance_name.c.project_id.internal:27017 (LISTEN)
mongod 1942 mongodb 12u IPv4 31551 0t0 TCP localhost:27017 (LISTEN)

Créer un utilisateur administrateur MongoDB

Connectez-vous au shell MongoDB en utilisant mongosh commande.

mongosh

Passez à la base de données d'administration.

use admin

Créez un utilisateur administrateur avec tous les privilèges et le mot de passe de configuration.

db.createUser({user: "admin" , pwd: passwordPrompt() , roles: [{ role: "userAdminAnyDatabase" , db: "admin"}]})

Entrez le mot de passe lorsque vous y êtes invité.

Entrez exit pour quitter le shell.

Vous pouvez maintenant utiliser la chaîne de connexion suivante pour vous connecter à MongoDB.

mongodb://admin:password@External-IP:27017/database

Installer Node.js avec NVM

Nous utiliserons Node Version Manager (NVM) pour installer Node.js. Avec cela, vous pouvez facilement passer d'une version à l'autre de Node.js.

Téléchargez et exécutez le script d'installation NVM en utilisant wget .

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

Chargez maintenant la commande nvm dans la session shell en cours.

source ~/.bashrc

Pour répertorier toutes les versions disponibles de Node.js, vous pouvez utiliser la commande suivante.

nvm ls-remote

Installez la version de Node.js dont vous avez besoin avec la syntaxe ci-dessous.

nvm install v16.13.2

Une fois installé, vous pouvez vérifier les versions de Node.js et NPM.

node -v
v16.13.2

npm -v
6.14.13

Installer React.js

Installez et construisez le frontend React.js en utilisant npx commande.

Accédez au dossier dans lequel vous souhaitez installer l'application React et exécutez la commande suivante.

npx create-react-app frontend

Cela prendra un certain temps pour installer tous les packages React. Une fois l'installation terminée, vous verrez un frontend dossier créé avec tous les scripts React de base.

Accédez au répertoire frontal et déclenchez la construction à l'aide de npm .

cd frontend
npm run build

Cela créera une sortie statique avec des fichiers HTML, CSS et JS pour votre interface.

Vous pouvez faire pointer votre serveur Web Nginx vers ce répertoire de construction pour servir votre interface.

Installer Express.js

Installez la génération express en utilisant le npx commande.

npx express-generator

Une fois l'installation terminée, créez votre application backend en utilisant express commande.

cd ~/
express backend

Maintenant, votre Express devrait être créé. Vous pouvez installer tous les modules de nœud et démarrer le serveur Express en utilisant PM2 en arrière-plan, comme indiqué dans la section ci-dessous.

cd backend
npm install

Devenez développeur Web Full-Stack avec spécialisation React . Terminer le cours de développement Web

Configurer PM2 pour exécuter Node.js en arrière-plan

PM2 est un gestionnaire de processus de nœud qui est très utile pour démarrer les serveurs de nœud en arrière-plan.

Accédez à votre application Express et exécutez la commande suivante.

cd ~/backend
pm2 start npm --name "backend" -- start

Maintenant, votre serveur Express est démarré en arrière-plan et écoute sur le port 3000.

Configurez PM2 pour lancer l'application Express au démarrage.

pm2 startup

Vous recevrez une longue commande à exécuter. Une fois la commande exécutée, vous pouvez enregistrer les paramètres.

pm2 save

Ensuite, vous pouvez configurer le proxy inverse Nginx sur ce port sur un sous-domaine ou un sous-dossier selon votre souhait.

Installer Nginx et le configurer

Nginx est l'un des meilleurs serveurs Web pour fonctionner avec des applications basées sur Node.js.

Installez Nginx.

sudo apt install nginx

Supprimer les configurations par défaut

sudo rm /etc/nginx/sites-available/default
sudo rm /etc/nginx/sites-enabled/default

Créer une nouvelle configuration Nginx

sudo nano /etc/nginx/sites-available/application.conf

Collez ce qui suit. Dans cette configuration, nous pointons le chemin du domaine principal vers le répertoire de sortie de construction de l'application React.js et le /api chemin de l'application Express.js.

server {
     listen [::]:80;
     listen 80;

     server_name domainname.com www.domainname.com;

     root /home/cloudbooklet/backend/build/;
     index index.html;

     location / {
         try_files $uri $uri/ =404;
     }

     location /api/ {
         proxy_pass http://127.0.0.1:3001;
         proxy_http_version 1.1;
         proxy_set_header Connection '';
         proxy_set_header Host $host;
         proxy_set_header X-Forwarded-Proto $scheme;
         proxy_set_header X-Real-IP $remote_addr;
         proxy_set_header X-Forwarded-For $remote_addr;
    }
}

Enregistrez et quittez le fichier.

Activez votre configuration en créant un lien symbolique.

sudo ln -s /etc/nginx/sites-available/application.conf /etc/nginx/sites-enabled/application.conf

Vérifiez votre configuration Nginx et redémarrez Nginx

sudo nginx -t
sudo service nginx restart

Installer Let'sEncrypt SSL

Nous pouvons utiliser Certbot pour installer un certificat SSL Let's Encrypt gratuit pour votre domaine.

sudo apt install python3-certbot-nginx

Exécutez la commande suivante pour installer le certificat et configurer automatiquement la redirection vers HTTPS.

sudo certbot --nginx --redirect --agree-tos --no-eff-email -m [email protected] -d domain.com -d www.domain.com

Vous devriez maintenant recevoir le certificat SSL et il sera configuré automatiquement.

Configurer le renouvellement automatique.

sudo certbot renew --dry-run

Vous pouvez maintenant rechercher votre domaine dans votre navigateur pour voir le résultat.

Conclusion

Vous avez maintenant appris à installer et à configurer la pile MERN sur Ubuntu 20.04.

Merci pour votre temps. Si vous rencontrez un problème ou des commentaires, veuillez laisser un commentaire ci-dessous.


Linux
  1. Comment installer Elgg avec Nginx sur Ubuntu 14.04

  2. Comment installer VSFTP sur Ubuntu 20.04

  3. Comment installer MERN Stack avec Nginx sur Debian 11

  4. Comment installer Node.js avec NVM et Nginx sur Ubuntu 22.04

  5. Comment installer le dernier nginx sur Debian et Ubuntu

Comment installer Nginx avec PHP et MySQL (pile LEMP) sur Ubuntu 20.04 LTS

Comment installer WordPress 5.x avec Nginx sur Ubuntu 18.04 / Ubuntu 16.04

Comment installer WordPress avec Nginx sur Ubuntu

Comment installer et configurer Sendmail sur Ubuntu

Comment installer Apache Tomcat 10 sur Ubuntu 20.04 avec Nginx

Comment installer Apache Tomcat 10 sur Ubuntu 22.04 avec Nginx