Die Fallstricke bei der Bereitstellung von Angular-Projekten in Nginx

Die Fallstricke bei der Bereitstellung von Angular-Projekten in Nginx

Wenn man online nach Methoden sucht, um Angular -Projekte nach der Kompilierung auf Nginx bereitzustellen, beschreiben die meisten Artikel die Notwendigkeit, am location der Nginx -Konfigurationsdatei einen Sprung zur Startseite anzugeben, um das durch die Aktualisierung verursachte 404-Problem zu vermeiden. Der vollständige server lautet:

Server {
 hören Sie 80;
 Servername 192.168.190.131;

 #sendfile an;
 #Zeichensatz koi8-r;
 Zugriffsprotokoll /var/log/nginx/host.access.log Haupt;

 Standort / {
  Wurzel /chanchaw/app/angular;
  Index Index.html Index.html;
  Versuchen Sie, Dateien $uri $uri/ /index.html zu versuchen.
 }

 Fehlerseite 404 /index.html;

 Standort = /index.html {
  Wurzel /chanchaw/app/angular;
 }
}

Auf server_name oben folgt die IP-Adresse von CentOS7.3 . Achten Sie besonders auf den folgenden location : try_files $uri $uri/ /index.html . Dies soll 404-Fehler verhindern, die durch das Aktualisieren des Browsers verursacht werden. Jetzt kommt der Punkt. Nach der Bereitstellung auf Nginx weist der Browsertest die folgenden Probleme auf:

index.html und js befinden sich im selben Verzeichnis. Warum können sie nicht gefunden werden? chrome ist so, firefox ist auch so, okay, versuchen wir es mit IE.

lösen

Es stellte sich heraus, dass chrome und firefox bei Anfragen automatisch http in https konvertieren. CentOS war in einer virtuellen Maschine installiert, und ich hatte nie daran gedacht, ssl bereitzustellen. Da ie keine Protokolle konvertiert, gibt es beim Testen im ie kein Problem.

Das könnte Sie auch interessieren:
  • Zeichnen Sie den gesamten Prozess des Angular-Projekts auf, von der Erstellung über die Verpackung bis zur Nginx-Bereitstellung

<<:  Detaillierte Erklärung der NodeJS-Modularität

>>:  Beispiel zum Aktivieren langsamer Abfragen in MySQL

Artikel empfehlen

So betreten und verlassen Sie den Docker-Container

1 Starten Sie den Docker-Dienst Zuerst müssen Sie...

Importieren von CSS-Dateien unter Verwendung von Beurteilungsbedingungen

Lösung 1: Verwenden Sie bedingten Import im HTML-...

Detaillierte Erklärung zur Verwendung des Basis-Tags in HTML

In requireJS gibt es eine Eigenschaft namens base...

Detaillierte Untersuchung von vue2.x - Erklärung der h-Funktion

Inhaltsverzeichnis Lösung, Zusammenfassen: Vue-Pr...

Reparaturlösung für inkonsistenten MySQL GTID-Master und -Slave

Inhaltsverzeichnis Lösung 1: Replikate neu erstel...

Deutsch: Ein Link-Tag vervollständigt href im IE automatisch

Englisch: Ein Link-Tag vervollständigt href im IE...

Tutorial zum Upgrade von Centos7 auf Centos8 (mit Bildern und Text)

Wenn Sie ein Upgrade in einer formalen Umgebung d...

Vor- und Nachteile von Vite und Vue CLI

Es gibt im Vue-Ökosystem ein neues Build-Tool nam...

SQL-Implementierung von LeetCode (177. N-höchstes Gehalt)

[LeetCode] 177.N-höchstes Gehalt Schreiben Sie ei...

Detaillierte Erklärung der Rolle des Schlüssels in React

Inhaltsverzeichnis Frage: Wird die Farbe des Bere...

jQuery benutzerdefinierter Lupeneffekt

In diesem Artikelbeispiel wird der spezifische Co...

Zwei Möglichkeiten, damit IE6 Bilder im PNG-24-Format normal anzeigt

Methode 1: Bitte fügen Sie den folgenden Code nach...

5 Möglichkeiten zum Löschen oder Entfernen großer Dateiinhalte in Linux

Beim Arbeiten mit Dateien im Linux-Terminal möcht...