Tutorials

ReactJS auf Ubuntu installieren und bereitstellen: Ein vollständiger Guide

Melden

Hier ist ein ausführliches Tutorial, wie du ReactJS auf Ubuntu 20.04 LTS installierst und eine App bereitstellst (Deployment).

ReactJS ist eine der populärsten JavaScript-Bibliotheken für die Erstellung von Benutzeroberflächen. In dieser Anleitung gehen wir Schritt für Schritt durch die Installation der Laufzeitumgebung, die Erstellung eines Projekts und das abschließende Deployment auf einem Webserver.

Schritt 1: System aktualisieren

Bevor du startest, solltest du sicherstellen, dass deine Paketlisten und das System auf dem neuesten Stand sind. Öffne dein Terminal und gib ein:

sudo apt update && sudo apt upgrade -y

Schritt 2: Node.js und npm installieren

React benötigt Node.js (die JavaScript-Laufzeitumgebung) und npm (den Node Package Manager). Die Standard-Repositorys von Ubuntu enthalten oft ältere Versionen, daher nutzen wir das NodeSource-Repository, um eine aktuelle LTS-Version zu erhalten.

  1. NodeSource PPA hinzufügen:

    curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -

  2. Node.js installieren:

    sudo apt-get install -y nodejs

  3. Installation überprüfen: Überprüfe, ob die Installation erfolgreich war, indem du die Versionen abfragst:

    node -v
npm -v

Schritt 3: Ein neues React-Projekt erstellen

Es gibt zwei gängige Wege, eine React-App zu starten. Wir verwenden hier das offizielle Tool create-react-app via npx (ein Tool, das mit npm ausgeliefert wird).

  1. Projekt erstellen: Ersetze meine-react-app durch deinen gewünschten Projektnamen.

    npx create-react-app meine-react-app

  2. In das Projektverzeichnis wechseln:

    cd meine-react-app

  3. Entwicklungsserver starten: Um zu sehen, ob alles funktioniert, starte den lokalen Server:

    npm start

    Deine App sollte nun unter http://localhost:3000 im Browser erreichbar sein.

Schritt 4: React App für die Produktion bauen (Build)

Wenn deine App bereit für das Internet ist, darfst du nicht den Entwicklungsserver verwenden. Du musst ein optimiertes "Production Build" erstellen.

  1. Build-Prozess starten:
    npm run build

    Dieser Befehl erstellt einen Ordner namens build/ in deinem Projektverzeichnis. Dieser Ordner enthält alle Dateien (HTML, JS, CSS), die minimiert und für Browser optimiert sind.

Schritt 5: Deployment mit Nginx

Um die App dauerhaft im Web verfügbar zu machen, nutzen wir den Webserver Nginx.

  1. Nginx installieren:

    sudo apt install nginx -y

  2. Build-Dateien kopieren: Kopiere den Inhalt deines build/-Ordners in das Standard-Webverzeichnis von Nginx:

    sudo cp -r build/* /var/www/html/

  3. Berechtigungen anpassen: Stelle sicher, dass Nginx die Dateien lesen kann:

    sudo chown -R www-data:www-data /var/www/html/

  4. Nginx Konfiguration für React Router (Optional aber empfohlen): Wenn du React Router (Client-seitiges Routing) verwendest, musst du Nginx anweisen, alle Anfragen an die index.html zu leiten.

    Öffne die Konfigurationsdatei:

    sudo nano /etc/nginx/sites-available/default

    Suche den Block location / und ändere ihn wie folgt ab:

    location / {
    try_files $uri $uri/ /index.html;
}

    Speichere mit Strg+O, Enter und beende mit Strg+X.

  5. Nginx neu starten:

    sudo systemctl restart nginx

Fazit

Herzlichen Glückwunsch! Du hast erfolgreich:

  1. Node.js und npm auf Ubuntu installiert.
  2. Eine neue React-App erstellt.
  3. Einen produktionsreifen Build generiert.
  4. Die App mit Nginx als Webserver bereitgestellt.

Deine App ist nun unter der IP-Adresse deines Servers oder deiner Domain erreichbar.

0