Nginx配置前端http缓存 | 您所在的位置:网站首页 › escapesl2配置 › Nginx配置前端http缓存 |
nginx缓存配置
今天我们来学习下使用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 代码如下: 前端缓存 .web-cache img { display: block; width: 100%; } 1111112224546664456999000 复制代码如上就是一些基本的代码结构,当我们在nginx没有配置任何的时候,我们直接在命令行中运行 npm run dev 的时候,然后我们在浏览器访问 http://localhost:7878/ 时候,可以看到不管我刷新多少次,浏览器下图片,css,js所有的请求都会返回200,不会有任何缓存。如下所示:
在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。 如下图所示:
如下图所示:
解决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; } } 复制代码 如果我们要添加缓存功能的话,需要创建一个用于存放缓存文件的文件夹。比如我们这里使用 /data/nuget-cache。在/usr/local/etc/nginx目录下新建。比如使用命令:mkdir /data/nuget-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相关的配置放到该文件里面,如下所示:
如上是对页面使用协商缓存的,但是对于图片,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这些我时间设置短一点,比如设置60秒过期的话,那么过期后,我再刷新浏览器,浏览器会去询问服务器端,检查资源是否被更新了,如果资源没有被更新的话,那么服务器端会范湖304.资源依然读取本地的。如下所示:
开启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压缩之前,我们的对应的文件大小,如下所示:
|
CopyRight 2018-2019 实验室设备网 版权所有 |