关于java:Nginx-限流的天坑

问题背景

大家看看这个页面,有没有发现什么问题?

主页:http://www.javastack.cn/

是的,页面 CSS 款式全失落了,导致页面凌乱。。

这个页面是我人为删除了款式(为了演示),真正呈现问题是另外一个页面,最近栈长发现有个页面时不时就会呈现款式错乱的问题,很诡异!!

于是这篇就记录下排查过程,和大家分享下解决方案,兴许你会感觉这和 Nginx 有啥关系??我也万万想不到,这确实是因为 Nginx 限流引起的。。

开始排查

页面款式错乱,那必定是查看款式文件呗。

款式文件地位:

页面中有很多这样的款式文件引入,比方:

<link type="text/css" rel="styleSheet" href="/css/style.css" />
<link type="text/css" rel="styleSheet" href="/css/page.css" />
<link type="text/css" rel="styleSheet" href="/css/plugin.css" />
...

这样写没问题呀,之前始终好好的,很神奇,怎么会时不时款式错乱,开始狐疑本人的认知了。

尝试解决1)

因为我的项目中应用到了 Spring Boot,而 CSS 文件是放在 /resources/static/css 目录下,我思考加上 static 试下:

<link type="text/css" rel="styleSheet" th:href="/static/css/style.css" />
<link type="text/css" rel="styleSheet" th:href="/static/css/page.css" />
<link type="text/css" rel="styleSheet" th:href="/static/css/plugin.css" />
...

后果还是不行。

其实应用 Spring Boot,static 目录就是默认的资源目录之一,援用资源文件时并不需要加上 static,我感觉只是做了一次与自我认知反抗的无谓的尝试。

Spring Boot 这些根底的货色我就不介绍了,不会的能够关注公众号Java技术栈,回复:boot,看我整顿的系列具体教程,实战源码也上传到了 Github 仓库:

https://github.com/javastacks…

尝试解决2)

因为我的项目中应用到了 Thymeleaf(模板引擎),思考应用 Thymeleaf 的标签 th:href 进行引入试试:

<link type="text/css" rel="styleSheet" th:href="@{/css/style.css}" />
<link type="text/css" rel="styleSheet" th:href="@{/css/page.css}" />
<link type="text/css" rel="styleSheet" th:href="@{/css/plugin.css}" />
...

改了之后还是没什么用,而后用网页查看模式看页面生成的源码,发现 Thymeleaf 生成的 href 和之前的一样,看来问题并不是出在这里。

解决的转折

就是因为看了一下网页源码,而后我再顺便点了一下 Console 面板:

而后就发现了这个 503 谬误:

503 Service Temporarily Unavailable

而后再点进去 Network 面板看看:

终于定位到问题了,款式文件加载失败!!!

这个 503 响应码显著是来自服务器端的谬误。

留神到下面的 Network 面板没有,我只发动了一个网页刷新申请,浏览器后盾却发动了一堆的申请列表,这外面就包含有 js、css 等动态资源的申请。

什么意思?

也就是说,尽管我只向浏览器发动了一个申请,实际上是向服务器发动了 N 个申请,这和页面上援用到的 css、js 文件数量有关系,这些动态资源的申请也会纳入一个新申请。

如果 Nginx 限流设置的是每秒 5 个申请:

limit_req_zone $binary_remote_addr zone=mylimit:10m rate=5r/s;

而页面上的 css、js 文件数量却达到了 8 个,如果在一秒之内加载残缺个页面及附带的 8 个资源,那其余 4 个资源势必会被限流规定挡住,如果是 2 秒加载完就没问题(每秒 4、5 个)。

终于找到了页面时不是时款式错乱的起因了!!

解决方案

既然页面上引入的每个 css、js 文件也算一个申请,那就得调整限流规定了。

能够依据被申请的资源文件数量再作一个限流调整:

limit_req_zone $binary_remote_addr zone=mylimit:10m rate=20r/s;

但这样可能又会影响所有的页面,包含接口,因为每个页面的资源文件数量是不同的,纯接口又是没有页面跳转的,也就不大可能会援用动态资源文件。

我的想法是能够放弃之前的所有限流,对 css、js 等动态资源的拜访就勾销限流。

放弃所有限流:

location / {
    limit_req zone=mylimit;
    proxy_pass http://javastack.cn;
}

动态资源不限流:

location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
    proxy_pass http://javastack.cn;
}

批改之后,从新加载 Nginx 配置,重复测试,页面显示失常了。

总结

这个坑其实和 Nginx 自身并没有关系,但却和 Nginx 非亲非故,通过这个问题,也让我感觉到很多技术咱们只晓得简略的用,或者只知其一,不知其二,就比如说我上一个遇到的 Nginx 的坑:

Nginx 转发时的一个坑,运维竟然让我背锅!!

这些细节的坑我怎么能想到呢?我不可能把 Nginx 文档全副熟读一遍。。这些问题也只有碰到了才会去尝试解决,不找理由,说白了,还是我把握的不够深,不够全面吧!

但事实也很残暴,不可能全副技术都学得精湛,工夫精力也不容许,技术更新也快,但有一点,遇到问题了,咱们要学会总结经验,防止下次再犯,这样也是一个常识的积攒过程。

好了,明天的分享就到这里了,前面栈长会分享更多好玩的 Java 技术和最新的技术资讯,关注公众号Java技术栈第一工夫推送,我也将支流 Java 面试题和参考答案都整顿好了,在公众号后盾回复关键字 “面试” 进行刷题。

版权申明: 本文系公众号 “Java技术栈” 原创,转载、援用本文内容请注明出处,剽窃、洗稿一律投诉侵权,后果自负,并保留追究其法律责任的权力。

近期热文举荐:

1.1,000+ 道 Java面试题及答案整顿(2022最新版)

2.劲爆!Java 协程要来了。。。

3.Spring Boot 2.x 教程,太全了!

4.别再写满屏的爆爆爆炸类了,试试装璜器模式,这才是优雅的形式!!

5.《Java开发手册(嵩山版)》最新公布,速速下载!

感觉不错,别忘了顺手点赞+转发哦!

【腾讯云】云产品限时秒杀,爆款1核2G云服务器,首年50元

阿里云限时活动-2核2G-5M带宽-60G SSD-1000G月流量 ,特惠价99元/年(原价1234.2元/年,可以直接买3年),速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据