Nginx 限流的天坑

问题背景

大家看看这个页面，有没有发现什么问题？

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

是的，页面 CSS 样式全丢失了，导致页面混乱。。

这个页面是我人为删除了样式（为了演示），真正出现问题是另外一个页面，最近栈长发现有个页面时不时就会出现样式错乱的问题，很诡异！！

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

开始排查

页面样式错乱，那肯定是检查样式文件呗。

样式文件位置：

页面中有很多这样的样式文件引入，比如：

...

这样写没问题呀，之前一直好好的，很神奇，怎么会时不时样式错乱，开始怀疑自己的认知了。

尝试解决1）

因为项目中使用到了 Spring Boot，而 CSS 文件是放在 /resources/static/css 目录下，我考虑加上 static 试下：

...

结果还是不行。

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

Spring Boot 这些基础的东西我就不介绍了，不会的可以关注公众号Java技术栈，回复：boot，看我整理的系列详细教程，实战源码也上传到了 Github 仓库：

https://github.com/javastacks/spring-boot-best-practice

尝试解决2）

因为项目中使用到了 Thymeleaf（模板引擎），考虑使用 Thymeleaf 的标签 th:href 进行引入试试：

...

改了之后还是没什么用，然后用网页检查模式看页面生成的源码，发现 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 面试题整理好了，大家可以在Java面试库小程序在线刷题。

总结

这个坑其实和 Nginx 本身并没有关系，但却和 Nginx 息息相关，通过这个问题，也让我感觉到很多技术我们只知道简单的用，或者只知其一，不知其二，就比如说我上一个遇到的 Nginx 的坑：

Nginx 转发时的一个坑，运维居然让我背锅

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

但现实也很残酷，不可能全部技术都学得精深，时间精力也不允许，技术更新也快，但有一点，遇到问题了，我们要学会总结经验，避免下次再犯，这样也是一个知识的积累过程。

好了，今天的分享就到这里了，

Nginx 限流的天坑相关推荐

Nginx源码研究之nginx限流模块详解
这篇文章主要介绍了Nginx源码研究之nginx限流模块详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧高并发系统有三把利器:缓存.降级和限流: 限流的目的是通过对并 ...
sql server 配置管理器里为什么是32位_死磕 Nginx 系列：Nginx 限流配置
点击上方 Java后端,选择设为星标优质文章,及时送达限流算法:令牌桶算法算法思想是: 令牌以固定速率产生,并缓存到令牌桶中: 令牌桶放满时,多余的令牌被丢弃: 请求要消耗等比例的令牌才能被处 ...
nginx 限流，以及nginx直接返回json格式数据
2019独角兽企业重金招聘Python工程师标准>>> 高并发系统有三把利器用来保护系统:缓存.降级和限流今天我们这里说说限流.一般会在应用层配合redis做限流策略,这里我们聊聊 ...
NGINX限流的一些思考
来源:http://blog.csdn.net/soar_away/article/details/51980247 我们经常遇到这种情况, 服务器资源有限,但是客户端来的请求在不断的上涨, 为了保证 ...
一文搞懂Nginx限流(简单实现)
Nginx现在已经是最火的负载均衡之一,在流量陡增的互联网面前,接口限流也是很有必要的,尤其是针对高并发的场景.Nginx的限流主要是两种方式:限制访问频率和限制并发连接数. 限流(rate limi ...
nginx限流以及配置管理
nginx限流以及配置管理 nginx限流限制并发连接数 http状态码限制相同客户端的访问频次 burst nodelay limit_rate限制带宽 nginx配置管理自动索引 expir ...
高并发解决方案之“Nginx限流”
本文将分4个步骤讲解: 1.api压力测试 2.查看api响应性能 3.nginx限流进行优化 4.查看优化结果 1 api压力测试 1.1 安装压测工具 yum -y install httpd-t ...
Nginx 限流方法
Nginx 限流方法运维猿 2018-10-23 17:25:31 限流(rate limiting)是Nginx众多特性中最有用的,也是经常容易被误解和错误配置的,特性之一.该特性可以限制某个用户 ...
Nginx限流模块limit_req_zone、limit_req_conn
根据nginx官网提供的说法,有两种算法,一种是漏桶算法,一种是令牌桶算法. limit_req_zone 用来限制单位时间内的请求数目,以及速度限制. limit_req_conn 用来限制同一时间 ...
实战：使用Nginx限流
点击上方"方志朋",选择"设为星标" 回复"666"获取新整理的面试文章来源:深入浅出大型网站架构设计 Nginx不仅可以做Web服务器. ...

Nginx 限流的天坑

Nginx 限流的天坑相关推荐

最新文章

热门文章