So installieren Sie ReactJS unter Ubuntu 20.04

ReactJS ist eine kostenlose Open-Source-JavaScript-Bibliothek, die zum Erstellen wiederverwendbarer UI-Komponenten verwendet wird. Es wurde 2011 von Facebook entwickelt, um mit minimalem Programmieraufwand schnell und effizient reichhaltige und ansprechende Web-Apps zu erstellen. Damit können Sie interaktive Elemente auf Websites erstellen. Es verwendet Virtual DOM, das die App schnell macht. Es bietet eine Vielzahl von Funktionen, darunter virtuelles DOM, unidirektionale Datenbindung, Komponenten, JSX, bedingte Anweisungen und vieles mehr.

In diesem Tutorial zeigen wir Ihnen, wie Sie die Create React App installieren und eine ReactJS-Anwendung mit dem Nginx-Webserver unter Ubuntu 20.04 hosten.

Voraussetzungen

• Ein Server mit Ubuntu 20.04 und mindestens 2 GB RAM.
• Ein gültiger Domänenname, auf den Ihre Server-IP verweist. In diesem Tutorial verwenden wir die Domäne „reactjs.example.com“.
• Ein Root-Passwort wird auf dem Server konfiguriert.

Erste Schritte

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

apt-get update -y

Nachdem alle Pakete aktualisiert wurden, installieren Sie andere erforderliche Abhängigkeiten, indem Sie den folgenden Befehl ausführen:

apt-get install curl gnupg2 -y

Sobald alle Abhängigkeiten installiert sind, können Sie mit dem nächsten Schritt fortfahren.

Installieren Sie Node.js

Als nächstes müssen Sie Node.js auf Ihrem Server installieren. Standardmäßig ist die neueste Version von Node.js nicht im Standard-Repository von Ubuntu 20.04 verfügbar. Sie müssen also Node.js aus dem offiziellen Node.js-Repository installieren.

Fügen Sie zuerst das Node.js-Repository mit dem folgenden Befehl hinzu:

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

Führen Sie als Nächstes den folgenden Befehl aus, um Node.js auf Ihrem System zu installieren:

apt-get install nodejs -y

Aktualisieren Sie nach der Installation von Node.js den NPM mit dem folgenden Befehl auf die neueste Version:

npm install [email protected] -g

Sie sollten die folgende Ausgabe erhalten:

/usr/bin/npm -> /usr/lib/node_modules/npm/bin/npm-cli.js/usr/bin/npx -> /usr/lib/node_modules/npm/bin/npx-cli. js+ [email protected] hat 2 Pakete in 12,78 s aktualisiert

Überprüfen Sie als Nächstes die installierte Version von Node.js mit dem folgenden Befehl:

Knoten -v

Sie sollten die folgende Ausgabe erhalten:

v14.15.3

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

Installieren Sie das Create React App Tool

Create React App ist ein Tool, das Ihnen Zeit für die Einrichtung und Konfiguration spart. Sie müssen nur einen einzigen Befehl ausführen und Create React App richtet alle Tools ein, die Sie zum Starten Ihres Projekts benötigen.

Sie können das Create React App-Tool mit dem folgenden Befehl installieren:

npm install -g create-react-app

Sie sollten die folgende Ausgabe erhalten:

/usr/bin/create-react-app -> /usr/lib/node_modules/create-react-app/index.js+ [email protected]hinzugefügt 67 Pakete von 25 Mitwirkenden in 4,705 Sekunden

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

Erstellen Sie Ihre erste React-App

In diesem Abschnitt zeigen wir Ihnen, wie Sie mit dem Tool React App erstellen eine React-App erstellen.

Wechseln Sie zunächst in das Verzeichnis /opt und erstellen Sie Ihr erstes Projekt mit folgendem Befehl:

cd /opt
create-react-app-reactproject

Sie sollten die folgende Ausgabe sehen:

Erfolg! Reactproject unter /opt/reactproject erstellt. In 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 mehr zurück! Wir schlagen vor, dass Sie mit der Eingabe beginnen:cd respondproject npm startHappy hacking!

Wechseln Sie als Nächstes in das Verzeichnis Ihres Projekts und starten Sie Ihre Anwendung mit folgendem Befehl:

cd /opt/reactproject
npm start

Sie sollten die folgende Ausgabe erhalten:

Erfolgreich kompiliert!Reactproject kann jetzt im Browser angezeigt werden. 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 STRG+C um die Anwendung zu stoppen.

Erstellen Sie eine Startdatei für die React-App

Wenn Sie die React-App beim Systemneustart automatisch starten möchten, müssen Sie einen systemd-Dienst für Ihre React-App erstellen. So können Sie Ihre App einfach mit dem Befehl systemctl verwalten. Sie können eine systemd-Dienstdatei mit dem folgenden Befehl erstellen:

nano /lib/systemd/system/react.service

Fügen Sie die folgenden Zeilen hinzu:

[Service]Type=simpleUser=rootRestart=on-failureWorkingDirectory=/opt/reactprojectExecStart=npm start -- --port=3000

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 React-Dienst und ermöglichen Sie ihm, beim Systemneustart zu starten, indem Sie den folgenden Befehl ausführen:

Systemctl Start React
Systemctl Enable React

Sie können den Status des React-Dienstes mit dem folgenden Befehl überprüfen:

Systemctl-Status reagieren

Sie sollten die folgende Ausgabe erhalten:

apt-get install nginx -y

nano /etc/nginx/sites-available/reactjs.conf

Upstream-Backend { server localhost:3000;}server { listen 80; Servername respondjs.example.com; Standort / { Proxy_Pass http://backend/; Proxy_http_Version 1.1; Proxy_set_header Upgrade $http_upgrade; proxy_set_header Verbindung "upgrade"; Proxy_set_header Host $http_host; Proxy_Set_Header X-Real-IP $remote_addr; Proxy_set_header X-Forward-For $proxy_add_x_forwarded_for; proxy_set_header X-Forward-Proto http; proxy_set_header X-Nginx-Proxy true; Proxy-Weiterleitung aus; }}

ln -s /etc/nginx/sites-available/reactjs.conf /etc/nginx/sites-enabled/

nginx -t

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

systemctl startet nginx neu

systemctl status nginx