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
- Installez MongoDB.
- Configurer MongoDB.
- Installez Node.js avec NVM.
- Installez React.js.
- Installez Express.js.
- Configurez PM2 pour exécuter Node.js en backend.
- Installez Nginx et configurez-le.
- 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.