Nginx 反向代理 proxy_cache 配置

本篇主要介绍一下 nginx 中缓存 proxy_cache 的基本配置

1.概述

前面我们介绍过nginx 的动静分离, 就是把图片等资源直接放到nginx所在的服务器上, 需要把图片等资源手动迁移过去, 那使用nginx的时候 我们也可以动态的缓存后端返回的图片 css js 等等资源 , 也就是当访问一次后nginx就把这些资源缓存下来实现动态的效果, 可以利用 nginx的 proxy_cache 配置

下面一起来看看吧

2.后端准备

简单起见直接使用 thymeleaf来做模板引擎 , 虽然现在大部分是前后端分离, 但是这种后端渲染的方式利于SEO 等,适合中小型项目

2.1 引入依赖thymeleaf

这里使用gradle 的方式, 可以选择maven

implementation("org.springframework.boot:spring-boot-starter-thymeleaf")

2.2 配置application.yaml

application.yaml 添加thymeleaf配置

spring:
  thymeleaf:
    cache: false # 不缓存 方便调试 但是修改html后需要 build 一下项目才能体现!!
    prefix: classpath:/templates/   # 指定html模板文件在哪里

2.3 添加 templates 模板文件userinfo.html

在resources/templates/userinfo.html 添加一个 html模板文件, 使用 thymeleaf语法引入变量

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>title</title>
    <meta charset="UTF-8">
</head>
<body>
<h1 th:text="${info}"></h1>
<img  alt="headImage" th:src="${headimagepath}" th:width="200"  th:height="200"/>
</body>

</html>

2.4 添加 static 静态图片

2.5 后端接口返回 thymeleaf html

返回html的名称并且绑定好 2个数据,供thymeleaf 里使用 , 我这里用的是kotlin , 用你熟悉的java 写法一样的

@Controller
class UserInfoController {

    @GetMapping("/userinfo")
    fun userInfo(model:ModelMap):String{
        //注意默认前面会去 classpath/static/ 下面寻找 所以这里直接写 /img/head.jpg 
        model.addAttribute("headimagepath","/img/head.jpg")
        model.addAttribute("info","头像")
        return "userinfo"
    }
}

2.6 访问测试

可以看到 html 已经渲染成功了

3. Nginx proxy_cache 配置

前面是后端的一些准备工作 ,下面来看看如何利用 nginx proxy_cache 来缓存上面后端返回的图片资源

3.1 配置proxy_cache

http {
    # ...省略
    upstream backend {
      # 后端服务
      server 172.16.225.1:8899;
    }
    # 配置缓存的一些规则 路径等等 注意在 http 模块 keys_zone 相当于一个标识名称,给下面引用的, levels:目录的字母数
    # inactive=1d 1天会自动清理
    # max_size: 表示最大磁盘占用空间
    proxy_cache_path /ngx_tmp levels=1:2 keys_zone=test_cache:100m inactive=1d max_size=10g ;
    server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        location / {
            # 添加一个header 方便浏览器上查看是否已经缓存
            add_header  Nginx-Cache "$upstream_cache_status";
            # 这里引用上面的 定义
            proxy_cache test_cache;
            # 这个一定要配置 如果只配置上面的 不生效的, 表示缓存的有效期
            proxy_cache_valid 168h;
            proxy_pass http://backend;
        }

        #error_page  404              /404.html;
        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

    }

add_header Nginx-Cache "$upstream_cache_status"; 把缓存状态返回到响应头去

proxy_cache_path: 配置缓存的一些规则路径等等
proxy_cache test_cache : 引用上面定义的 keys_zone
proxy_cache_valid 168h : 表示缓存的有效期 , 这个一定要配置如果只配置上面的不生效的

3.2 实验测试

第一次访问可以看到 MISS 状态就是未命中缓存

第二次访问已经可以看到是 HIT命中状态

再来看看上面配置的缓存路径下面有什么

如果没有 tree 命令则 yum -y install tree

可以看到已经缓存了2个文件一个是后端返回html 一个是html中引用的 jpg 图片

直接把后端的资源文件删除看看或者直接把后端项目直接停了..

*可以看到并不影响还是能够访问 , 说明确实走的是 nginx 的缓存**

4. 扩展 proxy_cache_key

找到html的缓存内容可以看到有个KEY:表示这个默认的 proxy_cache_key 这个是可以配置的, 可以配置用什么去作为key 缓存, 默认$scheme$proxy_host$request_uri 其实这里有个问题因为默认的key 带 scheme 就是http和https 还有 proxy_host 这些当 http 和 https 两个访问的时候会导致2次请求并且缓存2分相同数据, 因为key不同但是内容相同, 这个肯定是不希望看到的, 可以只定义 proxy_cache_key 是uri 后缀即可