So installieren Sie ReactJS auf Ubuntu 20.04
ReactJS ist eine freie und quelloffene JavaScript-Bibliothek, die für die Erstellung wiederverwendbarer UI-Komponenten verwendet wird. Sie wurde 2011 von Facebook entwickelt, um mit minimalem Programmieraufwand schnell und effizient umfangreiche und ansprechende Web-Apps zu erstellen. Mit ihr können Sie interaktive Elemente auf Websites erstellen. Es verwendet Virtual DOM, das die App schnell macht. Es bietet eine Vielzahl von Funktionen, darunter Virtual DOM, One-way Data Binding, Komponenten, JSX, Conditional Statements und viele mehr.
In diesem Tutorial zeigen wir Ihnen, wie Sie eine React-App installieren und eine ReactJS-Anwendung mit Nginx-Webserver auf Ubuntu 20.04 hosten.
Voraussetzungen
- Ein Server mit Ubuntu 20.04 und mindestens 2 GB RAM.
- Ein gültiger Domain-Name, der auf Ihre Server-IP zeigt. In diesem Lernprogramm verwenden wir die Domain reactjs.example.com.
- Ein Root-Passwort ist auf dem Server konfiguriert.
Erste Schritte
Bevor Sie beginnen, ist es immer empfehlenswert, Ihre Systempakete auf die neueste Version zu aktualisieren. Sie können sie aktualisieren, indem Sie den folgenden Befehl ausführen:
apt-get update -y
Sobald alle Pakete aktualisiert sind, installieren Sie weitere 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.
Node.js installieren
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. Daher müssen Sie Node.js aus dem offiziellen Node.js-Repository installieren.
Fügen Sie zunächst das Node.js-Repository mit dem folgenden Befehl hinzu:
curl -sL https://deb.nodesource.com/setup_14.x | bash -
Führen Sie anschließend den folgenden Befehl aus, um Node.js auf Ihrem System zu installieren:
apt-get install nodejs -y
Nach der Installation von Node.js aktualisieren Sie den NPM mit folgendem Befehl auf die neueste Version:
npm install npm@latest -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 + npm@6.14.10 updated 2 packages in 12.78s
Als nächstes überprüfen Sie die installierte Version von Node.js mit dem folgenden Befehl:
node -v
Sie sollten die folgende Ausgabe erhalten:
v14.15.3
Wenn Sie damit fertig sind, können Sie mit dem nächsten Schritt fortfahren.
Installieren Sie das Tool Create React App
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 wird alle Tools einrichten, die Sie für den Start 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 + create-react-app@4.0.1 added 67 packages from 25 contributors in 4.705s
Sobald 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 eine React-App mit dem Tool Create React App erstellen.
Wechseln Sie zunächst in das Verzeichnis /opt und erstellen Sie Ihr erstes Projekt mit dem folgenden Befehl:
cd /opt create-react-app reactproject
Sie sollten die folgende Ausgabe sehen:
Success! Created reactproject at /opt/reactproject
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 reactproject
npm start
Happy hacking!
Als Nächstes wechseln Sie das Verzeichnis zu Ihrem Projekt und starten Ihre Anwendung mit dem folgenden Befehl:
cd /opt/reactproject npm start
Sie sollten die folgende Ausgabe erhalten:
Compiled successfully! You can now view reactproject 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 CTRL+C, um die Anwendung zu stoppen.
Erstellen einer Startup-Datei für React App
Wenn Sie die React-App automatisch beim Systemneustart starten möchten, müssen Sie einen systemd-Dienst für Ihre React-App erstellen. So können Sie Ihre App einfach mit dem systemctl-Befehl verwalten. Sie können eine systemd-Dienstdatei mit dem folgenden Befehl erstellen:
nano /lib/systemd/system/react.service
Fügen Sie die folgenden Zeilen ein:
[Service] Type=simple User=root Restart=on-failure WorkingDirectory=/opt/reactproject ExecStart=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 aktivieren Sie, dass er beim Neustart des Systems gestartet wird, 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 react
Sie sollten die folgende Ausgabe erhalten:
? react.service
Loaded: loaded (/lib/systemd/system/react.service; static; vendor preset: enabled)
Active: active (running) since Sat 2020-12-19 06:11:42 UTC; 4s ago
Main PID: 30833 (node)
Tasks: 30 (limit: 4691)
Memory: 141.0M
CGroup: /system.slice/react.service
??30833 npm
??30844 sh -c react-scripts start "--port=3000"
??30845 node /opt/reactproject/node_modules/.bin/react-scripts start --port=3000
??30852 /usr/bin/node /opt/reactproject/node_modules/react-scripts/scripts/start.js --port=3000
Dec 19 06:11:42 ubuntu2004 systemd[1]: Started react.service.
Dec 19 06:11:43 ubuntu2004 npm[30833]: > reactproject@0.1.0 start /opt/reactproject
Dec 19 06:11:43 ubuntu2004 npm[30833]: > react-scripts start "--port=3000"
Dec 19 06:11:46 ubuntu2004 npm[30852]: ? ?wds?: Project is running at http://0.0.0.0:3000/
Dec 19 06:11:46 ubuntu2004 npm[30852]: ? ?wds?: webpack output is served from
Dec 19 06:11:46 ubuntu2004 npm[30852]: ? ?wds?: Content not from webpack is served from /opt/reactproject/public
Dec 19 06:11:46 ubuntu2004 npm[30852]: ? ?wds?: 404s will fallback to /
Dec 19 06:11:46 ubuntu2004 npm[30852]: Starting the development server...
Sobald Sie fertig sind, können Sie mit dem nächsten Schritt fortfahren.
Nginx für React-App konfigurieren
Es ist eine gute Idee, Nginx als Reverse-Proxy für React App zu installieren und zu konfigurieren. So können Sie auf Ihre App über den Port 80 zugreifen.
Installieren Sie zunächst das Nginx-Paket mit dem folgenden Befehl:
apt-get install nginx -y
Sobald Nginx installiert ist, erstellen Sie eine neue Konfigurationsdatei für den virtuellen Nginx-Host:
nano /etc/nginx/sites-available/reactjs.conf
Fügen Sie die folgenden Zeilen ein:
upstream backend {
server localhost:3000;
}
server {
listen 80;
server_name reactjs.example.com;
location / {
proxy_pass http://backend/;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "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_redirect off;
}
}
Speichern und schließen Sie die Datei und aktivieren Sie dann den virtuellen Nginx-Host mit dem folgenden Befehl:
ln -s /etc/nginx/sites-available/reactjs.conf /etc/nginx/sites-enabled/
Als nächstes überprüfen Sie Nginx auf Syntaxfehler, indem Sie den folgenden Befehl ausführen:
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 abschließend den Nginx-Dienst neu, um die Änderungen zu übernehmen:
systemctl restart nginx
Sie können den Status des Nginx-Dienstes auch mit dem folgenden Befehl überprüfen:
systemctl status nginx
Sie sollten die folgende Ausgabe sehen:
? nginx.service - A high performance web server and a reverse proxy server
Loaded: loaded (/lib/systemd/system/nginx.service; enabled; vendor preset: enabled)
Active: active (running) since Sat 2020-12-19 06:12:42 UTC; 4s ago
Docs: man:nginx(8)
Process: 30899 ExecStartPre=/usr/sbin/nginx -t -q -g daemon on; master_process on; (code=exited, status=0/SUCCESS)
Process: 30913 ExecStart=/usr/sbin/nginx -g daemon on; master_process on; (code=exited, status=0/SUCCESS)
Main PID: 30915 (nginx)
Tasks: 3 (limit: 4691)
Memory: 3.6M
CGroup: /system.slice/nginx.service
??30915 nginx: master process /usr/sbin/nginx -g daemon on; master_process on;
??30916 nginx: worker process
??30917 nginx: worker process
Dec 19 06:12:42 ubuntu2004 systemd[1]: Starting A high performance web server and a reverse proxy server...
Dec 19 06:12:42 ubuntu2004 systemd[1]: Started A high performance web server and a reverse proxy server.
An diesem Punkt ist Nginx installiert und für die Bedienung von React App konfiguriert. Sie können nun mit dem nächsten Schritt fortfahren.
Zugriff auf das React App Web-Interface
Öffnen Sie nun Ihren Webbrowser und geben Sie die URL http://reactjs.example.com ein. Im folgenden Bildschirm werden Sie zum React.Js-Webinterface weitergeleitet:
Fazit
Herzlichen Glückwunsch! Sie haben React.Js erfolgreich auf dem Ubuntu 20.04 Server installiert und konfiguriert. Ich hoffe, Sie haben nun genug Wissen, um Ihre eigene React-Anwendung in der Produktionsumgebung einzusetzen. Wenn Sie Fragen haben, können Sie sich gerne an mich wenden.