回到顶部
一: 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>
- 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;
- }
- }
- server {
- listen 8081;
- server_name xxx.abc.com;
- location / {
- proxy_pass http://localhost:7878;
- add_header Cache-Control max-age=no-cache;
- }
- }
- 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;
- }
- }
- }
- 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;
- 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;
- }
- }
- }
- 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;
- }
- }
- }
- 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;
- }
- }
- 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;
- }
- }
- }
- # 开启 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
- 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;
- }
来源: https://www.cnblogs.com/tugenhua0707/p/10841267.html