So installieren Sie React.js in cPanel: Leitfaden 2024

Veröffentlicht: 2024-09-01
Inhaltsverzeichnis
  • Voraussetzungen
  • Schritt 1: Bereiten Sie Ihre React.js-App vor
  • Schritt 2: Richten Sie Ihre cPanel-Umgebung ein
  • Schritt 3: Servereinstellungen konfigurieren
  • Schritt 4: Finalisieren und Testen
  • Fehlerbehebung
  • Abschluss

React.js hat sich zu einer der beliebtesten JavaScript-Bibliotheken zum Erstellen dynamischer, interaktiver Benutzeroberflächen entwickelt. Während es häufig mit Backend-Frameworks wie Node.js verwendet wird, möchten viele Entwickler ihre React.js-Anwendungen in gemeinsam genutzten Hosting-Umgebungen bereitstellen, die cPanel verwenden, ein beliebtes Control Panel zur Verwaltung von Webhosting-Konten.

Dieser Artikel führt Sie durch den Prozess der Installation und Bereitstellung einer React.js-Anwendung mithilfe von cPanel, auch wenn Ihr Hosting-Anbieter nicht speziell auf JavaScript-Frameworks zugeschnitten ist.

Sie können auch lesen: Die 7 besten Hosting-Angebote für React Apps 2024 (im Vergleich)

Voraussetzungen

Bevor Sie mit dem Installationsprozess beginnen, sollten Sie einige Voraussetzungen erfüllen:

  1. Eine einsatzbereite React.js-Anwendung : Stellen Sie sicher, dass Ihre React-App vollständig und produktionsbereit ist. Dies bedeutet, dass alle Entwicklungsarbeiten abgeschlossen sind und Sie bereit sind, eine Version der App zu erstellen, die den Benutzern bereitgestellt werden kann.
  2. Zugriff auf cPanel : Sie benötigen Zugriff auf cPanel, der von Ihrem Webhosting-Dienst bereitgestellt wird. Die meisten Shared-Hosting-Anbieter bieten cPanel als Teil ihres Dienstes an. (Wir empfehlen Hostinger mit unserem Sonderangebot mit dem Gutscheincode „ Codeless “).
  3. Ein Domänenname : Eine registrierte Domäne oder Subdomäne, in der Sie Ihre React-App bereitstellen. Wenn Sie dies noch nicht eingerichtet haben, können Sie entweder eine vorhandene Domain verwenden oder über cPanel eine Subdomain erstellen.

Schritt 1: Bereiten Sie Ihre React.js-App vor

Generieren Sie einen Produktions-Build

Der erste Schritt bei der Bereitstellung Ihrer React.js-Anwendung auf cPanel besteht darin, einen Produktions-Build Ihrer App zu erstellen. Dieser Build ist auf Leistung optimiert und stellt sicher, dass er effizient im Web ausgeführt wird. Befolgen Sie diese Schritte auf Ihrem lokalen Computer.

  1. Öffnen Sie das Terminal : Navigieren Sie über Ihr Terminal oder die Eingabeaufforderung zu Ihrem React-Projektverzeichnis.
  2. Führen Sie den Build-Befehl aus : npm run build Wenn Sie Yarn als Paketmanager verwenden, würden Sie Folgendes verwenden: yarn build Dieser Befehl generiert einen build Ordner in Ihrem Projektverzeichnis. Der build Ordner enthält alle statischen Dateien, die zum Ausführen Ihrer Anwendung erforderlich sind, einschließlich der HTML-, CSS- und JavaScript-Dateien.

Vorschau des Builds (optional)

Vor der Bereitstellung empfiehlt es sich, eine lokale Vorschau des Produktions-Builds anzuzeigen, um sicherzustellen, dass alles ordnungsgemäß funktioniert. Sie können dies mit einem einfachen Server-Tool tun:

  1. Installieren Sie Serve global : npm install -g serve
  2. Bereitstellen des Builds : serve -s build Dieser Befehl startet einen lokalen Server und stellt Ihre App aus dem build Verzeichnis bereit, sodass Sie eine Vorschau in Ihrem Browser anzeigen können.

Schritt 2: Richten Sie Ihre cPanel-Umgebung ein

Sobald Ihre React-App für die Bereitstellung bereit ist, müssen Sie Ihre cPanel-Umgebung konfigurieren.

Erstellen Sie eine Subdomain (optional)

Wenn Sie möchten, dass Ihre React-App über eine Subdomain (z. B. react.yourdomain.com “) zugänglich ist, müssen Sie eine in cPanel erstellen:

  1. Melden Sie sich bei cPanel an : Verwenden Sie das Anmeldeportal Ihres Hosting-Anbieters, um auf cPanel zuzugreifen.
  2. Navigieren Sie zu Subdomains : Klicken Sie im Abschnitt Domains auf „Subdomains“.
  3. Erstellen Sie eine neue Subdomain : Geben Sie den gewünschten Namen für Ihre Subdomain ein und geben Sie das Stammverzeichnis des Dokuments an. Wenn Sie die Standardeinstellungen belassen, erstellt cPanel unter public_html ein neues Verzeichnis mit dem Namen Ihrer Subdomain.

Laden Sie die Build-Dateien hoch

Wenn der Produktions-Build fertig ist, können Sie ihn nun auf Ihren Server hochladen.

  1. Greifen Sie auf den Dateimanager zu : Suchen Sie in cPanel den „Dateimanager“ im Abschnitt „Dateien“.
  2. Navigieren Sie zum gewünschten Verzeichnis : Wenn Sie eine Subdomain erstellt haben, navigieren Sie zum entsprechenden Verzeichnis (z. B. public_html/react ). Wenn Sie die Bereitstellung in der Hauptdomäne durchführen, verwenden Sie das Verzeichnis public_html .
  3. Laden Sie den Build-Ordner hoch :
    • Komprimieren Sie zunächst den build Ordner auf Ihrem lokalen Computer in eine ZIP-Datei.
    • Über die Schaltfläche „Hochladen“ im Dateimanager laden Sie diese ZIP-Datei in das gewünschte Verzeichnis hoch.
    • Klicken Sie nach dem Hochladen mit der rechten Maustaste auf die Datei und wählen Sie „Extrahieren“, um den Inhalt zu dekomprimieren

Schritt 3: Servereinstellungen konfigurieren

Nach dem Hochladen der Build-Dateien müssen Sie möglicherweise einige Servereinstellungen konfigurieren, insbesondere wenn Ihre React-App clientseitiges Routing mit React Router verwendet.

.htaccess einrichten (optional)

Wenn Ihre App React Router verwendet, der auf der HTML5 pushState -Verlaufs-API basiert, muss Ihr Server für die korrekte Verarbeitung von Anfragen konfiguriert werden. Dies ist besonders wichtig, wenn Benutzer direkt zu anderen Routen als der Startseite navigieren können.

  1. Suchen oder erstellen Sie .htaccess :
    • Überprüfen Sie in Ihrem public_html oder Subdomain-Verzeichnis, ob eine .htaccess Datei vorhanden ist.
    • Wenn nicht, erstellen Sie eine neue Datei mit dem Namen .htaccess .
  2. Routing-Regeln hinzufügen :
    • Öffnen Sie die .htaccess Datei und fügen Sie die folgende Konfiguration hinzu:bashCopy code Options -MultiViews RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^ index.html [QSA,L]
    Diese Konfiguration stellt sicher, dass alle Anfragen über die Datei index.html weitergeleitet werden, was für Single-Page-Anwendungen, wie sie mit React erstellt wurden, unerlässlich ist.

Schritt 4: Finalisieren und Testen

Nachdem alles hochgeladen und konfiguriert ist, besteht der nächste Schritt darin, Ihre Bereitstellung abzuschließen und sicherzustellen, dass alles wie erwartet funktioniert.

Überprüfen Sie die Dateiberechtigungen

Stellen Sie sicher, dass die Dateien und Verzeichnisse über die richtigen Berechtigungen verfügen, damit der Webserver darauf zugreifen kann. Im Allgemeinen sollten die Berechtigungen für Verzeichnisse auf 755 und für Dateien auf 644 festgelegt sein.

Testen Sie die Bereitstellung

Besuchen Sie Ihre Domain oder Subdomain (z. B. react.yourdomain.com ) in einem Webbrowser, um zu überprüfen, ob Ihre React-App reibungslos funktioniert. Überprüfen Sie alle Seiten und Funktionen, um sicherzustellen, dass alles ordnungsgemäß funktioniert.

Wenn Sie auf Probleme stoßen, können die Entwicklertools des Browsers bei der Problemdiagnose hilfreich sein. Darüber hinaus können die Fehlerprotokolle von cPanel Einblicke in serverseitige Probleme liefern.

Fehlerbehebung

Die Bereitstellung einer React-App auf cPanel kann gelegentlich zu Problemen führen. Hier sind einige häufige Probleme und ihre Lösungen:

  • Routing-Fehler : Wenn das Navigieren zu verschiedenen Seiten Ihrer App zu 404-Fehlern führt, stellen Sie sicher, dass Ihre .htaccess Datei für die Verarbeitung des clientseitigen Routings korrekt konfiguriert ist.
  • Fehler „Datei nicht gefunden“ : Überprüfen Sie noch einmal, ob alle Dateien aus dem build Ordner korrekt hochgeladen wurden und sich im richtigen Verzeichnis auf Ihrem Server befinden.
  • Falsche Dateiberechtigungen : Wenn Dateien nicht geladen werden, überprüfen Sie, ob die Dateiberechtigungen richtig eingestellt sind ( 755 für Verzeichnisse und 644 für Dateien).
  • Caching-Probleme : Manchmal werden Änderungen aufgrund des Cachings möglicherweise nicht sofort angezeigt. Leeren Sie Ihren Browser-Cache oder versuchen Sie, im Inkognito-Modus auf die Website zuzugreifen, um zu sehen, ob das Problem weiterhin besteht.

Abschluss

Die Bereitstellung einer React.js-Anwendung auf einem von cPanel gehosteten Server scheint zunächst eine Herausforderung zu sein, insbesondere wenn Sie an automatisiertere Bereitstellungsprozesse mit Diensten wie Vercel oder Netlify gewöhnt sind oder unseren Artikel lesen: Die 10 besten Node.js-Hosting-Anbieter des Jahres 2024 ( Günstig und kostenlos). Wenn Sie jedoch die in dieser Anleitung beschriebenen Schritte befolgen, können Sie Ihre React-App erfolgreich auf cPanel zum Laufen bringen.

Dieser Prozess umfasst die Vorbereitung Ihrer React-App für die Produktion, die Einrichtung Ihrer cPanel-Umgebung, die Konfiguration der erforderlichen Servereinstellungen und die Fehlerbehebung bei auftretenden Problemen. Nach Abschluss ist Ihre React.js-Anwendung live und über Ihre Domain oder Subdomain für die ganze Welt zugänglich.

Wenn Sie mehr Erfahrung sammeln, können Sie sich mit fortgeschritteneren Themen wie der Integration von Backend-Diensten, dem Einrichten von Pipelines für die kontinuierliche Bereitstellung oder der weiteren Optimierung der Leistung befassen. Viel Spaß beim Teilen Ihrer React-Projekte mit der Welt!