Nginx動靜分離設定實現與說明

2022-04-07 19:01:46

一、概述

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日最後一次修改時間還是保留上次上線時間。所以一般來說在伺服器上線的時候，都會在靜態資源上加上時間戳強制最新的資源

更多關於Nginx動靜分離設定實現請檢視下面的相關連結