ReactJS ist eine sehr leistungsfähige Front-End-Open-Source-JavaScript-Bibliothek, die zum Erstellen der Benutzeroberfläche und verwandter Komponenten verwendet wird. Es wird von Facebook und der Community der Entwickler gepflegt. ReactJS kann bei der Entwicklung von Webanwendungen oder mobilen Apps verwendet werden.
In diesem Tutorial zeigen wir Ihnen, wie Sie ReactJS auf Ihrem Ubuntu 20.04-Server installieren.
Voraussetzungen
- Ein Ubuntu 20.04 VPS mit aktiviertem Root-Zugriff oder ein Benutzer mit Sudo-Berechtigungen.
- 4 GB RAM (mindestens 2 GB)
- 10 GB freier Speicherplatz
Schritt 1:Melden Sie sich über SSH an und aktualisieren Sie Ihr System
Zuerst müssen Sie sich über SSH als Root-Benutzer bei Ihrem Ubuntu 20.04-Server anmelden:
ssh root@IP_Address -p Port_number
Sie müssen „IP_Address“ und „Port_number“ durch die jeweilige IP-Adresse und SSH-Portnummer Ihres Servers ersetzen. Ersetzen Sie außerdem „root“ bei Bedarf durch den sudo-Benutzernamen.
Sie müssen sicherstellen, dass alle auf dem Server installierten Ubuntu-Betriebssystempakete auf dem neuesten Stand sind. Führen Sie die folgenden Befehle aus, um alle installierten Pakete auf Ihrem Server zu aktualisieren:
apt-get update apt-get upgrade
Schritt 2. Nodejs und NPM installieren
Zunächst müssen Sie NodeJS installieren, da eine ReactJS-Anwendung nur ausgeführt werden kann, wenn NodeJS auf Ihrem Server installiert ist. Node.js ist eine Open-Source- und plattformübergreifende JavaScript-Laufzeitumgebung, die auf der V8-JavaScript-Engine von Chrome basiert.
Der einfachste Weg, Node.js und npm zu installieren, besteht darin, sie aus dem Ubuntu-Standard-Repository zu installieren.
Standardmäßig ist die neueste Version von Node.js nicht im Standard-Repository von Ubuntu 20.04 verfügbar. Sie müssen also das offizielle Node.js-Repository zu Ihrem System hinzufügen.
Fügen Sie das Node.js-Repository mit dem folgenden Befehl hinzu:
curl -sL https://deb.nodesource.com/setup_14.x | bash -
Und installieren Sie Node.js aus den hinzugefügten Repositorys, indem Sie den folgenden Befehl ausführen:
sudo apt-get install nodejs
Nachdem NodeJS installiert wurde, können Sie die installierte Version von Node.js mit dem folgenden Befehl überprüfen:
node -v
Sie sollten die folgende Ausgabe erhalten:
v14.17.1
Sobald Node.js installiert ist, aktualisieren Sie NPM mit dem folgenden Befehl auf die neueste Version:
npm install npm@latest -g
Sie können jetzt die npm-Version mit dem folgenden Befehl überprüfen:
npm -v
Sie sollten die folgende Ausgabe erhalten:
7.19.0
Schritt 3. Installiere das Create-React-App-Tool
Installieren Sie nun die create-react-app Tool mit NPM. Dieses Tool hilft dabei, alle Tools festzulegen, die zum Erstellen eines neuen Projekts in React erforderlich sind.
npm install -g create-react-app
Prüfen Sie die Version mit:
create-react-app --version
Sie sollten die folgende Ausgabe erhalten:
4.0.3
Schritt 4:Erstellen Sie Ihre ReactJS-Anwendung
Sie können Ihre ReactJS-Anwendung mit dem folgenden Befehl erstellen:
create-react-app my-project
Sobald die Installation abgeschlossen ist, sollten Sie die folgende Ausgabe sehen:
Success! Created my-project at /root/my-project 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 my-project npm start Happy hacking!
Sobald Ihr Projekt erstellt ist, ändern Sie das Verzeichnis in die ReactJS-Anwendung:
cd my-project
Jetzt müssen Sie Ihre ReactJS-Anwendung mit dem folgenden Befehl starten:
npm start
Sie sollten die folgende Ausgabe erhalten:
Compiled successfully! You can now view my-project in the browser. Local: http://localhost:3000 On Your Network: http://192.168.1.101:3000 Note that the development build is not optimized. To create a production build, use npm run build.
Standardmäßig startet die ReactJS-Anwendung auf Port 3000.
Schritt 5:Erstellen Sie eine Systemd-Servicedatei für die ReactJS-App
Als Nächstes müssen Sie eine systemd-Dienstdatei erstellen, um den ReactJS-Dienst zu verwalten. Sie können es mit dem folgenden Befehl erstellen:
nano /lib/systemd/system/reactjs.service
Fügen Sie die folgenden Zeilen hinzu:
[Service] Type=simple User=root Restart=on-failure WorkingDirectory=/root/my-project ExecStart=npm start -- --port=3000
Speichern und schließen Sie die Datei und laden Sie dann den systemd-Dienst 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 reactjs systemctl enable reactjs
Sie können den Status des ReactJS-Dienstes mit dem folgenden Befehl überprüfen:
systemctl status reactjs
Sie sollten die folgende Ausgabe erhalten:
● reactjs.service Loaded: loaded (/lib/systemd/system/reactjs.service; static; vendor preset: enabled) Active: active (running) Main PID: 66390 (npm start --por) Tasks: 30 (limit: 2248) Memory: 188.7M CGroup: /system.slice/reactjs.service ├─66390 npm start --port=3000 ├─66401 sh -c react-scripts start "--port=3000" ├─66402 node /root/my-project/node_modules/.bin/react-scripts start --port=3000 └─66409 /usr/bin/node /root/my-project/node_modules/react-scripts/scripts/start.js --port=3000
Schritt 6:Greifen Sie auf die Web-UI von ReactJS zu
Öffnen Sie nun Ihren Webbrowser und geben Sie die URL http://your-server-ip-address ein . Sie sollten Ihre ReactJS-Anwendung auf dem folgenden Bildschirm sehen:
Herzliche Glückwünsche! Sie haben die ReactJS-App erfolgreich auf Ubuntu 20.04 installiert.
Natürlich müssen Sie ReactJS nicht auf Ubuntu installieren, wenn Sie einen unserer verwalteten Hosting-Dienste verwenden. In diesem Fall können Sie einfach unsere erfahrenen Linux-Administratoren bitten, dies für Sie zu installieren. Sie sind rund um die Uhr erreichbar und kümmern sich umgehend um Ihr Anliegen.
PS . Wenn Ihnen dieser Beitrag zur Installation von ReactJS auf Ubuntu gefallen hat, teilen Sie ihn bitte mit Ihren Freunden in den sozialen Netzwerken über die Schaltflächen auf der linken Seite oder hinterlassen Sie einfach unten eine Antwort. Danke.