一、概述

1.1 動態頁面與靜態頁面區別

• 靜態資源： 當用戶多次訪問這個資源，資源的源代碼永遠不會改變的資源。
• 動態資源：當用戶多次訪問這個資源，資源的源代碼可能會發送改變。

1.2 什么是動靜分離

• 動靜分離是讓動態網站里的動態網頁根據一定規則把不變的資源和經常變的資源區分開來，動靜資源做好了拆分以后，我們就可以根據靜態資源的特點將其做緩存操作，這就是網站靜態化處理的核心思路
• 動靜分離簡單的概括是：動態文件與靜態文件的分離。
• 偽靜態：網站如果想被搜索引擎搜素到，動態頁面靜態技術freemarker等模版引擎技術

1.3 為什么要用動靜分離

• 在我們的軟件開發中，有些請求是需要后臺處理的（如：.jsp,.do等等），有些請求是不需要經過后臺處理的（如：css、html、jpg、js等等文件），這些不需要經過后臺處理的文件稱為靜態文件，否則動態文件。因此我們后臺處理忽略靜態文件。這會有人又說那我后臺忽略靜態文件不就完了嗎。當然這是可以的，但是這樣后臺的請求次數就明顯增多了。在我們對資源的響應速度有要求的時候，我們應該使用這種動靜分離的策略去解決。
• 動靜分離將網站靜態資源（HTML，JavaScript，CSS，img等文件）與后臺應用分開部署，提高用戶訪問靜態代碼的速度，降低對后臺應用訪問。這里我們將靜態資源放到nginx中，動態資源轉發到tomcat服務器中。
• 因此，動態資源轉發到tomcat服務器我們就使用到了前面講到的反向代理了。

二、Nginx實現動靜分離

2.1 架構分析

2.2 配置

動靜分離的原理很簡單，通過location對請求url進行匹配即可，在/Users/Hao/Desktop/Test（任意目錄）下創建?/static/imgs?配置如下：　　

###靜態資源訪問
server {
  listen       80;
  server_name  static.jb51.com;
  location /static/imgs {
       root /Users/Hao/Desktop/Test;
       index  index.html index.htm;
   }
}
###動態資源訪問
 server {
  listen       80;
  server_name  www.jb51.com;
    
  location / {
    proxy_pass http://127.0.0.1:8080;
     index  index.html index.htm;
   }
}

別一種按訪問資源配置

server {
        listen 80;
        server_name  jb51.net;
        access_log  /data/nginx/logs/jb51.net-access.log main;
        error_log  /data/nginx/logs/jb51.net-error.log;
 
        #動態訪問請求轉給tomcat應用處理
        location ~ .(jsp|page|do)?$ {      #以這些文件結尾的
           proxy_set_header  Host $host;
           proxy_set_header  X-Real-IP  $remote_addr;
           proxy_pass http://tomcat地址;
        }
 
        #設定訪問靜態文件直接讀取不經過tomcat
        location ~ .*.(htm|html|gif|jpg|jpeg|png|bmp|swf|ioc|rar|zip|txt|flv|mid|doc|ppt|pdf|xls|mp3|wma)$  {     #以這些文件結尾的
           expires      30d;
           root /data/web/html ;
        }
}

三、動靜分離與前后分離區別:

• 動靜分離動態資源與靜態資源分離，不會部署在同一臺服務器上。
• 前后分離:網站架構模式，微服務開發基于SOA面向于服務器開發，后臺和前端都采用調用接口方式。將一個項目拆分成一個控制Web(前端)和接口(后端),最終使用rpc遠程調用技術。視圖層和業務邏輯層拆分，中間采用RPC遠程調用技術

四、一些問題

• 為什么互聯網公司項目中，靜態資源url后面會加上一個時間戳?他的作用:控制緩存
  • 目的:最終的目的是為了控制項目上線的時候，薪靜態資源與老的瀏覽器緩存靜態資源避免沖突問題。
  • 解決辦法:加上時間戳規范t = 項目上線
• 304走本地緩存狀態碼原理:
  • 默認瀏覽器圖片緩存是7天。
  • 第一次下載資源的時候，客戶端保存修改資源時間
  • 第二次下載資源的時候，服務端判斷客戶端上一次修改的時間是否需返回200還是304
  • 第二次下載資源的時候，服務端判斷當前資源文件與客戶端上一次修改的時間是否需返回200還是304客戶端第二次下載資源最后修改時間 2018/6/28 下午11:07:11
  • 服務端最后一次修改時間大于客戶端最后一次修改的時間200重 新加載資源
  • 服務器端最后一次修改的時間小于客戶端最后修改的時間返回304走本地緩存

生產環境中js css最后一次的修改時間與客戶端緩存的最后一次修改的時間可能會產生
沖突。服務器在2018年5月22日上線，用戶在2018年6月01日訪問，用戶上線新js文件在2018年06月5日最后一次修改時間還是保留上次上線時間。所以一般來說在服務器上線的時候，都會在靜態資源上加上時間戳 強制最新的資源