So stellen Sie ein Reaktionsprojekt in Nginx bereit

Testelement React-Demo

Klonen Sie Ihr React-Demo-Projekt auf den Server (standardmäßig wird Github zur Verwaltung unserer Projekte verwendet)

Bei Bedarf installieren Sie bitte die Projektumgebung, z. B. node.js, Yarn Line usw.

Geben Sie das Projektverzeichnis ein, führen Sie npm run build aus und beginnen Sie mit der Erstellung des Projekts.

Nach einem erfolgreichen Build wird ein dist-Ordner generiert (abhängig von Ihrer Projektkonfiguration) und die statischen Dateien in diesem Ordner werden zu Zugriffsdateien unseres Projektes.

Um Nginx und den Linux-Server zu konfigurieren, geben Sie Folgendes ein: /etc/nginx/sites-enabled, erstellen Sie dann als Administrator eine neue Konfigurationsdatei für Ihr Reaktionsprojekt wie „react-demo.conf“ und bearbeiten Sie dann die Datei:

Server {

listen8080

# server _ name your .com;

indexindex.htmlindex.htm;

location/

try _ files $ uri index .html;

}

location^~/assets/{

gzip _ staticon

expiresmax

add _ header cache-control public;

}

error _ page 50050250350 4/500. html;

client _ max _ body _ size20M

keepalive _ timeout10

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

Access-Projekt, http://IP:8080/

Hinweise:

1 Wenn Sie einen Domainnamen konfigurieren, benötigen Sie 80 Ports. Nach Erfolg müssen Sie nur noch auf den Domänennamen zugreifen, um auf das Projekt zuzugreifen

2 Wenn Sie den Browser-Story-Modus des React Routers verwenden, fügen Sie bitte die folgende Konfiguration zur Nginx-Konfiguration hinzu:

location/

try_files $ uri $ uri //index

} Prinzip, da unser Projekt nur einen Root-Eintrag hat und Sie diese Seite nicht finden können, wenn Sie eine URL wie /home eingeben. Dies liegt daran, dass Nginx versucht, index.html zu laden. Nach dem Laden von index.html funktioniert React-Router mit der von uns eingegebenen /home-Route und zeigt somit die richtige Homepage an. Wenn das Projekt im Browser-Story-Modus den oben genannten Inhalt nicht konfiguriert, tritt ein 404 auf.

Das obige ist der detaillierte Inhalt vonSo stellen Sie ein Reaktionsprojekt in Nginx bereit. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!