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:
|
Artikel empfehlen
Detaillierte Erläuterung der Vorgehensweise bei der Installation des Permeate-Range-Systems mit VMware
1. Hintergrund Wir führen von Zeit zu Zeit intern...
Vue3 implementiert CSS unendlichen nahtlosen Scrolleffekt
In diesem Artikelbeispiel wird der spezifische Co...
So verwenden Sie Xtrabackup zum Sichern und Wiederherstellen von MySQL
Inhaltsverzeichnis 1. Sicherung 1.1 Vollständig v...
Installieren Sie Percona Server+MySQL auf CentOS 7
1. Umgebungsbeschreibung (1) CentOS-7-x86_64, Ker...
Detaillierte Erläuterung der MySQL SQL99-Syntax für Inner Join und Non-Equivalent Join
#Case: Gehaltsstufen von Mitarbeitern abfragen WÄ...
Implementierung von Linux-Dateisystemvorgängen
In dieser Lesenotiz werden hauptsächlich die Vorg...
So verwenden Sie den temporären MySQL 5.7-Tablespace, um Fallstricke zu vermeiden
Einführung MySQL 5.7 soll der sicherste MySQL-Ser...
Installationsanleitung für MySQL 5.7.19 unter Windows 10 So ändern Sie das Root-Passwort von MySQL, nachdem Sie es vergessen haben
Nehmen Sie als Beispiel die Installation von MySQ...
Detaillierte Erläuterung des Prinzips der Vue-Überwachungsdaten
<Text> <div id="Wurzel"> &l...
So implementieren Sie Vue Page Jump
1. dies.$router.push() 1. Ansicht <Vorlage>...
WeChat-Applet-Picker - Mehrspalten-Selektor (Modus = MultiSelector)
Inhaltsverzeichnis 1. Wirkungsdiagramm (mehrere S...
Darstellung des Vorgangs zur Verwendung von FileZilla zur Verbindung mit dem FTP-Server
Als ich begann, einen FTP-Server auf dem Server e...
Grafische Erläuterung der Lösungen zur Frontend-Verarbeitung kleiner Symbole
Vorwort Bevor wir mit diesem Artikel beginnen, be...
Grafisches Tutorial zur Installation des MySQL 5.7.21 Installers unter Windows 10
Installieren Sie MySQL und machen Sie sich Notize...
Detaillierte Erklärung zur Verwendung der Funktion find_in_set() in MySQL
Betrachten wir zunächst ein Beispiel: In der Arti...