Ein Reverse-Proxy ist ein Server, der Ressourcen für Clients von einem oder mehreren Upstream-Servern abruft. Es platziert sich normalerweise hinter einer Firewall in einem privaten Netzwerk und leitet Clientanfragen an diese Upstream-Server weiter. Ein Reverse-Proxy verbessert die Sicherheit, Leistung und Zuverlässigkeit jeder Webanwendung erheblich.
Viele moderne Webanwendungen, die in NodeJS oder Angular geschrieben sind, können mit ihrem eigenen Standalone-Server ausgeführt werden, ihnen fehlen jedoch eine Reihe erweiterter Funktionen wie Load Balancing , Sicherheit und Beschleunigung die die meisten dieser Anwendungen erfordern. NGINX mit seinen erweiterten Funktionen kann als Reverse-Proxy fungieren, während es die Anfrage für eine NodeJS- oder eine Angular-Anwendung bedient.
NGINX-Reverse-Proxy-Server
In diesem Tutorial werden wir untersuchen, wie NGINX als Reverse-Proxy-Server für eine Node- oder eine Angular-Anwendung verwendet werden kann. Das folgende Diagramm gibt Ihnen einen Überblick darüber, wie der Reverse-Proxy-Server funktioniert und Client-Anfragen verarbeitet und die Antwort sendet.
Nginx-Reverse-Proxy
Voraussetzung
- Sie haben NGINX bereits installiert, indem Sie unserem Tutorial von hier aus folgen.
Annahme
- Der Zugriff auf den NGINX-Server ist öffentlich zugänglich.
- Die Node- oder Angular-Anwendung wird in einem separaten System (Upstream-Server) in einem privaten Netzwerk ausgeführt und kann vom NGINX-Server aus erreicht werden. Obwohl es durchaus möglich ist, die Einstellungen in einem einzigen System vorzunehmen.
- Das Tutorial verwendet Variablen wie
SUBDOMAIN.DOMAIN.TLDundPRIVATE_IP. Ersetzen Sie diese an den entsprechenden Stellen durch Ihre eigenen Werte.
NodeJS-Anwendung
Angenommen, Sie haben NGINX bereits in Ihrer Umgebung installiert, lassen Sie uns eine beispielhafte NodeJS-Anwendung erstellen, auf die über den NGINX-Reverse-Proxy zugegriffen wird. Richten Sie zunächst eine Knotenumgebung in einem System ein, das sich in Ihrem privaten Netzwerk befindet.
Knoten installieren
Bevor Sie mit der Installation von NodeJS und der neuesten Version von npm (Node Package Manager) fortfahren, überprüfen Sie, ob es bereits installiert ist oder nicht:
# node --version
# npm --version
Wenn die obigen Befehle die Version von NodeJS und NPM zurückgeben, überspringen Sie den folgenden Installationsschritt und fahren Sie mit der Erstellung der NodeJS-Beispielanwendung fort.
Um NodeJS und NPM zu installieren, verwenden Sie die folgenden Befehle:
# apt-get install nodejs npm
Überprüfen Sie nach der Installation erneut die Version von NodeJS und NPM.
# node --version
# npm --version
Beispiel-Node-Anwendung erstellen
Sobald die NodeJS-Umgebung bereit ist, erstellen Sie eine Beispielanwendung mit ExpressJS. Erstellen Sie daher einen Ordner für die Knotenanwendung und installieren Sie ExpressJS.
# mkdir node_app
# cd node_app
# npm install express
Erstellen Sie jetzt mit Ihrem bevorzugten Texteditor app.js und fügen Sie den folgenden Inhalt hinzu.
# vi app.js
const express = require('express')
const app = express()
app.get('/', (req, res) => res.send('Hello World !'))
app.listen(3000, () => console.log('Node.js app listening on port 3000.'))
Führen Sie die Knotenanwendung mit folgendem Befehl aus:
# node app.js
Führen Sie eine Curl-Abfrage an die Portnummer 3000 durch, um zu bestätigen, dass die Anwendung auf localhost ausgeführt wird.
# curl localhost:3000
Hello World !
Zu diesem Zeitpunkt wird die NodeJS-Anwendung auf dem Upstream-Server ausgeführt. Im letzten Schritt konfigurieren wir NGINX so, dass es als Reverse-Proxy für die obige Knotenanwendung fungiert. Lassen Sie uns vorerst mit der Erstellung einer Winkelanwendung fortfahren, deren Schritte unten aufgeführt sind:
Winkelanwendung
Angular ist ein weiteres JavaScript-Framework für die Entwicklung von Webanwendungen mit Typoskript. Im Allgemeinen wird auf eine Angular-Anwendung über den mitgelieferten Standalone-Server zugegriffen. Aber aufgrund einiger Nachteile bei der Verwendung dieses eigenständigen Servers in einer Produktionsumgebung wird ein Reverse-Proxy vor einer Winkelanwendung platziert, um sie besser zu bedienen.
Winkelumgebung einrichten
Da Angular ein JavaScript-Framework ist, muss Nodejs mit Version> 8.9 im System installiert sein. Bevor Sie mit der Installation von Angle CLI fortfahren, richten Sie daher schnell die Knotenumgebung ein, indem Sie den folgenden Befehl im Terminal eingeben.
# curl -sL https://deb.nodesource.com/setup_10.x | sudo bash -
# apt-get install nodejs npm
Fahren Sie nun mit der Installation von Angular CLI fort, die uns hilft, Projekte zu erstellen, Anwendungs- und Bibliothekscode für jede Angular-Anwendung zu generieren.
# npm install -g @angular/cli
Die für die Angular-Umgebung erforderliche Einrichtung ist jetzt abgeschlossen. Im nächsten Schritt erstellen wir eine Winkelanwendung.
Winkelanwendung erstellen
Erstellen Sie eine Angular-Anwendung mit dem folgenden Angular-CLI-Befehl:
# ng new angular-app
Wechseln Sie in das neu erstellte Winkelverzeichnis und führen Sie die Webanwendung aus, indem Sie den Hostnamen und die Portnummer angeben:
# cd angular-app
# ng serve --host PRIVATE_IP --port 3000
Führen Sie eine Curl-Abfrage an die Portnummer 3000 durch, um zu bestätigen, dass die Winkelanwendung auf localhost ausgeführt wird.
# curl PRIVATE_IP:3000
Zu diesem Zeitpunkt wird die Winkelanwendung auf Ihrem Upstream-Server ausgeführt. Im nächsten Schritt konfigurieren wir NGINX so, dass es als Reverse-Proxy für die obige Winkelanwendung fungiert.
NGINX als Reverse-Proxy konfigurieren
Navigieren Sie zum Konfigurationsverzeichnis des virtuellen NGINX-Hosts und erstellen Sie einen Serverblock, der als Reverse-Proxy fungiert. Denken Sie daran, dass das System, auf dem Sie zuvor NGINX installiert haben, über das Internet erreichbar ist, d. h. eine öffentliche IP ist mit dem System verbunden.
# cd /etc/nginx/sites-available
# vi node_or_angular_app.conf
server {
listen 80;
server_name SUBDOMAIN.DOMAIN.TLD;
location / {
proxy_pass https://PRIVATE_IP:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}
Die Direktive proxy_pass in der obigen Konfiguration macht den Serverblock zu einem Reverse-Proxy. Der gesamte Datenverkehr, der an die Domain SUBDOMAIN.DOMAIN.TLD gerichtet ist und diese Übereinstimmungen mit dem Root-Location-Block (/) werden an https://PRIVATE_IP:3000 weitergeleitet wo der Knoten oder die Winkelanwendung ausgeführt wird.
NGINX Reverse Proxy für NodeJS und Angular App?
Der obige Serverblock fungiert als Reverse-Proxy für Knoten- oder Winkelanwendungen. Um Knoten- und Winkelanwendung gleichzeitig mit NGINX-Reverse-Proxy zu bedienen, führen Sie sie einfach in zwei verschiedenen Portnummern aus, wenn Sie dasselbe System für beide verwenden möchten.
Es ist auch sehr gut möglich, zwei separate Upstream-Server zum Ausführen von Node- und Angular-Anwendungen zu verwenden. Außerdem müssen Sie einen weiteren NGINX-Serverblock mit übereinstimmenden Werten für server_name erstellen und proxy_pass Richtlinie.
Empfohlene Lektüre :Verständnis der NGINX-Konfigurationsdatei.
Suchen Sie im obigen Serverblock nach syntaktischen Fehlern und aktivieren Sie ihn. Laden Sie zum Schluss NGINX neu, um die neuen Einstellungen zu übernehmen.
# nginx -t
# cd /etc/nginx/sites-enabled
# ln -s ../sites-available/node_or_angular_app.conf .
# systemctl reload nginx
Richten Sie nun Ihren bevorzugten Webbrowser auf https://SUBDOMAIN.DOMAIN.TLD , werden Sie mit einer Willkommensnachricht von der Node- oder Angular-Anwendung begrüßt.
Angular-Willkommensseite
Zusammenfassung
Das ist alles für die Konfiguration eines NGINX-Reverse-Proxys für NodeJS- oder Angular-Anwendungen. Sie können jetzt mit dem Hinzufügen eines kostenlosen SSL-Zertifikats wie Let’s Encrypt fortfahren, um Ihre Anwendung zu sichern!