本文利用Nginx實作簡單動靜分離，本文使用Nginx和一個SpringBoot簡單Web應用實作。
1.準備工作。
結合本文場景，需要安裝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
@Controller
public 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;
}
}
} 5.測試
啟動SpringBoot應用，啟動Nginx。
在浏覽器通路
http://localhost:10000/，可以看到如下圖所示。
通過圖中紅框内容都可以看出來引用靜态資源成功了。
6.總結
最近一直在看有關nginx的東西，最近一段時間會持續更新相關nginx的文章，如果大家感興趣可以持續關注。
![JavaScript的那些坑之事件代理事件代理事件階段[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)