nginx缓存配置及开启gzip压缩
阅读⽬录
⼀：nginx缓存配置
在前⼀篇⽂章，我们理解过http缓存相关的知识点, 请看. 今天我们来学习下使⽤nginx服务来配置缓存的相关的知识。
nginx配置缓存的优点：可以在⼀定程度上，减少服务器的处理请求压⼒。⽐如对⼀些图⽚，css或js做⼀些缓存，那么在每次刷新浏览器的时候，就不会重新请求了，⽽是从缓存⾥⾯读取。这样就可以减轻服务器的压⼒。
nginx可配置的缓存⼜有2种：
1）客户端的缓存(⼀般指浏览器的缓存)。
2）服务端的缓存(使⽤proxy-cache实现的)。
客户端的缓存⼀般有如下两种⽅式实现：
协商缓存和强缓存。具体理解什么是协商缓存或强缓存，可以看我之前的.
在配置之前，我们来看下我们的项⽬基本架构如下：
power是什么意思excel|----项⽬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"jquery下载文件请求
}
}
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 的时候，然后我们在浏览器访问 localhost:7878/ 时候，可以看到不管我刷新多少次，浏览器下图⽚，css，js所有的请求都会返回200，不会有任何缓存。如下所⽰：
现在我们去我本地安装的nginx中去配置下哦，打开f配置⽂件。具体本地mac系统下安装nginx，可以去我之前的⽂章查看下如何安装，.
打开f，使⽤ cat /usr/local/etc/f (或者使⽤ sudo open /usr/local/etc/f -a 'sublime text' 使⽤编辑器sublime打开)。
在f加⼊如下规则：
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;
location / {
proxy_pass localhost:7878;
add_header Cache-Control max-age=no-cache;
}
}
1) 如果我们要添加缓存功能的话，需要创建⼀个⽤于存放缓存⽂件的⽂件夹。⽐如我们这⾥使⽤ /data/nuget-cache。
在/usr/local/etc/nginx⽬录下新建。⽐如使⽤命令：mkdir /data/nuget-cache. 创建完成后，我们来查看下：
2）然后我们需要在f的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;
location / {
proxy_pass localhost:7878;
add_header Cache-Control max-age=no-cache;
}
}
}
proxy_cache_path 各个配置值的含义解析如下：
proxy_cache_path 指缓存的⽬录，⽬录为：/data/nuget-cache。
scanf怎么赋值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 {delphi下载文件代码进度
// ..... 其他的配置
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;
location / {
proxy_pass 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个⼩时过期。
如上配置完成后，我们保存f配置后，重新启动下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 {
// ..... 其他的配置
mysql添加普通索引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;
location / {
proxy_pass 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 ⽬录下新建⼀个
f 配置⽂件，把上⾯的 proxy相关的配置放到该⽂件⾥⾯，如下所⽰：
然后我们的配置就变成如下了：
http {
// ..... 其他的配置
proxy_cache_path /data/nuget-cache levels=1:2 keys_zone=nuget-cache:20m max_size=50g inactive=168h;
include f;
server {
listen 8081;
server_name xxx.abc;
location / {
proxy_pass localhost:7878;
add_header Cache-Control max-age=no-cache;
}
}
}
如上是对页⾯使⽤协商缓存的，但是对于图⽚，css, 或js这样的，我想使⽤强制缓存，因此对于其他的类型⽂件我们统⼀如下这样处理：
server {
listen 8081;
server_name xxx.abc;
location / {
proxy_pass 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 localhost:7878;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
cleartimeout v8}
如上css或js⽂件等缓存的时间是30天。使⽤的是max-age强制缓存。因此如上，如果是页⾯第⼆次访问的话，会返回304，如下所⽰：
如果是css或js这样的访问的话，就是强制缓存了，状态码还是200，但是先从内存⾥⾯读取的。当然如果进程结束了，⽐如浏览器关闭了，再打开，那么是从硬盘上读取的了。如下所⽰：
因此f 所有的配置⽂件代码如下：
worker_processes 1;
events {
worker_connections 1024;
}
http {
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论