什么是動靜分離？

為了提高網站的響應速度，減輕程序服務器（Tomcat，Jboss等）的負載，對于靜態資源，如圖片、js、css等文件，可以在反向代理服務器中進行緩存，這樣瀏覽器在請求一個靜態資源時，代理服務器就可以直接處理，而不用將請求轉發給后端服務器。對于用戶請求的動態文件，如servlet、jsp，則轉發給Tomcat，Jboss服務器處理，這就是動靜分離。即動態文件與靜態文件的分離。

動靜分離可通過location對請求url進行匹配，將網站靜態資源（HTML，JavaScript，CSS，img等文件）與后臺應用分開部署，提高用戶訪問靜態代碼的速度，降低對后臺應用訪問。通常將靜態資源放到nginx中，動態資源轉發到tomcat服務器中。

靜態頁面

靜態頁面：是一個頁面對應一個內容，也就是一對一的關系，在互聯網架構中，頁面幾乎為不變的或者是頁面發生變化頻率較低的。比如：html 頁面，js/css 樣式文件等；
與其匹配的技術架構來加速。比如：Squid、Nginx、CDN，而靜態頁面最大的優點：速度快、跨平臺、跨服務器。
無論如何訪問都只是讓服務器傳數據給請求端，并不做腳本計算及讀取后臺數據庫，提高訪問速度及降低了部分安全隱患。
采用靜態頁面的方法：可將數據庫及后臺系統與前臺進行劃分，兩者間沒有絕對的聯系，從而提高站點安全。
靜態頁面的特點

每個網頁都有一個固定的 URL，且網頁URL以.htm、.html、.shtml等常見形式為后綴，而不含有 ？；
網頁內容發布到網站服務器上，無論是否有用戶訪問，每個靜態網頁的內容都將保存在網站服務器上，也就是說，保存在服務器上的文件，每個網頁都是一個獨立的文件；
內容相對穩定，容易被搜索引擎所檢索； 沒數據庫的支持，網站制作和維護方面工作量大，當網站信息量很大時，完全依靠靜態網頁制作方式較困難；
交互性較差，功能方面有較大的限制； 運行數據快；

動態頁面

動態頁面：是一對多訪問，通過一個頁面可以根據若干參數返回其不同的數據，在互聯網架構中，不同的用戶訪問不同的動態場景頁面請求，都可能是不一樣的頁面。比如：淘寶京東商品列表頁面、百度搜索引擎結果頁面等；
動態頁面，與其之匹配的技術架構，比如：分層架構、服務化架構、數據庫、緩存架構；
動態頁面的特點

以數據庫技術為基礎，可大大降低網站維護的工作量；
采用動態網頁技術的網站可以實現更多的功能；
不是獨立存在于服務器上的網頁文件，只有當用戶請求時服務器才返回一個完整的網頁；
在進行搜索引擎推廣時需做一定的技術處理才能夠適應搜索引擎的要求；

怎么實現動靜分離

動靜分離是指：靜態頁面與動態頁面分開不同系統訪問的架構設計方法。
靜態頁面：訪問路徑短，速度快，幾毫秒；
動態頁面：訪問路徑長，速度慢，幾十毫秒甚至幾百毫秒，架構擴展性要求高；

實現方式主要有兩種，一種 是純粹把靜態文件獨立成單獨的域名，放在獨立的服務器上，也是目前主流推崇的方案。另外一種方法就是動態跟靜態文件混合在一起發布， 通過 Nginx 配置來分開 分別解釋這兩種方式：

1）獨立域名方式

這種方式是將靜態文件獨立成單獨的域名，并將其放置在獨立的服務器上：

靜態文件：您可以將靜態文件（例如HTML、CSS、JavaScript和圖像文件）存放在一個獨立的域名下，例如static.yourdomain.com。
獨立服務器：您可以將這個靜態文件域名指向一個專用的靜態文件服務器。這個服務器的配置和優化可以專門用于提供靜態文件，例如啟用緩存和壓縮等。
動態請求：動態請求（例如API請求、數據庫查詢等）仍然由主域名處理，并被轉發給后端服務器進行處理。

2）Nginx配置方式

這種方式是將動態和靜態文件混合在一起發布，并通過Nginx的配置來區分和處理它們。以下是對該方式的詳細解釋：

Nginx配置：使用Nginx的配置文件來定義靜態文件和動態請求的處理規則。通過使用location塊和相關指令，您可以將靜態文件和動態請求分別指定給不同的處理方式。
靜態文件：在Nginx的配置中，使用root或alias指令指定靜態文件的路徑。這樣，Nginx會直接從文件系統中提供靜態文件的內容，而不需要將請求轉發給后端服務器。
動態請求：對于動態請求，使用proxy_pass指令將請求轉發給后端的應用服務器。這樣，Nginx充當了反向代理的角色，將請求轉發給后端服務器進行處理和生成動態內容。

動靜分離實操案例

文件路徑實現動靜分離

1.在Nginx服務器環境下，準備靜態資源，用于訪問，在根目錄下創建data目錄，并在該目錄里面創建兩個文件夾image、www，在image文件夾里上傳一張本地圖片，www文件夾里創建一個html文件

# cd /data/
# ll
總用量 8
drwxr-xr-x. 2 root root 4096 3月  29 19:14 image
drwxr-xr-x. 2 root root 4096 3月  29 19:13 www# cd image/
# ls
游戲.jpg# cd ../www/
# ls
20200331.html
# cat 20200331.html 
<h1>This is a static page!</h1>

2、 修改nginx.conf配置文件
添加監聽端口、訪問名字、重點添加location。

# vim /usr/local/nginx/conf/nginx.conf39     server {40         listen       80;41         server_name  192.168.1.10;42 43         #charset koi8-r;44 45         #access_log  logs/host.access.log  main;46 47         location /www/ {48         #    proxy_pass http://myserver;49             root   /data/;50             index  index.html index.htm;51         }52         location /image/ {53             root /data/;54             autoindex  on;55         }

3、 重啟Nginx服務

nginx -s reload

4、 驗證效果
在客戶端瀏覽器中輸入：http://192.168.1.10/image/和http://192.168.1.10/www/20200331.html分別進行測試動靜分離是否成功，刪除后端tomcat服務器上的某個靜態文件，查看是否能訪問，如果可以訪問說明靜態資源Nginx直接返回了，無須在通過后端Tomcat服務器；

文件后綴實現動靜分離

配置image、js、css等資源文件的路徑和地址，然后設置緩存失效的時間

worker_processes  1;events {worker_connections  1024;
}http {server {listen       80;server_name  localhost;#攔截后臺請求location / {proxy_pass http://localhost:81;proxy_set_header X-Real-IP $remote_addr;}#攔截靜態資源location ~ .*\.(html|htm|gif|jpg|jpeg|bmp|png|ico|js|css)$ {root static;expires      30d;  }}}

參考鏈接：
https://juejin.cn/post/6969704204285771807
https://www.cnblogs.com/itzgr/p/13335271.html#_label1