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这样的压缩，如下所示
nginx缓存配置及开启gzip压缩的更多相关文章
- apache 配置静态文件缓存和开启gzip压缩
1,设置文件静态缓存3天: 在httpd.conf 里添加如下代码: #文件静态缓存配置 <IfModule expires_module> #打开缓存 ExpiresActive on ...
- Nginx开启Gzip压缩提升页面加载速度
1.在 nginx 的conf 目录下新建 gzip.conf 文件 #开启gzip压缩 gzip on; #设置允许压缩的页面最小字节数 gzip_min_length 1k; #申请4个单位为16 ...
- nginx 开启gzip压缩
Nginx开启Gzip压缩功能, 可以使网站的css.js .xml.html 文件在传输时进行压缩,提高访问速度,! Web网站上的图片,视频等其它多媒体文件以及大文件,因为压缩效果不好,所以对于 ...
- Nginx 开启gzip 压缩
随着nginx的发展,越来越多的网站使用nginx,因此nginx的优化变得越来越重要,今天我们来看看nginx的gzip压缩到底是怎么压缩的呢? gzip(GNU-ZIP)是一种压缩技术. 经过gz ...
- Nginx 开启gzip压缩(图片,文件,css)
1.Vim打开Nginx配置文件 vim /usr/local/nginx/conf/nginx.conf 2.找到如下一段,进行修改 gzip on; gzip_min_length 1k; gzi ...
- nginx开启gzip压缩后导致apk包下载不能正常安装
最后更新时间:2019/4/27 nginx一般都会开启gzip压缩,以提升传输性能. 配置如下: gzip on; gzip_comp_level 2; gzip_min_length 1k; gz ...
- Nginx开启gzip压缩功能
在Nginx安装完成之后,我们可以开启Gzip压缩功能,这里Nginx默认只能对text/html类型的文件进行压缩.下面的指令为开启Gzip的指令: gzip on; gzip_http_versi ...
- Tomcat7中开启gzip压缩功能的配置方法
使用gzip压缩可以减少数据传输大小,加快网页加载速度.很多大站都开启了gzip压缩,不过也有很多网站并没有开启gzip压缩,上次看了一篇文章说开启gzip压缩后对搜索引擎不友好,但从带宽和流量的角度 ...
- Vue开启gzip压缩文件
在你的项目使用了Vue的路由懒加载.Vue使用CDN引用项目组件,减少项目体积 后,还是觉得项目加载速度慢,效果不尽如人意的时候,还有一个“瘦身项目”可以完成,那就是利用nginx和webpack来使 ...
随机推荐
- 中国vs美国制造业公司营业额大排名，看看哪些属于美国制造业的优势产业（中美旗鼓相当，而且还有本土制造的优势）
当然,所谓的美国制造业,大量的东西现在 在中国制造和生产,但这里列举的,主要是卖实体工业产品为主的美国公司这个榜单里主要列出以工业产品销售为主的公司. 所以各大能源巨头虽然本身也是装备制造大户,但没被 ...
- Delphi如何实现多国语言
Delphi里的多语言处理方法都一样, 都是通过资源DLL的形式进行加载处理. Delphi在加载form数据的时候会判断当前的系统语言,然后根据语言加载不同的资源dll, 来实现多国语言的功能. 下 ...
- 关于npm的环境变量配置、prefix
1.关于npm 的 prefix 在npm中安装全局文件时,npm会把他安装在npm里面配置的prefix路径下,查看prefix的方法是:npm config list/npm config ls/ ...
- mysql优化-----索引覆盖
一道面试题: 有商品表, 有主键,goods_id, 栏目列 cat_id, 价格price 说:在价格列上已经加了索引,但按价格查询还是很慢,问可能是什么原因,怎么解决? 答:在实际场景中,一个电商 ...
- (linux)schedule_delayed_work()
原文地址:schedule_delayed_work()用法作者:Valley 第一篇 工作队列 在Linux内核中,对下半部(或者说推后执行的工作)的处理方式有好几种,包括BH( ...
- Linux 进程等待队列【转】
本文转载自:http://blog.csdn.net/dlutbrucezhang/article/details/9212067 Linux内核的等待队列是以双循环链表为基础数据结构,与进程调度机制 ...
- WAS：服务器停电后，重启DMGR，控制台访问不了
1. 今天有现场WAS服务器停电,重启DMGR后,控制台网页打不开: 后来得知,防火墙可能有问题.(虽然之前该机器上防火墙是关着的,但掉电后,防火墙会重启规则) 关掉防火墙后,问题解决. 2. ...
- 替换一个文件中的内容BAT
@echo off setlocal enabledelayedexpansion set file=%1set "file=%file:"=%" for %%i in ...
- 在线制作一键生成微信小程序实现原理之需求分析
随着微信小程序接口不断的放开,小程序在今年或许是明年必将成为商家的一个标配,这个标配的标准就是要开发周期短,费用低,功能实用.只有这样才能让线下的广大商家快速接入.现在也有好多公司开发出了一键生成快速 ...
- 【旧文章搬运】超级无敌大炉子的LzOpenProcess
原文发表于百度空间,2008-11-20========================================================================== 这个东西嘛 ...