nginx快取配置及開啟gzip壓縮

龍恩0707發表於2019-05-09
Nginx快取

閱讀目錄

一：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這樣的壓縮，如下所示

相關文章