MERN-Stack ist ein Setup mit MongoDB, Express, React und Node.js. Dies ist eine der Varianten des MEAN-Stacks. MongoDB ist die Datenbank, Express mit Node.js wird als Backend verwendet, das mit der Datenbank kommuniziert, React ist die Clientseite oder das Frontend. Wir werden den Nginx-Reverse-Proxy für den Node.js-Server verwenden und Let’sEncrypt SSL einrichten.
In dieser Anleitung erfahren Sie, wie Sie den MERN-Stack auf Ihrem Ubuntu 20.04-Server einrichten.
Dieses Setup wurde auf Google Cloud getestet, daher sollte es auf anderen VPS, Cloud-Servern mit Ubuntu 20.04 oder Ubuntu 18.04 problemlos funktionieren.
Voraussetzungen
- Ein Ubuntu-Server mit sudo-Zugriff.
- Ein Domänenname, der auf Ihren Server verweist.
Inhaltsverzeichnis
- Installieren Sie MongoDB.
- MongoDB konfigurieren.
- Installieren Sie Node.js mit NVM.
- Installieren Sie React.js.
- Installieren Sie Express.js.
- Richten Sie PM2 so ein, dass Node.js im Backend ausgeführt wird.
- Installieren Sie Nginx und konfigurieren Sie es.
- Installieren Sie Let’sEncrypt SSL.
Ersteinrichtung des Servers
Beginnen Sie damit, die Serverpakete auf die neuesten verfügbaren zu aktualisieren.
sudo apt update sudo apt dist-upgrade -y
Jetzt können Sie mit der Einrichtung des MERN-Stacks fortfahren.
Installieren Sie MongoDB
Hier installieren wir die MongoDB Community Edition mit LTS unter Verwendung des apt Paket verwaltet. Die aktuell neueste Version von MongoDB zum Zeitpunkt dieses Artikels ist 5.0.5.
Möglicherweise müssen Sie gnupg installieren zum Importieren des Schlüssels.
sudo apt install gnupg
Importieren Sie den öffentlichen Schlüssel mit dem folgenden Befehl.
wget -qO - https://www.mongodb.org/static/pgp/server-5.0.asc | sudo apt-key add -
Fügen Sie das MongoDB-Repository zur Quellenliste hinzu.
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
Aktualisieren Sie die Pakete und installieren Sie MongoDB.
sudo apt update sudo apt install -y mongodb-org
Sobald die Installation abgeschlossen ist, aktivieren Sie MongoDB, um beim Systemstart zu starten.
sudo systemctl enable mongod
MongoDB-Server starten.
sudo service mongod start
Sie können den Status mit dem folgenden Befehl anzeigen.
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. MongoDB konfigurieren
Jetzt können wir MongoDB sichern, MongoDB so konfigurieren, dass es Remote-Verbindungen akzeptiert, und auch eine neue Datenbank erstellen.
Sichere MongoDB
MongoDB-Konfigurationsdatei bearbeiten.
sudo nano /etc/mongod.conf
Scrollen Sie nach unten zum Sicherheitsabschnitt #security und kommentieren Sie es aus und aktivieren Sie die Autorisierung. Die endgültige Bearbeitung sollte wie folgt aussehen.
security: authorization: enabled
Remoteverbindungen aktivieren
Um Remoteverbindungen zu aktivieren, müssen Sie dieselbe Datei bearbeiten und Ihre interne oder private IP zu den Netzwerkschnittstellen hinzufügen. Ihre Konfiguration sollte wie unten aussehen.
net: port: 27017 bindIp: 127.0.0.1,10.128.10.1
Ersetzen Sie 10.128.10.1 durch Ihre IP-Adresse.
Öffnen Sie gegebenenfalls die Firewall für den Port 27017.
Starten Sie MongoDB neu.
sudo systemctl restart mongod
Bestätigen Sie mit dem folgenden Befehl, ob MongoDB Remoteverbindungen zulässt.
sudo lsof -i | grep mongo
Sie sollten eine Ausgabe ähnlich der folgenden erhalten.
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)
MongoDB-Admin-Benutzer erstellen
Stellen Sie mit mongosh eine Verbindung zur MongoDB-Shell her Befehl.
mongosh
Zur Admin-Datenbank wechseln.
use admin
Erstellen Sie einen Admin-Benutzer mit allen Rechten und einem Setup-Passwort.
db.createUser({user: "admin" , pwd: passwordPrompt() , roles: [{ role: "userAdminAnyDatabase" , db: "admin"}]}) Geben Sie das Passwort ein, wenn Sie dazu aufgefordert werden.
Geben Sie exit ein um die Shell zu verlassen.
Jetzt können Sie die folgende Verbindungszeichenfolge verwenden, um eine Verbindung zu MongoDB herzustellen.
mongodb://admin:password@External-IP:27017/database
Installieren Sie Node.js mit NVM
Wir werden Node Version Manager (NVM) verwenden, um Node.js zu installieren. Damit können Sie ganz einfach zwischen verschiedenen Node.js-Versionen wechseln.
Laden Sie das NVM-Installationsskript mit wget herunter und führen Sie es aus .
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
Laden Sie nun den nvm-Befehl in die aktuelle Shell-Sitzung.
source ~/.bashrc
Um alle verfügbaren Node.js-Versionen aufzulisten, können Sie den folgenden Befehl verwenden.
nvm ls-remote
Installieren Sie die benötigte Node.js-Version mit der folgenden Syntax.
nvm install v16.13.2
Nach der Installation können Sie die Node.js- und NPM-Versionen überprüfen.
node -v v16.13.2 npm -v 6.14.13
Installieren Sie React.js
Frontend React.js mit npx installieren und erstellen Befehl.
Navigieren Sie zu dem Ordner, in dem Sie die React-App installieren möchten, und führen Sie den folgenden Befehl aus.
npx create-react-app frontend
Dies wird einige Zeit in Anspruch nehmen, um alle React-Pakete zu installieren. Sobald die Installation abgeschlossen ist, sehen Sie einen frontend Ordner, der mit allen grundlegenden React-Skripten erstellt wurde.
Navigieren Sie in das Frontend-Verzeichnis und lösen Sie den Build mit npm aus .
cd frontend npm run build
Dadurch wird eine statische Ausgabe mit HTML-, CSS- und JS-Dateien für Ihr Frontend erstellt.
Sie können Ihren Nginx-Webserver auf dieses Build-Verzeichnis verweisen, um Ihr Frontend zu bedienen.
Installieren Sie Express.js
Installieren Sie die Express-Generierung mit npx Befehl.
npx express-generator
Sobald die Installation abgeschlossen ist, erstellen Sie Ihre Backend-Anwendung mit express Befehl.
cd ~/ express backend
Jetzt sollte Ihr Express erstellt werden. Sie können alle Knotenmodule installieren und den Express-Server mit PM2 im Hintergrund starten, wie im folgenden Abschnitt beschrieben.
cd backend npm install
Werden Sie ein Full-Stack-Webentwickler mit React-Spezialisierung . Absolvieren Sie den Webentwicklungskurs
Richten Sie PM2 so ein, dass Node.js im Hintergrund ausgeführt wird
PM2 ist ein Knotenprozessmanager, der sehr nützlich ist, um Knotenserver im Hintergrund zu starten.
Navigieren Sie zu Ihrer Express-Anwendung und führen Sie den folgenden Befehl aus.
cd ~/backend pm2 start npm --name "backend" -- start
Jetzt wird Ihr Express-Server im Hintergrund gestartet und lauscht auf Port 3000.
Konfigurieren Sie PM2 so, dass die Express-Anwendung beim Start gestartet wird.
pm2 startup
Sie erhalten einen langen Befehl zur Ausführung. Sobald der Befehl ausgeführt wurde, können Sie die Einstellungen speichern.
pm2 save
Als Nächstes können Sie den Nginx-Reverse-Proxy über diesen Port auf einer Subdomain oder einem Unterordner nach Ihren Wünschen konfigurieren.
Nginx installieren und konfigurieren
Nginx ist einer der besten Webserver für die Arbeit mit Node.js-basierten Anwendungen.
Nginx installieren.
sudo apt install nginx
Standardkonfigurationen entfernen
sudo rm /etc/nginx/sites-available/default sudo rm /etc/nginx/sites-enabled/default
Neue Nginx-Konfiguration erstellen
sudo nano /etc/nginx/sites-available/application.conf
Fügen Sie Folgendes ein. In dieser Konfiguration verweisen wir den Hauptdomänenpfad auf das Build-Ausgabeverzeichnis der React.js-Anwendung und den /api Pfad für die Express.js-Anwendung.
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;
}
} Speichern und beenden Sie die Datei.
Aktivieren Sie Ihre Konfiguration, indem Sie einen symbolischen Link erstellen.
sudo ln -s /etc/nginx/sites-available/application.conf /etc/nginx/sites-enabled/application.conf
Überprüfen Sie Ihre Nginx-Konfiguration und starten Sie Nginx neu
sudo nginx -t sudo service nginx restart
Installieren Sie Let’sEncrypt SSL
Wir können Certbot verwenden, um ein kostenloses SSL-Zertifikat von Let’s Encrypt für Ihre Domain zu installieren.
sudo apt install python3-certbot-nginx
Führen Sie den folgenden Befehl aus, um das Zertifikat zu installieren und die Umleitung zu HTTPS automatisch zu konfigurieren.
sudo certbot --nginx --redirect --agree-tos --no-eff-email -m [email protected] -d domain.com -d www.domain.com
Jetzt sollten Sie ein SSL-Zertifikat erhalten und es wird automatisch konfiguriert.
Automatische Verlängerung einrichten.
sudo certbot renew --dry-run
Jetzt können Sie Ihre Domain in Ihrem Browser nachschlagen, um die Ausgabe zu sehen.
Schlussfolgerung
Jetzt haben Sie gelernt, wie Sie den MERN-Stack unter Ubuntu 20.04 installieren und einrichten.
Vielen Dank für Ihre Zeit. Wenn Sie auf ein Problem oder Feedback stoßen, hinterlassen Sie bitte unten einen Kommentar.