News
Serverspace Technologien in den VAE: Einführung von Falconcloud
VB
8. August 2022
Aktualisiert Juni 7, 2023

Nginx plus React-App an Ubuntu 20.04

Linux NGINX Ubuntu

Einleitung / Intro

In diesem Artikel wird beschrieben, wie Sie den Server vorbereiten, die ReactOS-Anwendung installieren und darauf bereitstellen Nginx Webserver.

Im Serverspace Sie uns Erstellen Sie einen Server mit bereits installierter App“Nginx".

Servervorbereitung

Um die React-App auf Ihrem eigenen Server zu installieren, sollten Sie Folgendes haben:

  • Server unter Ubuntu Betriebssystem mit Root-Zugriff oder Sudo-Mitgliedschaft
  • Domainname mit korrektem DNS-Einstellungen. A-Einträge sollten auf die öffentliche IP Ihres Servers „verweisen“.

Installationsprozess

  • Zuerst müssen Sie Ihre Berechtigungen erhöhen und dann NodeJS installieren
sudo -s
apt install nodejs npm -y
  • Der nächste Schritt ist die Installation des Npx-Pakets. Lauf einfach:
npm i -g npx -y
  • Um zu überprüfen, ob alles in Ordnung ist, führen Sie bitte Folgendes aus:
node -v
npm -v
npx -v

Sie sollten so etwas sehen:

pic.1

  • Um Ihre App zu erstellen, sollten Sie diesen Befehl verwenden:
npx create-react-app <YOUR_APP_NAME>

Die Zusammenstellung nimmt viel Zeit in Anspruch, seien Sie also geduldig. Wenn der Vorgang abgeschlossen ist, sehen Sie Folgendes:

pic.2

Webserver-Installation

Um mit Ihrer App arbeiten zu können, benötigen Sie einen beliebigen Webserver, z Nginx. Um es zu installieren, führen Sie Folgendes aus:

  • apt install -y nginx

Dann erstellen Sie eine grundlegende Konfigurationsdatei:

cat <<EOF > /etc/nginx/sites-enabled/<DOMAIN_NAME>
server {
listen 80;
root /var/www/<DOMAIN_NAME>;
index index.php index.html;
server_name <DOMAIN_NAME> www.<DOMAIN_NAME>;
location / {
}
}
EOF

pic.3

Anwendungsstart

  • Der nächste Schritt ist der App-Start:
cd /home/<USERNAME>/<APPNAME>
npm start

Sie sollten etwas Ähnliches wie das Bild unten sehen:

pic.4

Öffnen Sie die URL http:// :3000 im Browser. Falls Sie eine Antwort wie unten sehen – terminatÖffnen Sie die App über STRG+C und fahren Sie mit dem nächsten Schritt fort:

pic.5

  • Gehen Sie in das Verzeichnis Ihrer App und kompilieren Sie sie:
cd /home/<USERNAME>/<MYAPP>
npm run build

Warte ein bisschen. Das erwartete Ergebnis sieht folgendermaßen aus:

pic.6

  • Zum Schluss kopieren Sie einfach die kompilierten App-Dateien in das Website-Verzeichnis, aktivieren und starten Sie neu Nginx:
mkdir /var/www/<DOMAIN_NAME> && cp /home/<USERNAME>/<MYAPP>/build/* /var/www/<DOMAIN_NAME>/
systemctl enable nginx && service nginx restart

pic.7

Letzter Check

Um das Ergebnis zu überprüfen, öffnen Sie einfach Ihre Website im Browser:

pic.8

Zusammenfassung

In diesem Artikel haben wir beschrieben, wie Sie NodeJS installieren, Ihre erste App erstellen und sie auf Ihrer Website bereitstellen Nginx Webserver.

Abstimmung:
5 aus 5
Durchschnittliche Bewertung: 5
Bewertet von: 2
1101 CT Amsterdam Niederlande, Herikerbergweg 292
+31 20 262-58-98
700 300
ITGLOBAL.COM NL
700 300
Wir verwenden Cookies, um Ihr Erlebnis auf der Website zu verbessern Serverspace besser. Indem Sie weiterhin auf unserer Website surfen, stimmen Sie unseren zu
Cookies und Datenschutzbestimmungen.