Beispielmethode zum Bereitstellen eines React-Projekts auf Nginx

Testprojekt: react-demo

1. Klonen Sie Ihr React-Demo-Projekt auf den Server (standardmäßig wird Github zur Verwaltung unseres Projekts verwendet).
2. Installieren Sie bei Bedarf die Projektumgebung, z. B.: node.js, yarn usw.
3. Geben Sie das Projektverzeichnis ein und führen Sie npm run build aus, um mit dem Erstellen des Projekts zu beginnen
4. Nach erfolgreichem Build wird ein Dist-Ordner generiert (abhängig von Ihrer Projektkonfiguration). Die statischen Dateien in diesem Ordner sind die Zugriffsdateien unseres Projekts.
5. Um Nginx auf einem Linux-Server zu konfigurieren, gehen Sie zu: /etc/nginx/sites-enabled, erstellen Sie dann als Administrator eine neue Konfigurationsdatei für Ihr React-Projekt, etwa: react-demo.conf, und bearbeiten Sie dann die Datei:

Server {
  hören Sie 8080;
  # Servername Ihre.Domäne.com;
  Wurzel /home/Wurzel/react-demo/dist;
  Index Index.html Index.htm;
  Standort / {
    Versuchen Sie, Dateien $uri $uri/ /index.html zu versuchen.
  }
  Standort ^~ /assets/ {
    gzip_static ein;
    läuft maximal ab;
    add_header Cache-Control öffentlich;
  }
  Fehlerseite 500 502 503 504 /500.html;
  Maximale Client-Körpergröße: 20 M;
  KeepAlive-Timeout 10;
}

Führen Sie „sudo service nginx restart“ aus, um den Nginx-Dienst neu zu starten.

Greifen Sie auf das Projekt zu: http://IP:8080/

Notiz:

1. Wenn Sie den Domänennamen konfigurieren, ist Port 80 erforderlich. Nach erfolgreichem Abschluss können Sie auf das Projekt zugreifen, indem Sie einfach auf den Domänennamen zugreifen

2. Wenn Sie den BrowserHistory-Modus von React-Router verwenden, fügen Sie der Nginx-Konfiguration bitte die folgende Konfiguration hinzu:

Standort / {
  Versuchen Sie, Dateien $uri $uri/ /index.html zu versuchen.
}

Prinzipiell kann die Seite nicht gefunden werden, da unser Projekt nur einen Stammeintrag hat. Wenn Sie eine URL wie /home eingeben, wird sie nicht gefunden. In diesem Fall versucht nginx, index.html zu laden. Nach dem Laden von index.html funktioniert react-router und gleicht die von uns eingegebene /home-Route ab, wodurch die richtige Homepage angezeigt wird. Wenn das Projekt im BrowserHistory-Modus nicht mit dem obigen Inhalt konfiguriert ist, tritt ein 404-Fehler auf.

Bitte beachten Sie die React-Router-Dokumentation:

https://react-guide.github.io/react-router-cn/docs/guides/basics/Histories.html

Zusammenfassen

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, dass der Inhalt dieses Artikels einen gewissen Lernwert für Ihr Studium oder Ihre Arbeit hat. Vielen Dank für Ihre Unterstützung von 123WORDPRESS.COM. Wenn Sie mehr darüber erfahren möchten, schauen Sie sich bitte die folgenden Links an