So installieren Sie ReactJS mit Nginx-Proxy unter CentOS 8

React ist eine kostenlose und Open-Source-JavaScript-Bibliothek, die von Facebook entwickelt wurde. Es wird zum Erstellen von Web-Frontend- und UI-Komponenten verwendet. Es wird häufig für die Entwicklung von Webanwendungen oder mobilen Apps verwendet. Es ermöglicht Entwicklern, wiederverwendbare Komponenten zu erstellen, die voneinander unabhängig sind. Es kann mit anderen Bibliotheken verwendet werden, einschließlich Axios, JQuery AJAX oder dem im Browser integrierten window.fetch.

In diesem Beitrag zeigen wir Ihnen, wie Sie React JS unter CentOS 8 installieren

Voraussetzungen

• Ein Server mit CentOS 8.
• Ein gültiger Domainname, auf den Ihre Server-IP verweist.
• Auf dem Server ist ein Root-Passwort konfiguriert.

Erste Schritte

Bevor Sie beginnen, müssen Sie Ihre Systempakete auf die neueste Version aktualisieren. Sie können sie aktualisieren, indem Sie den folgenden Befehl ausführen:

dnf update -y

Sobald alle Pakete auf dem neuesten Stand sind, installieren Sie andere erforderliche Abhängigkeiten mit dem folgenden Befehl:

dnf install gcc-c++ make curl -y

Sobald Sie mit der Installation der erforderlichen Abhängigkeiten fertig sind, können Sie mit dem nächsten Schritt fortfahren.

Installieren Sie NPM und Node.js

Als nächstes müssen Sie Node.js und NPM in Ihrem System installieren. NPM, auch Paketmanager genannt, ist ein Befehlszeilentool, das für die Interaktion mit Javascript-Paketen verwendet wird. Standardmäßig ist die neueste Version von NPM und Node.js nicht im CentOS-Standard-Repository enthalten. Sie müssen also das Node-Quell-Repository zu Ihrem System hinzufügen. Sie können es mit dem folgenden Befehl hinzufügen:

curl -sL https://rpm.nodesource.com/setup_14.x | bash -

Nachdem das Repository hinzugefügt wurde, installieren Sie Node.js und NPM mit dem folgenden Befehl:

dnf install nodejs -y

Überprüfen Sie nach Abschluss der Installation die Node.js-Version, indem Sie den folgenden Befehl ausführen:

Knoten -v

Sie sollten die folgende Ausgabe erhalten:

v14.16.0

Sie können die NPM-Version auch überprüfen, indem Sie den folgenden Befehl ausführen:

npm -v

Sie sollten die folgende Ausgabe erhalten:

6.14.11

Zu diesem Zeitpunkt sind NPM und Node.js in Ihrem System installiert. Sie können jetzt mit der Installation von Reactjs fortfahren.

Reactjs installieren

Bevor Sie beginnen, müssen Sie create-react-app in Ihrem System installieren. Es ist ein Befehlszeilenprogramm, das zum Erstellen einer React-Anwendung verwendet wird.

Sie können es wie unten gezeigt mit dem NPM installieren:

npm install -g create-react-app

Überprüfen Sie nach der Installation die installierte Version von create-react-app mit dem folgenden Befehl:

create-react-app --version

Sie sollten die folgende Ausgabe sehen:

4.0.3

Erstellen Sie als Nächstes Ihre erste Reactjs-App mit dem folgenden Befehl:

create-react-app myapp

Sie sollten die folgende Ausgabe sehen:

Erfolg! myapp unter /root/myapp erstelltIn diesem Verzeichnis können Sie mehrere Befehle ausführen:npm start Startet den Entwicklungsserver. npm run build Bündelt die App in statische Dateien für die Produktion. npm test Startet den Testrunner. npm run eject Entfernt dieses Tool und kopiert Build-Abhängigkeiten, Konfigurationsdateien und Skripte in das App-Verzeichnis. Wenn Sie dies tun, können Sie nicht zurückgehen! Wir empfehlen, dass Sie mit der Eingabe beginnen:cd myapp npm start

Wechseln Sie als Nächstes in das Verzeichnis myapp und starten Sie die Anwendung mit dem folgenden Befehl:

cd myapp
npm starten

Sobald die Anwendung erfolgreich gestartet wurde, sollten Sie die folgende Ausgabe erhalten:

Erfolgreich kompiliert! Sie können myapp jetzt im Browser anzeigen. http://localhost:3000Beachten Sie, dass der Entwicklungs-Build nicht optimiert ist. Um einen Produktions-Build zu erstellen, verwenden Sie npm run build.

Drücken Sie jetzt STRG+C, um die Anwendung zu stoppen. Sie können jetzt mit dem nächsten Schritt fortfahren.

Erstellen Sie eine Systemd-Dienstdatei für Reactjs

Als nächstes ist es eine gute Idee, eine systemd-Dienstdatei zu erstellen, um den Reactjs-Dienst zu verwalten. Sie können es mit dem folgenden Befehl erstellen:

nano /lib/systemd/system/react.service

Fügen Sie die folgenden Zeilen hinzu:

[Unit]After=network.target[Service]Type=simpleUser=rootWorkingDirectory=/root/myappExecStart=/usr/bin/npm startRestart=on-failure[Install]WantedBy=multi-user.target

Speichern und schließen Sie die Datei und laden Sie dann den systemd-Daemon mit dem folgenden Befehl neu:

systemctl daemon-reload

Starten Sie als Nächstes den Reactjs-Dienst und ermöglichen Sie ihm, beim Systemneustart mit dem folgenden Befehl zu starten:

Systemctl Start React
Systemctl Enable React

Überprüfen Sie als Nächstes den Status der Reactjs-App mit dem folgenden Befehl:

Systemctl-Status reagieren

Sie sollten die folgende Ausgabe erhalten:

ss -antpl | grep 3000

LISTEN 0 128 0.0.0.0:3000 0.0.0.0:* Benutzer:(("node",pid=2209,fd=18)) 

dnf install nginx -y

nano /etc/nginx/conf.d/react.conf

server {listen 80; server_name respond.example.com; location / {proxy_set_header X-Forwarded-For $remote_addr; Proxy_set_header Host $http_host; Proxy_Pass http://localhost:3000; }}

nginx -t

nginx:Die Syntax der Konfigurationsdatei /etc/nginx/nginx.conf ist oknginx:Der Test der Konfigurationsdatei /etc/nginx/nginx.conf ist erfolgreich

systemctl start nginx
systemctl enable nginx

systemctl status nginx

firewall-cmd --permanent --add-port=80/tcp
firewall-cmd --permanent --add-port=443/tcp

firewall-cmd --reload