結合本文場景，需要安裝Nginx和Java環境（運行SpringBoot項目）。
1.1 關于Linux系統安裝Nginx可以參考我的文章---(傳送門)。
1.2 本文SpringBoot使用了Thymeleaf模板，項目端口號為8888。
1.3 在本地/Users/dalaoyang/Downloads/static文件內存放了jquery.js
2.什么是動靜分離？
在弄清動靜分離之前，我們要先明白什么是動，什么是靜。
在Web開發中，通常來說，動態資源其實就是指那些后臺資源，而靜態資源就是指HTML，JavaScript，CSS，img等文件。
一般來說，都需要將動態資源和靜態資源分開，將靜態資源部署在Nginx上，當一個請求來的時候，如果是靜態資源的請求，就直接到nginx配置的靜態資源目錄下面獲取資源，如果是動態資源的請求，nginx利用反向代理的原理，把請求轉發給后臺應用去處理，從而實現動靜分離。
在使用前后端分離之后，可以很大程度的提升靜態資源的訪問速度，同時在開過程中也可以讓前后端開發并行可以有效的提高開發時間，也可以有些的減少聯調時間 。
3.項目配置
修改SpringBoot應用啟動類，做簡單跳轉，使訪問根路徑可以跳轉到index.html，如下代碼所示。
@SpringBootApplication@Controllerpublic class DemoApplication { public static void main(String[] args) { SpringApplication.run(DemoApplication.class, args); } @GetMapping("/") public String index(){ return "index"; }}index.html代碼如下所示，注意引入jquery.js，在引用成功會使用jquery給div賦值，代碼如下所示。
<!DOCTYPE html><!--解決th報錯 --><html lang="en" xmlns:th="http://www.w3.org/1999/xhtml"><head> <meta charset="UTF-8"> <title>thymeleaf</title></head><script type="text/javascript" src="jquery.js"></script><body><h1>這是一個靜態頁面</h1><div id="test_div"></div></body><script type="text/javascript"> $('#test_div').html('引用jquery.js成功');</script></html>項目結構如下所示，可以看到沒有jquery.js，我們要做的就是使用Nginx來訪問jquery.js。
4.Nginx配置
修改nginx.conf配置，其中第一個location負責處理后臺請求，第二個負責處理靜態資源，如下所示。
worker_processes 1;events { worker_connections 1024;}http { server { listen 10000; server_name localhost; #攔截后臺請求 location / { proxy_pass http://localhost:8888; proxy_set_header X-Real-IP $remote_addr; } #攔截靜態資源 location ~ .*/.(html|htm|gif|jpg|jpeg|bmp|png|ico|js|css)$ { root /Users/dalaoyang/Downloads/static; } }}
新聞熱點
疑難解答
