nginx快取配置及開啟gzip壓縮

龍恩0707發表於2019-05-09

閱讀目錄

一:nginx快取配置

在前一篇文章,我們理解過http快取相關的知識點, 請看這篇文章. 今天我們來學習下使用nginx服務來配置快取的相關的知識。

nginx配置快取的優點:可以在一定程度上,減少伺服器的處理請求壓力。比如對一些圖片,css或js做一些快取,那麼在每次重新整理瀏覽器的時候,就不會重新請求了,而是從快取裡面讀取。這樣就可以減輕伺服器的壓力。

nginx可配置的快取又有2種:
1)客戶端的快取(一般指瀏覽器的快取)。
2)服務端的快取(使用proxy-cache實現的)。

客戶端的快取一般有如下兩種方式實現:

協商快取和強快取。具體理解什麼是協商快取或強快取,可以看我之前的這篇文章.

在配置之前,我們來看下我們的專案基本架構如下:

|----專案demo
|  |--- .babelrc       # 解決es6語法問題
|  |--- node_modules   # 所有依賴的包
|  |--- static
|  | |--- index.html  # html頁面
|  | |--- css         # 存放css資料夾
|  | | |--- base.css  # css檔案,是從網上隨便複製過來的很多css的
|  | |--- js          # 存放js的資料夾
|  | | |--- jquery-1.11.3.js  # jquery 檔案
|  | |--- images      # 存放images資料夾
|  | | |-- 1.jpg      # 圖片對應的檔案
|  |--- app.js         # 編寫node相關的入口檔案
|  |--- package.json   # 依賴的包檔案

package.json 程式碼如下:

{
  "name": "xxx",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon ./index.js"
  },
  "license": "MIT",
  "devDependencies": {},
  "dependencies": {
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.2.3",
    "@babel/register": "^7.0.0",
    "koa": "^2.7.0",
    "koa-static": "^5.0.0",
    "nodemon": "^1.19.0",
    "path": "^0.12.7"
  }
}

app.js 程式碼如下:

import path from 'path';
import Koa from 'koa';

//靜態資源中介軟體
import resource from 'koa-static';
const app = new Koa();
const host = 'localhost';
const port = 7878;

app.use(resource(path.join(__dirname, './static')));

app.listen(port, () => {
  console.log(`server is listen in ${host}:${port}`);
});

index.js 程式碼如下:

require('@babel/register');
require('./app.js');

index.html 程式碼如下:

<!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>前端快取</title>
    <style>
      .web-cache img {
        display: block;
        width: 100%;
      }
    </style>
    <link href="./css/base.css" rel="stylesheet" />
    <script type="text/javascript" src="./js/jquery-1.11.3.js"></script>
  </head>
  <body>
    <div class="web-cache">
      1111112224546664456999000
      <img src="./images/1.jpg" />
    </div>
  </body>
</html>

如上就是一些基本的程式碼結構,當我們在nginx沒有配置任何的時候,我們直接在命令列中執行 npm run dev 的時候,然後我們在瀏覽器訪問 http://localhost:7878/ 時候,可以看到不管我重新整理多少次,瀏覽器下圖片,css,js所有的請求都會返回200,不會有任何快取。如下所示:

現在我們去我本地安裝的nginx中去配置下哦,開啟nginx.conf配置檔案。具體本地mac系統下安裝nginx,可以去我之前的文章檢視下如何安裝,mac下安裝nginx.

開啟nginx.conf,使用 cat /usr/local/etc/nginx/nginx.conf (或者使用 sudo open /usr/local/etc/nginx/nginx.conf -a 'sublime text' 使用編輯器sublime開啟)。

在nginx.conf加入如下規則:

server {
  location ~* \.(html)$ {
    access_log off;
    add_header  Cache-Control  max-age=no-cache;
  }

  location ~* \.(css|js|png|jpg|jpeg|gif|gz|svg|mp4|ogg|ogv|webm|htc|xml|woff)$ {
    # 同上,通配所有以.css/.js/...結尾的請求
    access_log off;
    add_header    Cache-Control  max-age=360000;
  }
}

如上配置解析含義如下:

~* 的含義是:通配任意字元(且大小寫不敏感),\轉義字元,因此 ~* \.(html)$的含義是:匹配所有以.html結尾的請求
access_log off; 的含義是 關閉日誌功能。

add_header Cache-Control max-age=no-cache; 的含義:html檔案不設定強制快取時間,協商快取,使用 Last-Modified。no-cache 會發起往返通訊來驗證快取的響應,但如果資源未發生變化,則不會下載,返回304。

如下圖所示:

add_header Cache-Control max-age=360000; 的含義給上面匹配字尾的檔案設定強制快取,且快取的時間是360000秒,第一次訪問的時候,從伺服器請求,當除了第一次以外,再次重新整理瀏覽器,會從瀏覽器快取讀取,那麼強制快取一般是從記憶體裡面先讀取,如果記憶體沒有,再從硬碟讀取。

如下圖所示:

注意:如上只是不對反向代理的頁面進行快取設定的,但是如果是反向代理後的頁面,如上設定是不生效的。比如說我node起了一個服務,然後通過訪問nginx反向代理的方式代理到我node服務來,上面的配置是不生效的。因此我們需要如下處理配置。

解決nginx反向代理快取不起作用的問題

比如我上面的node服務埠是7878埠。nginx需要如下配置:

server {
  listen  8081;
  server_name  xxx.abc.com;
  location / {
    proxy_pass http://localhost:7878;
    add_header  Cache-Control  max-age=no-cache;
  }
}

1) 如果我們要新增快取功能的話,需要建立一個用於存放快取檔案的資料夾。比如我們這裡使用 /data/nuget-cache。

在/usr/local/etc/nginx目錄下新建。比如使用命令:mkdir /data/nuget-cache. 建立完成後,我們來檢視下:

2)然後我們需要在nginx.conf的http設定部分新增 proxy_cache_path的設定,如下:

http {
  // ..... 其他的配置
  proxy_cache_path  /data/nuget-cache levels=1:2 keys_zone=nuget-cache:20m max_size=50g inactive=168h;
  server {
    listen  8081;
    server_name  xxx.abc.com;
    location / {
      proxy_pass http://localhost:7878;
      add_header  Cache-Control  max-age=no-cache;
    }
  }
}

proxy_cache_path 各個配置值的含義解析如下:

proxy_cache_path 指快取的目錄,目錄為:/data/nuget-cache。
levels=1:2 表示採用2級目錄結構;
keys_zone 指的是快取空間名稱,叫nuget-cache。快取記憶體的空間為20M。
max_size 指的是快取檔案可以佔用的最大空間。為50G.
inactive=168h; 預設過期時間為168個小時。為7天,也可以寫成:inactive=7d; 這樣的。

3)我們還需要在server設定部分新增 proxy_cache 與 proxy_cache_valid的設定:如下程式碼:

http {
  // ..... 其他的配置
  proxy_cache_path  /data/nuget-cache levels=1:2 keys_zone=nuget-cache:20m max_size=50g inactive=168h;
  server {
    listen  8081;
    server_name  xxx.abc.com;
    location / {
      proxy_pass http://localhost:7878;
      add_header  Cache-Control  max-age=no-cache;
      proxy_cache nuget-cache;
      proxy_cache_valid 168h;
    }
  }
}

proxy_cache 設定的是 proxy_cache_path中的keys_zone的值。
proxy_cache_valid:設定的是快取過期時間,比如設定168個小時過期。

如上配置完成後,我們儲存nginx.conf配置後,重新啟動下nginx後,發現還是不能快取檔案了。因此我們還需要進行如下配置:

需要在server中再加上如下程式碼:

proxy_ignore_headers Set-Cookie Cache-Control;
proxy_hide_header Cache-Control;
proxy_hide_header Set-Cookie;

proxy_ignore_headers的含義是:忽略Cache-Control的請求頭控制,依然進行快取,比如對請求頭設定cookie後,預設是不快取的,需要我們增加忽略配置。

因此所有配置變成如下了:

http {
  // ..... 其他的配置
  proxy_cache_path  /data/nuget-cache levels=1:2 keys_zone=nuget-cache:20m max_size=50g inactive=168h;
  server {
    listen  8081;
    server_name  xxx.abc.com;
    location / {
      proxy_pass http://localhost:7878;
      add_header  Cache-Control  max-age=no-cache;
      proxy_cache nuget-cache;
      proxy_cache_valid 168h;
      proxy_ignore_headers Set-Cookie Cache-Control;
      proxy_hide_header Cache-Control;
      proxy_hide_header Set-Cookie;
    }
  }
}

但是如上寫法看起來很繁瑣,因此我們可以使用include命令把檔案包含進來,因此我在 /usr/local/etc/nginx 目錄下新建一個 nginx_proxy.conf 配置檔案,把上面的 proxy相關的配置放到該檔案裡面,如下所示:

然後我們的配置就變成如下了:

http {
  // ..... 其他的配置
  proxy_cache_path  /data/nuget-cache levels=1:2 keys_zone=nuget-cache:20m max_size=50g inactive=168h;
  include nginx_proxy.conf;
  server {
    listen  8081;
    server_name  xxx.abc.com;
    location / {
      proxy_pass http://localhost:7878;
      add_header  Cache-Control  max-age=no-cache;
    }
  }
}

如上是對頁面使用協商快取的,但是對於圖片,css, 或js這樣的,我想使用強制快取,因此對於其他的型別檔案我們統一如下這樣處理:

server {
  listen       8081;
  server_name  xxx.abc.com;
  location / {
    proxy_pass http://localhost:7878;
    add_header  Cache-Control  max-age=no-cache;
  }
  location ~* \.(css|js|png|jpg|jpeg|gif|gz|svg|mp4|ogg|ogv|webm|htc|xml|woff)$ {
    access_log off;
    add_header Cache-Control "public,max-age=30*24*3600";
    proxy_pass http://localhost:7878;
  }
  error_page   500 502 503 504  /50x.html;
  location = /50x.html {
    root   html;
  }
}

如上css或js檔案等快取的時間是30天。使用的是max-age強制快取。因此如上,如果是頁面第二次訪問的話,會返回304,如下所示:

如果是css或js這樣的訪問的話,就是強制快取了,狀態碼還是200,但是先從記憶體裡面讀取的。當然如果程式結束了,比如瀏覽器關閉了,再開啟,那麼是從硬碟上讀取的了。如下所示:

因此nginx.conf 所有的配置檔案程式碼如下:

worker_processes  1;
events {
  worker_connections  1024;
}
http {
  include       mime.types;
  default_type  application/octet-stream;
  sendfile        on;
  #tcp_nopush     on;
  #keepalive_timeout  0;
  keepalive_timeout  65;
  include nginx_proxy.conf;
  proxy_cache_path  /data/nuget-cache levels=1:2 keys_zone=nuget-cache:20m max_size=50g inactive=168h;
  #gzip  on;
  server {
    listen       8081;
    server_name  xxx.abc.com;
    location / {
      proxy_pass http://localhost:7878;
      add_header  Cache-Control  max-age=no-cache;
    }
    location ~* \.(css|js|png|jpg|jpeg|gif|gz|svg|mp4|ogg|ogv|webm|htc|xml|woff)$ {
      access_log off;
      add_header Cache-Control "public,max-age=30*24*3600";
      proxy_pass http://localhost:7878;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
      root   html;
    }
  }
}

如上上面的css,js這些我時間設定短一點,比如設定60秒過期的話,那麼過期後,我再重新整理瀏覽器,瀏覽器會去詢問伺服器端,檢查資源是否被更新了,如果資源沒有被更新的話,那麼伺服器端會範湖304.資源依然讀取本地的。如下所示:

然後再繼續重新整理的話,它之後又從記憶體裡面讀取了。依次這樣迴圈下去。

二:nginx開啟gzip

 開啟gzip配置是在http層加的。基本配置程式碼如下:

# 開啟gzip
gzip on;

# 啟用gzip壓縮的最小檔案;小於設定值的檔案將不會被壓縮
gzip_min_length 1k;

# gzip 壓縮級別 1-10 
gzip_comp_level 2;

# 進行壓縮的檔案型別。

gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;

# 是否在http header中新增Vary: Accept-Encoding,建議開啟
gzip_vary on;

我們如上的配置加上去後,如在http下加上上面的gzip程式碼:

http {
  # 開啟gzip
  gzip on;

  # 啟用gzip壓縮的最小檔案;小於設定值的檔案將不會被壓縮
  gzip_min_length 1k;

  # gzip 壓縮級別 1-10 
  gzip_comp_level 2;

  # 進行壓縮的檔案型別。

  gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;

  # 是否在http header中新增Vary: Accept-Encoding,建議開啟
  gzip_vary on;
}

我們可以先來對比下,如果我們沒有開啟zip壓縮之前,我們的對應的檔案大小,如下所示:

現在我們開啟了gzip進行壓縮後的檔案的大小,可以看到如下所示:

並且我們檢視響應頭會看到gzip這樣的壓縮,如下所示

相關文章