一、概述

1.1 動(dòng)態(tài)頁(yè)面與靜態(tài)頁(yè)面區(qū)別

• 靜態(tài)資源： 當(dāng)用戶多次訪問這個(gè)資源，資源的源代碼永遠(yuǎn)不會(huì)改變的資源。
• 動(dòng)態(tài)資源：當(dāng)用戶多次訪問這個(gè)資源，資源的源代碼可能會(huì)發(fā)送改變。

1.2 什么是動(dòng)靜分離

• 動(dòng)靜分離是讓動(dòng)態(tài)網(wǎng)站里的動(dòng)態(tài)網(wǎng)頁(yè)根據(jù)一定規(guī)則把不變的資源和經(jīng)常變的資源區(qū)分開來，動(dòng)靜資源做好了拆分以后，我們就可以根據(jù)靜態(tài)資源的特點(diǎn)將其做緩存操作，這就是網(wǎng)站靜態(tài)化處理的核心思路
• 動(dòng)靜分離簡(jiǎn)單的概括是：動(dòng)態(tài)文件與靜態(tài)文件的分離。
• 偽靜態(tài)：網(wǎng)站如果想被搜索引擎搜素到，動(dòng)態(tài)頁(yè)面靜態(tài)技術(shù)freemarker等模版引擎技術(shù)

1.3 為什么要用動(dòng)靜分離

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

二、Nginx實(shí)現(xiàn)動(dòng)靜分離

2.1 架構(gòu)分析

2.2 配置

動(dòng)靜分離的原理很簡(jiǎn)單，通過location對(duì)請(qǐng)求url進(jìn)行匹配即可，在/Users/Hao/Desktop/Test（任意目錄）下創(chuàng)建 /static/imgs 配置如下：　　

###靜態(tài)資源訪問
server {
  listen       80;
  server_name  static.jb51.com;
  location /static/imgs {
       root /Users/Hao/Desktop/Test;
       index  index.html index.htm;
   }
}
###動(dòng)態(tài)資源訪問
 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;
 
        #動(dòng)態(tài)訪問請(qǐng)求轉(zhuǎn)給tomcat應(yīng)用處理
        location ~ .(jsp|page|do)?$ {      #以這些文件結(jié)尾的
           proxy_set_header  Host $host;
           proxy_set_header  X-Real-IP  $remote_addr;
           proxy_pass http://tomcat地址;
        }
 
        #設(shè)定訪問靜態(tài)文件直接讀取不經(jīng)過tomcat
        location ~ .*.(htm|html|gif|jpg|jpeg|png|bmp|swf|ioc|rar|zip|txt|flv|mid|doc|ppt|pdf|xls|mp3|wma)$  {     #以這些文件結(jié)尾的
           expires      30d;
           root /data/web/html ;
        }
}

三、動(dòng)靜分離與前后分離區(qū)別:

• 動(dòng)靜分離動(dòng)態(tài)資源與靜態(tài)資源分離，不會(huì)部署在同一臺(tái)服務(wù)器上。
• 前后分離:網(wǎng)站架構(gòu)模式，微服務(wù)開發(fā)基于SOA面向于服務(wù)器開發(fā)，后臺(tái)和前端都采用調(diào)用接口方式。將一個(gè)項(xiàng)目拆分成一個(gè)控制Web(前端)和接口(后端),最終使用rpc遠(yuǎn)程調(diào)用技術(shù)。視圖層和業(yè)務(wù)邏輯層拆分，中間采用RPC遠(yuǎn)程調(diào)用技術(shù)

四、一些問題

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

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

更多關(guān)于Nginx動(dòng)靜分離配置實(shí)現(xiàn)請(qǐng)查看下面的相關(guān)鏈接