NGINX als Reverse Proxy für Node oder Angular Anwendungen

Ein Reverse Proxy ist ein Server, der Ressourcen für Clients von einem oder mehreren vorgelagerten Servern abruft. Er platziert sich typischerweise hinter einer Firewall in einem privaten Netzwerk und leitet Clientanfragen an diese vorgelagerten 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 betrieben werden, aber ihnen fehlen eine Reihe von fortschrittlichen Funktionen wie Lastverteilung, Sicherheit und Beschleunigung, die die meisten dieser Anwendungen verlangen. NGINX kann mit seinen fortschrittlichen Funktionen als Reverse Proxy dienen, während es die Anfragen für eine NodeJS- oder Angular-Anwendung bedient.

NGINX Reverse Proxy Server

In diesem Tutorial werden wir erkunden, wie NGINX als Reverse Proxy Server für eine Node- oder Angular-Anwendung verwendet werden kann. Das untenstehende Diagramm gibt Ihnen einen Überblick darüber, wie der Reverse Proxy Server funktioniert und Clientanfragen verarbeitet und die Antwort sendet.

Annahme

• Der NGINX-Server kann vom öffentlichen Bereich aus zugegriffen werden.
• Die Node- oder Angular-Anwendung wird in einem separaten System (vorgelagerter Server) in einem privaten Netzwerk ausgeführt und kann vom NGINX-Server erreicht werden. Es ist durchaus möglich, die Einrichtungen in einem einzigen System durchzuführen.
• Das Tutorial verwendet Variablen wie SUBDOMAIN.DOMAIN.TLD und PRIVATE_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 Beispiel-NodeJS-Anwendung erstellen, die über den NGINX Reverse Proxy zugegriffen wird. Beginnen Sie damit, eine Node-Umgebung in einem System einzurichten, das sich in Ihrem privaten Netzwerk befindet.

Node installieren

Bevor Sie mit der Installation von NodeJS und der neuesten Version von npm (Node Package Manager) fortfahren, überprüfen Sie, ob diese bereits installiert sind:

# 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 Beispiel-NodeJS-Anwendung fort. Um NodeJS und NPM zu installieren, verwenden Sie die folgenden Befehle:

# apt-get install nodejs npm

Nach der Installation überprüfen Sie 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 Node-Anwendung und installieren Sie ExpressJS.

# mkdir node_app  
# cd node_app
# npm install express

Nutzen Sie jetzt Ihren bevorzugten Texteditor, erstellen Sie 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 Node-Anwendung mit dem folgenden Befehl aus:

# node app.js

Stellen Sie eine Curl-Anfrage an den Port 3000, um zu bestätigen, dass die Anwendung auf localhost läuft.

# curl localhost:3000
Hello World !

Angular-Anwendung

Angular ist ein weiteres JavaScript-Framework zur Entwicklung von Webanwendungen mit TypeScript. Im Allgemeinen wird auf eine Angular-Anwendung über den mitgelieferten Standalone-Server zugegriffen. Aufgrund einiger Nachteile der Verwendung dieses Standalone-Servers in einer Produktionsumgebung wird jedoch ein Reverse Proxy vor einer Angular-Anwendung platziert, um sie besser zu bedienen.

Angular-Umgebung einrichten

Da Angular ein JavaScript-Framework ist, erfordert es, dass Nodejs mit einer Version > 8.9 im System installiert ist. Bevor Sie mit der Installation der Angular CLI fortfahren, richten Sie schnell eine Node-Umgebung ein, indem Sie den folgenden Befehl im Terminal ausgeben.

# 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 Bibliothekscodes für jede Angular-Anwendung zu generieren.

# npm install -g @angular/cli

Die Einrichtung der benötigten Angular-Umgebung ist jetzt abgeschlossen. Im nächsten Schritt werden wir eine Angular-Anwendung erstellen.

Angular-Anwendung erstellen

Erstellen Sie eine Angular-Anwendung mit dem folgenden Angular CLI-Befehl:

# ng new angular-app

Wechseln Sie in das neu erstellte Angular-Verzeichnis 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

Stellen Sie eine Curl-Anfrage an die Portnummer 3000, um zu bestätigen, dass die Angular-Anwendung auf localhost läuft.

# curl PRIVATE_IP:3000

Zu diesem Zeitpunkt wird die Angular-Anwendung auf Ihrem vorgelagerten Server laufen. Im nächsten Schritt konfigurieren wir NGINX als Reverse Proxy für die oben genannte Angular-Anwendung.

NGINX als Reverse Proxy konfigurieren

Navigieren Sie zum Konfigurationsverzeichnis des NGINX-Virtual-Hosts und erstellen Sie einen Serverblock, der als Reverse Proxy fungiert. Denken Sie daran, dass das System, auf dem Sie NGINX früher installiert haben, über das Internet erreicht werden kann, d.h. eine öffentliche IP ist dem System zugeordnet.

# 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 Proxy-Pass-Direktive in der obigen Konfiguration macht den Serverblock zu einem Reverse Proxy. Alle zum Domain SUBDOMAIN.DOMAIN.TLD bestimmten und mit dem Root-Location-Block (/) übereinstimmenden Verkehre werden an https://PRIVATE_IP:3000 weitergeleitet, wo die Node- oder Angular-Anwendung läuft.

NGINX Reverse Proxy für sowohl NodeJS als auch Angular-Anwendung?

Der obige Serverblock fungiert als Reverse Proxy entweder für eine Node- oder eine Angular-Anwendung. Um sowohl Node- als auch Angular-Anwendungen gleichzeitig mit NGINX Reverse Proxy zu bedienen, führen Sie sie einfach auf zwei verschiedenen Portnummern aus, wenn Sie beabsichtigen, das gleiche System für beide zu verwenden. Es ist auch sehr gut möglich, zwei separate vorgelagerte Server für den Betrieb von Node- und Angular-Anwendungen zu verwenden. Darüber hinaus müssen Sie auch einen weiteren NGINX-Serverblock mit passenden Werten für server_name und proxy_pass-Direktive erstellen. Überprüfen Sie auf syntaktische Fehler im obigen Serverblock und aktivieren Sie denselben. Laden Sie abschließend NGINX neu, um neue Einstellungen anzuwenden.

# nginx -t
# cd /etc/nginx/sites-enabled
# ln -s ../sites-available/node_or_angular_app.conf .
# systemctl reload nginx

Richten Sie jetzt Ihren bevorzugten Webbrowser auf https://SUBDOMAIN.DOMAIN.TLD, Sie werden mit einer Willkommensnachricht von der Node- oder Angular-Anwendung begrüßt.

Zusammenfassung

Das ist alles zur Konfiguration eines NGINX Reverse Proxys für NodeJS- oder Angular-Anwendungen. Sie können nun mit dem Hinzufügen eines kostenlosen SSL-Zertifikats wie Let’s Encrypt fortfahren, um Ihre Anwendung zu sichern!