登录
  • 人们都希望被别人需要 却往往事与愿违
  • 不是具有中国特色的社会主义, 而是具有中国特色的社会达尔文主义!

为什么我的grafana无法用nginx反代呢?

建站运维 Benny小土豆 372次浏览 2312字 0个评论
文章目录[显示]

如果你想用nginx反代grafana,那么很有可能参考了官网文档Run Grafana behind a reverse proxy,看了一眼,非常简单,不就是改几个参数,加个location嘛!

“小case”,你对自己说到,十分钟解决。

那么在参考结束之后,你很有可能遇到这个错误。

为什么我的grafana无法用nginx反代呢?

 

随即你进行了搜索,问题还挺多,中文的英文的,然后自己不停地尝试,grafana和nginx的配置都快改花了,发现还是不行。于是两个小时过去了。这究竟是为什么呢?

作为一名有灵性的工程师,当你看到如图所示的画面时,应该会想到哪些事情呢?

  1. 这个橙色的文字,绝对不是Nginx的,看起来更像是grafana的,那么也就是说请求转发给了grafana
  2. 既然如此,那么看下控制台吧!

为什么我的grafana无法用nginx反代呢?

哟呵,怎么都是404呢,难道是由于一些路径的原因,导致proxy_pass的时候出错了?

于是你又一顿查,proxy_set_header等全都加上了,路径结尾带不带/也都排列组合了一圈,发现还是不行!😠

作为一名有灵性的工程师,此时自然就要想,难道是grafana有bug?把router_logging打开……此时你突然看到,这个文件名好奇怪啊,这么长。难道文件真的不存在吗?

为什么我的grafana无法用nginx反代呢?

内心无比刺痛,什么?!另一边的你,甚至拿出来了curl

~$ curl -L https://dmesg.app/grafana/public/build/app.4141596c10e564d57dfb.js
<html>
<head><title>404 Not Found</title></head>
<body>
<center><h1>404 Not Found</h1></center>
<hr><center>nginx</center>
</body>
</html>

~$ curl -L https://dmesg.app/grafana/public/build/1.txt
hello!

🤯😺😱

那zip文件呢?

$ curl -L https://dmesg.app/grafana/public/build/1.zip
a zip(not really)

那js呢?

~$ curl -L https://dmesg.app/grafana/public/build/1.js
<html>
<head><title>404 Not Found</title></head>
<body>
<center><h1>404 Not Found</h1></center>
<hr><center>nginx</center>
</body>
</html>
~$

🤬🤬🤬🤬

突然,你看到了一处这样的配置:

location ~ .*\.(js|css|woff)?$ {
    expires 30d;
}

这段的意思是,正则匹配,结尾是js、css和woff,expire设置成30天。于是你在脑海里迅速过了一遍nginx的location匹配优先级,好像似乎是正则比路径匹配的优先级要高。

于是你以迅雷不及掩耳盗铃之速把原先的配置

location /grafana/ {
    proxy_pass http://localhost:3000;
}

中的第一个/改成了~,也就是

location ~/grafana/ {
    proxy_pass http://localhost:3000;
}

然后restart或reload nginx,刷新页面,好了!此刻看看时间,天啊,三个小时过去了,快一点了……

也就是说,一个~价值三小时,如果按照时薪来算,这一笔,很值钱啊!

点评

其实以上就是我昨晚的完整经过,一开始的时候,大部分时间完全就是在“瞎🐱找死🐭”,当然网上提到的方案都是没用的,毕竟没有找到问题的根本原因。所以如果早点通过橙色的字体发现问题出在js 404,那么问题就应该会更快解决了。

哎呀年轻人👱‍♀️还是要学会通过现象看本质的,不要瞎猫碰上死耗子呀!

解释一下:如果你的nginx开启了css、js的cache,想在sub directory下反代grafana,那么按照官网的文档去做失败的概率是非常高的。

原因非常简单:js和css都404了。因为正则匹配的优先级高于path匹配,所以全被cache的location截胡了。解决方案也很简单,把grafana那段的/换成~,当然 ~/grafana/~ grafana/都是无所谓的啦,正则嘛!还不放心的话,再放到location开头。

当然了,需要注意的是,不仅仅是子目录时会发生这种情况,子域名时,只要设置了这种cache规则,那么就一定会出错的。

配置cache的人还不少,已经给官方发了PR,希望他们能及早修复吧。

完整配置和解释

grafana

# 只让grafana监听127,反代没必要监听0.0.0.0
http_addr =127.0.0.1

# 域名,都懂
domain = dmesg.app

# Grafana内部的一些url(比如警告的url)都是根据这个来的,其实可以看出来这里其实是格式化字符串,domain就是上面的那个
root_url= https://%(domain)s/grafana/

# 子目录就要true
serve_from_sub_path = true

nginx

# ~表示正则匹配,区分大小写
location ~grafana/ {
    proxy_pass http://localhost:3000;
}

location ~ .*\.(js|css|woff)?$ {
    expires 30d;
}

参考资料

Nginx location priority https://stackoverflow.com/questions/5238377/nginx-location-priority

 


文章版权归原作者所有丨本站默认采用CC-BY-NC-SA 4.0协议进行授权|
转载必须包含本声明,并以超链接形式注明原作者和本文原始地址:
https://dmesg.app/why-grafana-nginx.html
喜欢 (11)
分享:-)
Benny小土豆
关于作者:
If you have any further questions, feel free to contact me in English or Chinese.
发表我的评论(代码和日志请使用Pastebin或Gist)
取消评论

                     

去你妹的实名制!

  • 昵称 (必填)
  • 邮箱 (必填,不要邮件提醒可以随便写)
  • 网址 (选填)