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 [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]
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
+ [email protected]
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]: > [email protected] 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.

Das könnte dich auch interessieren …