Grundlegende Verwendung von Nginx und Bereitstellung von Front-End-Projekten

Vorwort

Ich habe kürzlich etwas über Nginx erfahren und einen Blog zusammengestellt. Die Hauptreferenz ist Kuangshenshuos Video-Tutorial auf Website b. Der Link zum Artikel lautet wie folgt:Crazy Godshuo Nginx Quick Start a>


1. Laden Sie Nginx herunter und starten Sie es

1. Laden Sie Nginx herunter

Gehen Sie zuNginx offiziell und wählen Sie die stabile Version aus, die für Ihren Computer zum Herunterladen geeignet ist. Ich habe die Windows-Version heruntergeladen.
Fügen Sie hier eine Bildbeschreibung ein
Nach dem Herunterladen liegt ein komprimiertes Paket vor. Sie müssen einen Ordner zum Speichern des dekomprimierten Nginx-Inhalts erstellen (Hinweis: Es ist am besten, kein Chinesisch in dem Ordner zu enthalten, in dem Nginx gespeichert ist, da sonst ein Fehler gemeldet wird). Der dekomprimierte Inhalt lautet wie folgt:
Fügen Sie hier eine Bildbeschreibung ein

Was wir in Zukunft häufig verwenden, ist die Konfigurationsdatei conf.

2. Starten Sie Nginx

Win+R, cmd ausführen, in das Verzeichnis wechseln, in dem Nginx dekomprimiert wird:
Fügen Sie hier eine Bildbeschreibung ein
Sie können die Datei nginx.conf im Verzeichnis conf anzeigen.
Fügen Sie hier eine Bildbeschreibung ein
Öffnen Sie es mit Notepad. Sie können sehen, dass der Standardport Port 80 ist und der Standardzugriffsdomänenname localhost ist. Das heißt, solange Sie in Zukunft auf Port 80 zugreifen, wird dieser von Nginx abgefangen.
Fügen Sie hier eine Bildbeschreibung ein
Öffnen Sie als Nächstes den Browser, geben Sie http://localhost:80 ein und drücken Sie die Eingabetaste. Wenn der folgende Inhalt angezeigt wird, wurde Nginx erfolgreich gestartet!
Fügen Sie hier eine Bildbeschreibung ein
Sie können auch im Task-Manager sehen, dass Nginx ausgeführt wird.
Fügen Sie hier eine Bildbeschreibung ein

3. Häufig verwendete Befehle

强制停止nginx:nginx -s stop
安全退出nginx:nginx -s quit
重新加载配置文件:nginx -s reload (如果修改了配置文件就执行这行命令,否则修改就是无效的。前提:nginx服务是启动的状态,否则reload是不成功的。)

2. Analyse der Konfigurationsdatei nginx.conf

Das oberste ist die globale Konfiguration; Ereignisse sind die maximale Anzahl von Verbindungen; es gibt einige kleine Module in http, wie z. B. die statische Ressourcendateikonfiguration, in der mehrere Server konfiguriert werden können, und der Server kann verschiedene Dienste, wie z. B. den Standort, konfigurieren , wie zum Beispiel die Load-Balancing-Konfiguration im Upstream.
Fügen Sie hier eine Bildbeschreibung ein

1. Konfigurieren Sie den Reverse-Proxy

Beispiel: Ändern Sie die Konfigurationsdatei nginx.conf und konfigurieren Sie Proxy_pass am Speicherort so, dass er auf die offizielle YSL-Website verweist.

// 这行代码就说明请求会代理到 https://www.yslbeautycn.com
proxy_pass  https://www.yslbeautycn.com 

Fügen Sie hier eine Bildbeschreibung ein

Hinweis:
Auf „proxy_pass“ folgt ein Leerzeichen.
Nach dem Schreiben eines Konfigurationselements muss es mit einem Semikolon enden.

Nachdem Sie die Konfigurationsdatei nginx.conf geändert haben, führen Sienginx -s reload
aus, geben Sie http://localhost:80 in den Browser ein und drücken Sie die Eingabetaste. Sie werden feststellen, dass die offizielle YSL-Website angezeigt wird.
Fügen Sie hier eine Bildbeschreibung ein

2. Load-Balancing vorgelagert

In einer Reihe von Servern kann Nginx Client-Anfragen „gleichmäßig“ auf diese Server verteilen. Dies ist Lastausgleich.

Szenario: Wenn es viele Anfragen gibt und ein Server zu ausgelastet ist, müssen mehrere Server zusammenarbeiten. Wenn wir einen 100G-Server, einen 64G-Server und einen 16G-Server haben, hoffen wir, mehr Anfragen an den 100G-Server und weniger Anfragen an den 16G-Server zu erreichen. Dies ist die Funktion des Lastausgleichs.

Häufig verwendete Methoden:

  • Polling
    „Polling“ verteilt die Anfragen des Clients in einer Schleife an verschiedene Backend-Server. Beim Polling kann es zu Problemen mit einer unangemessenen Ressourcenzuweisung kommen.
    Fügen Sie hier eine Bildbeschreibung ein
    Angenommen, es gibt drei Server, können Sie den Upstream-Block in der Datei nginx.conf verwenden, um diese drei Server zu definieren; dann konfigurieren Sie die Proxy_pass-Direktive am Speicherort so, dass sie auf den Upstream-Namen verweist. Es ist wie folgt geschrieben:
    Fügen Sie hier eine Bildbeschreibung ein

  • Gewichtete Abfrage
    wird in Clustern mit unterschiedlicher Serverleistung verwendet, um die Ressourcenzuteilung sinnvoller zu gestalten.
    Fügen Sie hier eine Bildbeschreibung ein
    Je besser die Serverleistung, desto höher die Gewichtung; je schlechter die Leistung, desto geringer die Gewichtung. (权重weight)
    Wie in der Abbildung oben gezeigt: Wenn viele Anfragen vorliegen, wird eine große Anzahl von Anfragen mit einer Gewichtung von 4 an den dritten Server weitergeleitet , nur ein Teil davon Die Anforderung wird nur mit einer Gewichtung von 1 an den Server gesendet, wodurch sichergestellt wird, dass der Server nicht überlastet wird. Je höher das Gewicht, desto mehr Anfragen gibt es; so kann die Serverleistung maximiert werden. Selbst ein kleiner Server kann zur Nutzung online gestellt werden, was Kosten spart.
    Sie können über das Gewicht unterschiedliche Gewichte des Servers festlegen. Die Schreibmethode ist wie folgt:
    Fügen Sie hier eine Bildbeschreibung ein
    优点:分布式处理,提升网络的灵活性、稳定性,使得服务器性能最大化。

3. Stellen Sie Front-End-Projekte auf Nginx bereit

Das Vue-Projekt muss gepackt werden. Führen Sie einfach npm run build für das gepackte Projekt aus. Nach Abschluss der Verpackung befindet sich im Projekt ein zusätzliches dist-Verzeichnis. Mein Projekt hier heißt Demo.
Wir kopieren den Inhalt des dist-Verzeichnisses unter dem Demoprojekt und fügen ihn in das HTML-Verzeichnis unter dem Nginx-Verzeichnis ein und löschen den Inhalt des ursprünglichen HTML unter Nginx.
Fügen Sie hier eine Bildbeschreibung ein
Der Effekt ist wie folgt:
Fügen Sie hier eine Bildbeschreibung ein
Die Konfigurationsdatei ist immer noch der Standardport 80 und localhost wird geöffnet. Ausführen: Starten Sie Nginx. Sie können sehen, dass das Vue-Projekt erfolgreich ausgeführt wird.
Fügen Sie hier eine Bildbeschreibung ein


Zusammenfassen

Das Obige ist der Nginx-bezogene Inhalt, den ich teilen möchte.

Supongo que te gusta

Origin blog.csdn.net/m0_52043522/article/details/130701034
Recomendado
Clasificación