土豆不好吃

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

Benny小土豆
文章目录[显示]

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

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

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

 

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

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

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

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

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

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

内心无比刺痛，什么？！另一边的你，甚至拿出来了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
退出移动版