Nginx-Beispielcode zur Implementierung dynamischer und statischer Trennung

Nginx-Beispielcode zur Implementierung dynamischer und statischer Trennung

In Kombination mit dem Szenario in diesem Artikel müssen Sie eine Nginx- und Java-Umgebung installieren (um das SpringBoot-Projekt auszuführen).

1.1 Informationen zur Installation von Nginx unter Linux finden Sie in meinem Artikel --- (Portal).

1.2 In diesem Artikel verwendet SpringBoot die Thymeleaf-Vorlage und die Projektportnummer ist 8888.

1.3 jquery.js wird in der lokalen Datei /Users/dalaoyang/Downloads/static gespeichert

2. Was ist die Trennung von Bewegung und Stillstand?

Bevor wir die Trennung von Bewegung und Stillstand verstehen können, müssen wir zunächst verstehen, was Bewegung und was Stillstand ist.

In der Webentwicklung beziehen sich dynamische Ressourcen im Allgemeinen auf Hintergrundressourcen, während sich statische Ressourcen auf HTML-, JavaScript-, CSS-, img- und andere Dateien beziehen.

Im Allgemeinen müssen dynamische und statische Ressourcen getrennt werden, und statische Ressourcen müssen auf Nginx bereitgestellt werden. Wenn eine Anforderung eingeht und es sich um eine Anforderung für statische Ressourcen handelt, werden die Ressourcen direkt aus dem von Nginx konfigurierten Verzeichnis für statische Ressourcen abgerufen. Wenn es sich um eine Anforderung für dynamische Ressourcen handelt, verwendet Nginx das Prinzip des Reverse-Proxys, um die Anforderung zur Verarbeitung an die Hintergrundanwendung weiterzuleiten, wodurch eine dynamische und statische Trennung erreicht wird.

Durch die Trennung von Front-End und Back-End kann die Zugriffsgeschwindigkeit statischer Ressourcen erheblich verbessert werden. Gleichzeitig kann während des Entwicklungsprozesses die Front-End- und Back-End-Entwicklung parallel durchgeführt werden, was die Entwicklungszeit effektiv verbessern und die gemeinsame Debugging-Zeit verkürzen kann.

3. Projektkonfiguration

Ändern Sie die Startklasse der SpringBoot-Anwendung und führen Sie einen einfachen Sprung aus, sodass der Stammpfad für den Zugriff zu index.html springen kann, wie im folgenden Code gezeigt.

@SpringBootAnwendung
@Regler
öffentliche Klasse DemoApplication {

	öffentliche statische void main(String[] args) {
		SpringApplication.run(DemoApplication.class, args);
	}

	@GetMapping("/")
	öffentlicher Stringindex(){
		gib "Index" zurück;
	}
}

Der Code von index.html lautet wie folgt. Beachten Sie, dass jquery.js eingeführt wird. Nachdem die Referenz erfolgreich ist, wird jquery verwendet, um div Werte zuzuweisen. Der Code lautet wie folgt.

<!DOCTYPE html>
<!--Fehler beheben-->
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<Kopf>
 <meta charset="UTF-8">
 <title>Thymianblatt</title>
</Kopf>
<script type="text/javascript" src="jquery.js"></script>
<Text>
<h1>Dies ist eine statische Seite</h1>
<div id="test_div"></div>
</body>

<Skripttyp="text/javascript">
 $('#test_div').html('jquery.js erfolgreich referenziert');
</Skript>

</html>

Die Projektstruktur wird unten angezeigt. Sie können sehen, dass es kein jquery.js gibt. Wir müssen lediglich Nginx verwenden, um auf jquery.js zuzugreifen.

4. Nginx-Konfiguration

Ändern Sie die nginx.conf-Konfiguration, wobei der erste Speicherort für die Verarbeitung von Hintergrundanforderungen und der zweite für die Verarbeitung statischer Ressourcen verantwortlich ist, wie unten gezeigt.

Arbeiterprozesse 1;

Ereignisse {
 Arbeiterverbindungen 1024;
}

http {

 Server {
  hör zu, 10000;
  Servername localhost;
  
  #Hintergrundanforderungsstandort abfangen / {
  Proxy-Passwort http://localhost:8888;
  Proxy_Set_Header X-Real-IP $Remote_Addr;
  }

  #Standort statischer Ressourcen abfangen ~ .*\.(html|htm|gif|jpg|jpeg|bmp|png|ico|js|css)$ {
  root /Benutzer/dalaoyang/Downloads/static;
  }

 }

}

5. Testen

Starten Sie die SpringBoot-Anwendung und starten Sie Nginx.

Besuchen Sie http://localhost:10000/ in Ihrem Browser und Sie sehen die folgende Abbildung.

Der Inhalt des roten Felds in der Abbildung zeigt, dass die statische Ressource erfolgreich referenziert wurde.

6. Zusammenfassung

Ich habe kürzlich etwas über nginx gelesen. Ich werde in naher Zukunft weitere Artikel zu nginx aktualisieren. Wenn Sie interessiert sind, bleiben Sie bitte weiterhin aufmerksam.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:
  • Grundlegendes Konfigurationsbeispiel von Nginx mit Apache oder Tomcat zur dynamischen und statischen Trennung
  • Verwenden von Nginx+uWsgi zum Trennen der dynamischen und statischen Teile der Django-Framework-Site von Python
  • Einfache Implementierung des Nginx+Tomcat-Reverse-Proxys und der dynamischen und statischen Trennung
  • Detaillierte Erklärung von Nginx zum Trennen von statischem und dynamischem Tomcat
  • nginx realisiert Lastausgleich und dynamische und statische Trennung
  • Detailliertes Beispiel für die Bereitstellung der dynamischen und statischen Trennung von Nginx+Apache
  • Beispielcode für Nginx zur Erreichung dynamischer und statischer Trennung
  • Nginx implementiert dynamische und statische Trennung Beispielerklärung
  • Implementierungsfallcodeanalyse für dynamische und statische Trennung von Nginx
  • Detaillierte Erläuterung des Prozesses zur Realisierung der dynamischen und statischen Trennung in Springmvc nginx
  • Docker Nginx-Container und Tomcat-Container zur Realisierung von Lastausgleich und dynamischen und statischen Trennungsvorgängen
  • Analyse des Prinzips von Nginx + Tomcat zur Erreichung eines Lastausgleichs sowie einer dynamischen und statischen Trennung
  • Das Prinzip und die Konfiguration des Nginx-Lastausgleichs sowie der dynamischen und statischen Trennung
  • Beispiel, wie nginx dynamische und statische Trennung implementiert
  • Detaillierte Anleitung für nginx von der Installation bis zur Konfiguration (Installation, Sicherheitskonfiguration, Anti-Hotlinking, dynamische und statische Trennung, HTTPS-Konfiguration, Leistungsoptimierung)
  • Implementierung des Nginx+Tomcat-Lastausgleichs und der dynamischen und statischen Clustertrennung
  • Server-Lastausgleich von Nginx + Tomcat zur Erzielung einer dynamischen und statischen Trennung
  • Implementierung und Beschreibung der dynamischen und statischen Trennungskonfiguration von Nginx

<<:  Das Umschalten zwischen React-Antd-Tabs führt zu wiederholter Aktualisierung von Unterkomponenten

>>:  Was tun, wenn Sie bei der Installation von MySQL auf einem Mac das ursprüngliche Kennwort vergessen?

Artikel empfehlen

Zwei Lösungen für das Problem, dass MySQL in bedingten Anweisungen nur eine Information liest

Heute ist mein Kollege beim Schreiben von MySQL-A...

So setzen Sie das Zabbix-Passwort zurück (ein Schritt)

Problembeschreibung Da wir uns nicht lange bei Za...

jQuery-Plugin zur Implementierung des Minesweeper-Spiels (3)

In diesem Artikel wird der dritte Artikel zur Ver...

Beispielcode zur Implementierung eines reinen CSS-Popup-Menüs mit Transform

Vorwort Wenn Sie ein Topmenü erstellen, müssen Si...

Detaillierte Erklärung des Vue-Elements plus Mehrsprachenumschaltung

Inhaltsverzeichnis Vorwort Wie wechselt man zwisc...

Vue Front-End HbuliderEslint Echtzeitüberprüfung Automatische Reparatureinstellungen

Inhaltsverzeichnis Installation des ESLint-Plugin...

Erstellen, Hochladen, Abrufen und Bereitstellen von Docker-Images (mithilfe von Alibaba Cloud)

Da ich während des Lernvorgangs festgestellt habe...

Lösen Sie schnell das Problem der weißen Lücke (Flash-Bildschirm), wenn CSS @keyframes verwendet, um Bilder für den ersten Zyklus zu laden

Problemerklärung: Wenn Sie die CSS-Eigenschaft „a...

Detaillierte Erläuterung der Datentypprobleme bei der JS-Array-Indexerkennung

Als ich ein WeChat-Applet-Projekt schrieb, gab es...

Praxis der Vue Global Custom-Anweisung Modal Drag

Inhaltsverzeichnis Hintergrund Umsetzungsideen Er...

JS implementiert den Beispielcode der Dezimalkonvertierung in Hexadezimal

Vorwort Beim Schreiben von Code stoßen wir gelege...

Methode zum Erkennen, ob IP und Port verbindbar sind

Windows cmd Telnet Format: Telnet-IP-Port Fall: T...

Windows Server 2008-Tutorial zur Überwachung der Serverleistung

Als Nächstes erfahren Sie, wie Sie die Serverleis...

Detailliertes Tutorial zur Installation der MySQL v5.7.18-Dekomprimierungsversion

Laden Sie MySQL herunter https://dev.mysql.com/do...

So verwenden Sie Indizes zur Optimierung von MySQL ORDER BY-Anweisungen

Tabelle erstellen und Index erstellen Tabelle tbl...