So installieren Sie ReactJS mit Nginx-Proxy auf CentOS 8

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

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

Voraussetzungen

  • Ein Server, auf dem CentOS 8 läuft.
  • Ein gültiger Domain-Name, der auf Ihre Server-IP zeigt.
  • Ein Root-Passwort ist auf dem Server 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 weitere 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.

NPM und Node.js installieren

Als nächstes müssen Sie Node.js und NPM in Ihrem System installieren. NPM, auch Paketmanager genannt, ist ein Kommandozeilen-Tool, das für die Interaktion mit Javascript-Paketen verwendet wird. Standardmäßig ist die neueste Version von NPM und Node.js nicht im Standard-Repository von CentOS enthalten. Sie müssen also das Node-Quellcode-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 -

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

dnf install nodejs -y

Sobald die Installation abgeschlossen ist, überprüfen Sie die Node.js-Version, indem Sie den folgenden Befehl ausführen:

node -v

Sie sollten die folgende Ausgabe erhalten:

v14.16.0

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

npm -v

Sie sollten die folgende Ausgabe erhalten:

6.14.11

An diesem Punkt sind NPM und Node.js in Ihrem System installiert. Sie können nun mit der Installation von Reactjs fortfahren.

Reactjs installieren

Bevor Sie beginnen, müssen Sie create-react-app in Ihrem System installieren. Es ist ein Kommandozeilenprogramm, mit dem Sie eine React-Applikation erstellen können.

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

npm install -g create-react-app

Sobald es installiert ist, überprüfen Sie die installierte Version von create-react-app mit dem folgenden Befehl:

create-react-app --version

Sie sollten die folgende Ausgabe sehen:

4.0.3

Als nächstes erstellen Sie Ihre erste Reactjs-App mit dem folgenden Befehl:

create-react-app myapp

Sie sollten die folgende Ausgabe sehen:

Success! Created myapp at /root/myapp
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd myapp
  npm start

Wechseln Sie anschließend in das Verzeichnis myapp und starten Sie die Anwendung mit dem folgenden Befehl:

cd myapp
npm start

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

Compiled successfully!

You can now view myapp in the browser.

  http://localhost:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

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

Erstellen einer 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 sie mit dem folgenden Befehl erstellen:

nano /lib/systemd/system/react.service

Fügen Sie die folgenden Zeilen ein:

[Unit]
After=network.target

[Service]
Type=simple
User=root
WorkingDirectory=/root/myapp
ExecStart=/usr/bin/npm start
Restart=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 aktivieren Sie, dass er beim Neustart des Systems gestartet wird, mit dem folgenden Befehl:

systemctl start react
systemctl enable react

Als nächstes überprüfen Sie den Status der Reactjs-App mit dem folgenden Befehl:

systemctl status react

Sie sollten die folgende Ausgabe erhalten:

? react.service
   Loaded: loaded (/usr/lib/systemd/system/react.service; disabled; vendor preset: disabled)
   Active: active (running) since Tue 2021-03-23 02:52:32 EDT; 6s ago
 Main PID: 2191 (node)
    Tasks: 29 (limit: 12524)
   Memory: 220.3M
   CGroup: /system.slice/react.service
           ??2191 npm
           ??2202 node /root/myapp/node_modules/.bin/react-scripts start
           ??2209 /usr/bin/node /root/myapp/node_modules/react-scripts/scripts/start.js

Mar 23 02:52:34 centos8 npm[2191]: ? ?wds?: Project is running at http://0.0.0.0:3000/
Mar 23 02:52:34 centos8 npm[2191]: ? ?wds?: webpack output is served from
Mar 23 02:52:34 centos8 npm[2191]: ? ?wds?: Content not from webpack is served from /root/myapp/public
Mar 23 02:52:34 centos8 npm[2191]: ? ?wds?: 404s will fallback to /
Mar 23 02:52:34 centos8 npm[2191]: Starting the development server...
Mar 23 02:52:37 centos8 npm[2191]: Compiled successfully!
Mar 23 02:52:37 centos8 npm[2191]: You can now view myapp in the browser.
Mar 23 02:52:37 centos8 npm[2191]:   http://localhost:3000
Mar 23 02:52:37 centos8 npm[2191]: Note that the development build is not optimized.
Mar 23 02:52:37 centos8 npm[2191]: To create a production build, use npm run build.

Zu diesem Zeitpunkt ist Reactjs gestartet und lauscht auf Port 3000. Sie können dies mit dem folgenden Befehl überprüfen:

ss -antpl | grep 3000

Sie sollten die folgende Ausgabe erhalten:

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

Wenn Sie fertig sind, können Sie mit dem nächsten Schritt fortfahren.

Nginx als Reverse-Proxy für die React-App konfigurieren

Als nächstes müssen Sie Nginx als Reverse-Proxy konfigurieren, um auf die React-App auf Port 80 zuzugreifen. Installieren Sie zunächst das Nginx-Paket mit dem folgenden Befehl:

dnf install nginx -y

Sobald Nginx installiert ist, erstellen Sie eine neue Konfigurationsdatei für den virtuellen Nginx-Host mit dem folgenden Befehl:

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

Fügen Sie die folgenden Zeilen ein:

server {
    listen 80;
    server_name react.example.com;

    location / {
        proxy_set_header   X-Forwarded-For $remote_addr;
        proxy_set_header   Host $http_host;
        proxy_pass         http://localhost:3000;
    }
}

Speichern und schließen Sie die Datei, wenn Sie fertig sind, und überprüfen Sie dann Nginx mit dem folgenden Befehl auf Syntaxfehler:

nginx -t

Sie sollten die folgende Ausgabe erhalten:

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

Starten Sie schließlich den Nginx-Dienst und aktivieren Sie, dass er beim Neustart des Systems gestartet wird, indem Sie den folgenden Befehl ausführen:

systemctl start nginx
systemctl enable nginx

Sie können auch den Status von Nginx überprüfen, indem Sie den folgenden Befehl ausführen:

systemctl status nginx

Sie sollten den Status des React-Dienstes in der folgenden Ausgabe erhalten:

? nginx.service - The nginx HTTP and reverse proxy server
   Loaded: loaded (/usr/lib/systemd/system/nginx.service; disabled; vendor preset: disabled)
   Active: active (running) since Tue 2021-03-23 02:57:48 EDT; 4s ago
  Process: 4079 ExecStart=/usr/sbin/nginx (code=exited, status=0/SUCCESS)
  Process: 4078 ExecStartPre=/usr/sbin/nginx -t (code=exited, status=0/SUCCESS)
  Process: 4076 ExecStartPre=/usr/bin/rm -f /run/nginx.pid (code=exited, status=0/SUCCESS)
 Main PID: 4081 (nginx)
    Tasks: 2 (limit: 12524)
   Memory: 4.0M
   CGroup: /system.slice/nginx.service
           ??4081 nginx: master process /usr/sbin/nginx
           ??4082 nginx: worker process

Mar 23 02:57:48 centos8 systemd[1]: Starting The nginx HTTP and reverse proxy server...
Mar 23 02:57:48 centos8 nginx[4078]: nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
Mar 23 02:57:48 centos8 nginx[4078]: nginx: configuration file /etc/nginx/nginx.conf test is successful
Mar 23 02:57:48 centos8 systemd[1]: nginx.service: Failed to parse PID from file /run/nginx.pid: Invalid argument
Mar 23 02:57:48 centos8 systemd[1]: Started The nginx HTTP and reverse proxy server.

Sobald Sie fertig sind, können Sie mit dem nächsten Schritt fortfahren.

Firewall konfigurieren

Als nächstes müssen Sie die Ports 80 und 443 durch die Firewall zulassen. Sie können sie mit folgendem Befehl zulassen:

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

Laden Sie anschließend die Firewall neu, um die Konfigurationsänderungen zu übernehmen:

firewall-cmd --reload

Wenn Sie damit fertig sind, können Sie mit dem nächsten Schritt fortfahren.

Zugriff auf die Reactjs-Anwendung

Öffnen Sie nun Ihren Webbrowser und rufen Sie Ihre Reactjs-Anwendung über die URL http://react.example.com auf. Sie sollten die Reactjs-Seite auf dem folgenden Bildschirm sehen:

React.js auf CentOS

Fazit

Herzlichen Glückwunsch! Sie haben Reactjs erfolgreich auf CentOS 8 installiert. Außerdem haben Sie Nginx als Reverse-Proxy für die Reactjs-App konfiguriert. Sie können nun mit der Entwicklung Ihrer Reactjs-Anwendung beginnen.

Das könnte dich auch interessieren …