create-react-app npm Ausführungsbefehl ausführen
Ich habe eine kleine React-Anwendung mit create-react-app erstellt, die nach der Ausführung von npm start vom lokalen Server ausgeführt wird. OK bis jetzt.
Wenn ich npm run build ausführe, scheint der Prozess korrekt ausgeführt zu werden (erstellt einen Build-Ordner, der die gebündelte js-Datei und die index.html-Datei enthält), aber wenn ich index.html in meinem Browser öffne, rendern sie nichts . Was vermisse ich?
Beiseite: Ich habe auch versucht, es auf einen entfernten Server hochzuladen, und als ich zu der URL gegangen bin, kam der Browser mit ...
zurückVerboten: Sie haben keine Zugriffsrechte auf / auf diesem Server.
... wenn jemand eine Idee hat, wie ich das lösen könnte, würde ich es auch zu schätzen wissen.
3 Antworten
Wenn ich npm run build ausführe, scheint der Prozess korrekt ausgeführt zu werden (erzeugt einen Build-Ordner, der die gebündelte js-Datei und die html.index-Datei enthält), aber wenn ich index.html in meinem Browser öffne, rendern sie nichts . Was vermisse ich?
Wenn Sie npm run build ausführen, werden die entsprechenden Anweisungen gedruckt:
Sie können index.html nicht einfach öffnen, weil mit einem statischen Dateiserver geliefert werden soll.
Dies liegt daran, dass die meisten React-Apps clientseitiges Routing verwenden und dies nicht mit file:// URLs möglich ist.
In der Produktion können Sie Nginx, Apache, Node (z. B. Express) oder einen beliebigen anderen Server zum Bereitstellen von statischen Assets verwenden. Stellen Sie nur sicher, dass Sie, wenn Sie clientseitiges Routing verwenden, index.html für eine unbekannte Anforderung wie /* und nicht nur für / bereitstellen.
In der Entwicklung können Sie hierfür pushstate-server verwenden. Es funktioniert gut mit dem clientseitigen Routing. Dies ist genau das, was die gedruckten Anweisungen Ihnen vorschlagen.
Ich habe auch versucht, es auf einen Remote-Server hochzuladen, und als ich zur URL ging, kam der Browser mit Verboten zurück: Sie sind nicht berechtigt, auf diesen Server zuzugreifen.
Sie müssen den Inhalt des Ordners build hochladen, nicht den Ordner build selbst. Andernfalls kann der Server Ihre index.html nicht finden, da sie sich in build/index.html befindet und somit fehlschlägt. Wenn Ihr Server keine index.html der obersten Ebene erkennt, lesen Sie die Dokumentation Ihres Servers zum Konfigurieren von standardmäßig bereitgestellten Dateien.
Hier können Sie dieses Problem auf zwei verschiedene Arten lösen.
1. Ändern Sie den Routing-Verlauf zu "hashHistory" anstelle von browserHistory anstelle von
%Vor%Erstellen Sie nun die App mit dem Befehl
%Vor%Platziere den Build-Ordner dann in deinem var / www / -Ordner. Jetzt funktioniert die Anwendung gut mit dem Hinzufügen von # Tag in jeder URL. wie
localhost / # / home localhost / # / aboutus
Lösung 2: Ohne # Tag mit browserHistory,
Setze deinen Verlauf = {browserHistory} in deinem Router, baue ihn nun mit sudo npm run build.
Sie müssen die Datei "conf" erstellen, um die Seite 404 not found zu finden. Die Datei conf sollte so aussehen.
Öffnen Sie Ihr Terminal tippen Sie die folgenden Befehle
cd / etc / apache2 / sites-available ls Nano sample.conf Fügen Sie den folgenden Inhalt hinzu.
%Vor%Jetzt müssen Sie die Datei sample.conf mit dem folgenden Befehl aktivieren
%Vor%Dann werden Sie aufgefordert, den Apache-Server neu zu laden sudo service apache2 neu laden oder neustarten
öffne dann deinen localhost / build-Ordner und füge die .htaccess-Datei mit folgendem Inhalt hinzu:
%Vor%Jetzt funktioniert die App normal.
Hinweis: Ändern Sie 0.0.0.0 IP zu Ihrer lokalen IP-Adresse.
Ich hoffe, es ist hilfreich für andere.
Ich habe versucht, den gleichen Befehl auszuführen und reagiere App zeigte auch weißen Bildschirm. Haupt-js-Datei nahm den relativen Pfad zu der Datei und zeigt Fehler, wenn ich js-Datei im neuen Browser öffnen "Ihre Datei wurde nicht gefunden" Ich mache es zum absoluten Pfad und es funktioniert gut.
Tags und Links build npm reactjs create-react-app