So konfigurieren Sie Nginx für React: Eine detaillierte Anleitung

React ist eine beliebte JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen. Bei der Entwicklung von React-Anwendungen ist es nicht ungewöhnlich, dass Sie einen Server konfigurieren müssen, der statische Dateien zurückgibt und das Anforderungsrouting verarbeitet. Für diese Zwecke ist Nginx ideal geeignet - einer der beliebtesten Webserver und Proxy-Server.

Das Einrichten von Nginx für React kann insbesondere für Anfänger schwierig sein. Wenn Sie jedoch die ausführliche Anleitung befolgen, können Sie Ihren Server schnell einrichten und die React-Anwendung im produzierten Modus ausführen.

In diesem Handbuch werden wir die grundlegenden Schritte zum Konfigurieren von Nginx für eine React-Anwendung untersuchen. Sie erfahren, wie Sie Nginx installieren, konfigurieren und das Anforderungsrouting konfigurieren, um eine mit React erstellte einseitige Anwendung zu unterstützen.

Installieren von Nginx für React

Um eine React-Anwendung auf einem Server mit Nginx bereitzustellen, müssen Sie Nginx installieren und für die Arbeit mit React konfigurieren.

Hier ist eine Schritt-für-Schritt-Anleitung zur Installation von Nginx:

Dies schließt den Nginx-Installationsprozess ab. Jetzt müssen Sie es für die Arbeit mit React konfigurieren.

Konfigurieren der Serverkonfiguration

Um Nginx für React zu konfigurieren, müssen Sie eine Nginx-Konfigurationsdatei erstellen und ändern.

1. Wechseln Sie in das Verzeichnis, in dem Nginx installiert ist, normalerweise /etc/nginx/.

2. Öffnen Sie die nginx-Datei.conf mit einem Texteditor.

3. Suchen Sie den Server <> -Block, der für die Verarbeitung von Anforderungen an den Webserver zuständig ist.

4. Fügen Sie im Server <> -Block die folgende Konfiguration hinzu:

server_name your_domain.com;

root /path/to/your/app/build;

Hier your_domain.com sollte durch Ihre echte Domäne ersetzt werden und /path/to/your/app/build durch den Build-Pfad Ihrer React-Anwendung.

5. Speichern Sie die Änderungen und schließen Sie die nginx-Datei.conf.

6. Starten Sie Nginx neu, um die neue Konfiguration anzuwenden.

Nachdem Sie diese Schritte ausgeführt haben, wird Ihr Nginx-Server so konfiguriert, dass er mit der React-Anwendung arbeitet.

Erstellen und Konfigurieren eines React-Projekts

Um mit React zu beginnen, müssen Sie ein neues Projekt erstellen. Folgen Sie den Anweisungen unten:

1. Installiere Node.js von der offiziellen Website nodejs.org .
2. Öffnen Sie eine Eingabeaufforderung oder ein Terminal und überprüfen Sie die Node-Installation.js mit Befehl:

node -v

npm install -g create-react-app

npx create-react-app my-app

cd my-app

npm start

Nachdem Sie diese Schritte ausgeführt haben, sehen Sie, wie Ihr neues React-Projekt im Standardbrowser funktioniert.

Um nun Nginx für Ihre React-Anwendung einzurichten, fahren Sie mit dem nächsten Abschnitt fort.

Konfigurieren der Abfrage-Proxys

Installieren Sie zunächst Nginx auf Ihrem Computer oder Server, falls es noch nicht installiert ist. Öffnen Sie dann die Nginx-Serverkonfigurationsdatei, die normalerweise als /etc/nginx/nginx.conf.

Innerhalb der Konfigurationsdatei müssen wir einen Abschnitt hinzufügen location, in dem die Proxyeinstellungen festgelegt werden:

location / 

Hier your-react-server-address bedeutet die Adresse Ihres React-Servers oder Hosts, auf dem er ausgeführt wird, und your-react-server-port - der Port, auf dem der React-Server ausgeführt wird.

Wenn der React-Server auf demselben Server wie Nginx ausgeführt wird, verwenden Sie den Wert localhost geben Sie für die Adresse und den entsprechenden Port an.

Nachdem Sie Änderungen an der Konfigurationsdatei vorgenommen haben, speichern Sie sie und starten Sie Nginx neu, um die Einstellungen anzuwenden:

$ sudo service nginx restart

Jetzt werden alle Anfragen, die an Ihren Nginx-Server gesendet werden, automatisch an Ihren React-Server weitergeleitet, um die React-Anwendung zu verarbeiten und anzuzeigen.

Beachten Sie, dass es ratsam ist, SSL-Verschlüsselung zu konfigurieren, wenn Ihre Anwendung eine sichere Verbindung benötigt, wenn Sie Anfragen proximieren. Dazu müssen Sie ein SSL-Zertifikat installieren und der Nginx-Konfigurationsdatei entsprechende Einstellungen hinzufügen.

Daher kann das Konfigurieren der Anforderungsproxktion in Nginx für React leicht mit ein paar einfachen Schritten durchgeführt werden. Sobald diese Konfiguration abgeschlossen ist, können Sie sicherstellen, dass Ihre React-Anwendung ordnungsgemäß weitergeleitet und ausgeführt wird.

Leistungsoptimierung

1. Ressourcenminimierung und -komprimierung: Eine der wichtigsten Möglichkeiten, die Leistung Ihrer Anwendung zu verbessern, besteht darin, Ressourcen wie HTML, CSS und JavaScript zu minimieren und zu komprimieren. Sie müssen spezielle Tools wie Code-Minifikatoren verwenden, um unnötige Leerzeichen, Kommentare und Zeilenumbrüche zu entfernen und Dateien zu komprimieren, damit sie schneller geladen werden können.

2. Caching: Mit dem Caching können Sie einige Daten auf der Clientseite speichern, um in Zukunft schneller darauf zugreifen zu können. Bei Anwendungen auf React können Sie die von React selbst bereitgestellten Caching-Methoden verwenden, z. B. das Memotieren von Komponenten und die Verwendung von useMemo- und useCallback-Hooks.

3. Lazy Loading: Wenn Ihre Anwendung eine große Anzahl von Komponenten oder Ressourcen enthält, können Sie das Lazy Loading verwenden, um nur die Komponenten oder Ressourcen zu laden, die derzeit wirklich benötigt werden. Dadurch werden die Ladezeiten verkürzt und die Leistung der Anwendung verbessert.

4. Render-Optimierung: Einer der wichtigsten Punkte zur Optimierung der Leistung einer React-Anwendung ist die Optimierung des Renderings von Komponenten. Sie können dazu Techniken wie das Memoirieren von Komponenten mithilfe von useMemo- und useCallback-Hooks und die Verwendung bestimmter React-Eigenschaften wie shouldComponentUpdate oder PureComponent verwenden, um unnötiges Rendern von Komponenten zu vermeiden.

5. Asynchrones Laden: Wenn Ihre Anwendung viele externe Ressourcen wie Bilder oder JavaScript-Dateien benötigt, können Sie das asynchrone Laden verwenden, um diese Ressourcen parallel zu laden. Dies verbessert die Download-Geschwindigkeit und die Gesamtleistung Ihrer Anwendung.

6. Optimieren von Serverabfragen: Wenn Ihre Anwendung über eine API mit dem Server kommuniziert, können Sie Anforderungen an den Server optimieren, um die Reaktionszeit zu verkürzen und die Leistung zu verbessern. Sie können beispielsweise React-Komponenten verwenden, um den Status von Abfragen zu verwalten, oder Sie können spezielle Tools wie Axios verwenden, um Abfragen effizienter zu bearbeiten.

Die Verbesserung der Leistung einer React-Anwendung erfordert eine ständige Überwachung und Optimierung. Die Verwendung der oben genannten Methoden hilft Ihnen, Ihre Anwendung schneller und reaktionsfähiger für die Benutzer zu machen.

Bereitstellen und Testen der Anwendung

Nachdem Sie den Nginx-Server für Ihre React-Anwendung konfiguriert haben, besteht der nächste Schritt darin, die Anwendung bereitzustellen und zu testen.

1. Entfaltung:

Stellen Sie sicher, dass Sie über einen Build Ihrer React-Anwendung verfügen, bevor Sie mit der Bereitstellung beginnen. Wenn Sie keinen Build haben, können Sie ihn erstellen, indem Sie den Befehl ausführen:

Nachdem Sie diesen Befehl erfolgreich ausgeführt haben, wird der Ordner "build" mit dem optimierten und bereitgestellten Code für Ihre Anwendung angezeigt.

Um eine Anwendung mit Nginx bereitzustellen, müssen Sie den Inhalt des Ordners "build" in ein bestimmtes Verzeichnis auf Ihrem Server verschieben. Sie können beispielsweise das folgende Verzeichnis verwenden:

Stellen Sie sicher, dass Sie Schreibberechtigungen für dieses Verzeichnis haben.

2. Testierung:

Nachdem Sie Ihre Anwendung bereitgestellt haben, sollten Sie sie testen, um sicherzustellen, dass alles ordnungsgemäß funktioniert.

Öffnen Sie einen Webbrowser und geben Sie die URL Ihrer App ein. Wenn Sie beispielsweise das Verzeichnis "/var/www/my-react-app" verwendet haben, lautet die URL wie folgt:

Stellen Sie sicher, dass Sie Ihre React-Anwendung sehen und dass alle Funktionen ordnungsgemäß funktionieren.

Wenn Sie Fehler oder Probleme feststellen, müssen Sie möglicherweise die Nginx-Konfiguration überprüfen und die Bereitstellung Ihrer Anwendung erneut überprüfen.

Jetzt, da Sie Ihre React-Anwendung erfolgreich mit Nginx bereitgestellt und getestet haben, sind Sie bereit, sie Ihren Benutzern zur Verfügung zu stellen!