一：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 {# 开启gzipgzip 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这样的压缩，如下所示

服务端部署离线包

离线数据包是一组静态资源文件，并不需要特定的云端程序提供运行时环境，因此可以像部署网页的css、js、image一样部署在静态Web服务器上。 注意：在部署前，必须把压缩文件解压。

支持的Web服务器

包括但不限于以下几种：

  • Nginx
  • Apache
  • Tomcat
  • NodeJS

实现步骤

以Nginx为例，三个步骤完成部署：

    1. 把解压后的文件夹拷贝到Nginx默认站点目录html下（如：D:\nginx-1.5.0\html）；
    1. 在nginx.conf文件中，针对离线数据包访问路径设置Http响应头（下文详述）；
    1. 在浏览器中输入“http://ip:port/{离线数据包文件夹名称}”即可（如：http://localhost/a686c361e0bb07d66685d83fd18a881d）。

HTTP响应头设置

为了加速访问，离线数据包中的很多文件都进行了gzip压缩。在离线数据包部署到Web服务器之后，必须对.gz文件设置http响应头，否则将产生错误。

    1. 由于仅需要针对BIMFACE离线数据包中的.gz文件设置响应头，建议开发人员最好把BIMFACE的离线数据包放置在统一的路径下，然后再针对这个统一的路径，设置匹配后缀为.gz的路径。
    1. 针对以上路径设置：Content-Encoding: gzip。

由于不同的Web服务设置Http响应头的方式不一，下面介绍Nginx服务器的设置方式：

Nginx

在nginx.conf文件中相应的Server节点添加

location ~* .*\.gz$ {add_header Content-Encoding gzip;add_header Access-Control-Allow-Origin *;add_header access-control-allow-methods GET;
}

例如：

server {listen 80;server_name localhost;location ~* .*\.gz$ {add_header Content-Encoding gzip;add_header Access-Control-Allow-Origin *;add_header access-control-allow-methods GET;}
}

其他服务器的部署方式见离线数据包 (opens new window)。

以下为我个人的一个例子：

nginx.conf


#user  nobody;
worker_processes  1;#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;#pid        logs/nginx.pid;events {worker_connections  1024;
}http {include       mime.types;default_type  application/octet-stream;#log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '#                  '$status $body_bytes_sent "$http_referer" '#                  '"$http_user_agent" "$http_x_forwarded_for"';#access_log  logs/access.log  main;sendfile        on;#tcp_nopush     on;#keepalive_timeout  0;keepalive_timeout  65;#gzip  on;# 开启gzipgzip 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;server {listen 80;server_name www.rdc.com;location / {        root   C:\environments\web\dist;index  index.html;try_files $uri $uri/ /index/html;}}server {listen       8080;server_name  localhost;index index.html index.htm;root C:\environments\screen\dist;location ~* .*\.gz$ {add_header Content-Encoding gzip;add_header Access-Control-Allow-Origin *;add_header access-control-allow-methods GET;}error_page   500 502 503 504  /50x.html;location = /50x.html {root   html;}}# another virtual host using mix of IP-, name-, and port-based configuration##server {#    listen       8000;#    listen       somename:8080;#    server_name  somename  alias  another.alias;#    location / {#        root   html;#        index  index.html index.htm;#    }#}# HTTPS server##server {#    listen       443 ssl;#    server_name  localhost;#    ssl_certificate      cert.pem;#    ssl_certificate_key  cert.key;#    ssl_session_cache    shared:SSL:1m;#    ssl_session_timeout  5m;#    ssl_ciphers  HIGH:!aNULL:!MD5;#    ssl_prefer_server_ciphers  on;#    location / {#        root   html;#        index  index.html index.htm;#    }#}server {listen 443 ssl;server_name 10.113.239.40;#ssl on;root html;index index.html index.htm;ssl_certificate   ssl/server.pem;ssl_certificate_key  ssl/server.key;ssl_session_timeout 5m;ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;ssl_protocols TLSv1 TLSv1.1 TLSv1.2;ssl_prefer_server_ciphers on;location / {proxy_pass http://10.113.239.32:8080; #??root html;index index.html index.htm;}}}

nginx缓存配置及开启gzip压缩相关推荐

  1. linux apache gzip压缩,Linux入门教程:配置Apache开启gzip压缩传输,gzip压缩 LoadModul

    Linux入门教程:配置Apache开启gzip压缩传输,gzip压缩 LoadModul 开启模块 打开httpd.conf后,先将下面两行配置前面的#号去掉,这样apache就会启用这两个模块,其 ...

  2. webpack+nginx开启gzip压缩部署项目

    首先在服务器安装nginx sudo apt update sudo apt install nginx 安装完毕后将前端项目打包 webpack.output.publicPath里配置资源基础路径 ...

  3. Nginx开启Gzip压缩配置详解

    Nginx开启Gzip压缩配置详解 最近生产上发生了一些问题,原先所有的静态资源文件都是经过gzip压缩的,然而这几天突然都没有压缩了,经过一顿排查,发现是Nginx的配置有问题,借此机会详细了解了N ...

  4. Nginx开启gzip压缩配置参数

    Nginx开启gzip压缩配置参数 场景 图片资源较大,前端页面响应加载时间较长 解决方案 开启nginx的gzip进行资源的压缩,可以达到压缩静态文件大小,提高页面访问速度,节省流量和带宽的效果. ...

  5. nginx 开启gzip压缩

    一.背景介绍        历史遗留问题,在项目创建初期前端力量薄弱,网站大部分image.js.css与业务应用存放在一起,未上传到CDN中,最终导致网站访问缓慢,经过排查由于静态资源大量消耗带宽. ...

  6. 服务器端如何开启GZIP压缩功能

    我们知道做好负载均衡对网站的正常运行,用户体验相当重要.在负载均衡中有一个必须要做的事情就是给服务器开启GZIP压缩功能,对用户请求的页面进行压缩处理,以达到节省网络带宽,提高网站速度的作用. GZI ...

  7. 性能优化实践：快速开启 Gzip 压缩

    概念初探 Gzip,全称为 GNU zip,是一种无损压缩文件的算法.其底采用的是 DEFLATE,而 DEFLATE 是 LZ77 与 哈夫曼编码 的一个组合体. 通常来说,"Gzip 压 ...

  8. webpack 开启gzip压缩

    开启gzip压缩可以有效压缩资源体积,压缩比率在3到10倍左右,可以大大节省服务器的网络带宽,提高资源获取的速度,但需要注意的是:并不是经过gzip压缩之后,所有文件都会变小.根据gzip使用的算法特 ...

  9. webpack插件开启gzip压缩

    一.前端vue.config.js配置 1.下载compression-webpack-plugin cnpm i compression-webpack-plugin@6.1.1 --save 2. ...

最新文章

  1. 现代密码学3.3--伪随机生成器/PRG
  2. 带你快速了解 Docker 和 Kubernetes
  3. jeesite缓存问题
  4. 服务业小店店主生活和工作洞察报告
  5. 信息系统项目管理系列之二：项目生命期和组织
  6. C#LeetCode刷题之#53-最大子序和（Maximum Subarray）
  7. VS-001-概述-003-系统架构及业务流程--004-常见问题定位思路
  8. 难道计算机专业真的没落
  9. deeplink唤醒app测试软件,DeepLink唤醒App的简单实现方法
  10. c++ 遍历所有点且距离最短_图解：最短路径之迪杰斯特拉算法
  11. SQL Server Management Studio 2016的新功能–滚动条
  12. [iOS] 使用 blockable NSTimer 避免内存泄漏
  13. 电脑远程链接怎么删除计算机,删除远程桌面连接记录的方法
  14. 自动整理html书签,技巧：使用 Excel 快速整理重复书签丨Matrix 精选
  15. Verdi快速使用技巧
  16. 工作日志-上班头一天
  17. 什么是Microsoft 365？
  18. android钟表,Android打造属于自己的时间钟表
  19. easyUI详解教程
  20. 柴静雾霾调查:穹顶之下 同呼吸共命运

热门文章

  1. 快速让你的宠物成为宠物王
  2. 网名接龙之--绝缘材料
  3. 爬取创造与魔法游戏的 食谱大全
  4. 心里装着他人，受益的不光是他人，还包括我们自己
  5. 委托与事件-信用卡还款
  6. Linux 中重启php命令
  7. PowerShell基本教程
  8. Word处理控件Aspose.Words功能演示：在 Python 中将 TXT 文件转换为 PDF
  9. QQ三国南蛮行脚商位置
  10. https://docs.icons8.com/ 切片 钢笔 布尔计算