nginx快取配置及開啟gzip壓縮
閱讀目錄
- 一：nginx快取配置
- 二：nginx開啟gzip
一：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這樣的壓縮，如下所示
github代