一、概述

1.1 動態(tài)頁面與靜態(tài)頁面區(qū)別

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

1.2 什么是動靜分離

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

1.3 為什么要用動靜分離

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

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

2.1 架構(gòu)分析

2.2 配置

動靜分離的原理很簡單，通過location對請求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;
   }
}
###動態(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;
 
        #動態(tài)訪問請求轉(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 ;
        }
}

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

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

四、一些問題

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

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

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

最新評論