Nginx

Nginx 反向代理 proxy_cache 配置

字号+ 来源:网络收集 编辑整理: 飞燕前端网 2023-02-18 15:15:59

本篇主要介绍一下 nginx 中 缓存 proxy_cache 的基本配置1.概述前面我们介绍过nginx 的动静分离, 就是把图片等资源直接放到nginx所在的服务器上, 需要把图片等资源手动迁移...

本篇主要介绍一下 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 后缀即可



总结

本篇主要介绍了Nginx 的proxy_cache 的相关配置, cache模块是nginx发行版已经编译进去的 不用额外添加模块

从后端准备到nginx的配置 全套带你了解如何配置和实验,这对于一些场景优化还是有好处的


1.飞燕前端网遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.飞燕前端网的原创文章,请转载时务必注明文章作者和"来源:飞燕前端网",不尊重原创的行为飞燕前端网或将追究责任。

相关文章
网友点评