✨概述
在使用grafana做页面嵌入的场景中，通常需要grafana与前端在同域下，方便鉴权、解决跨域。
Nginx代理Grafana后，就不能使用Grafana中默认配置的端口和路径进行访问，必须通过Nginx访问Grafana。
如果需要做Iframe嵌入自研系统时，存在鉴权问题，在同域名下可以使用IFrame添加Header形式进行鉴权。
在非同域名情况下，可以使用在Nginx中统一添加Header（存在一定的风险），由于鉴权都在Nginx中配置，所以只要拿到url就能直接访问。通过这种方式可以实现Grafana免登录访问，如果有这种需求可以采用这种方案。
🎯Nginx代理Grafana
📄Grafana配置文件修改
修改配置文件：
grafana/conf/default.ini在root_url后边添加路径/grafana（该路径可自定义，和nginx配置中保持一致即可）
# 后缀与nginx代理后缀保持一致
root_url = %(protocol)s://%(domain)s:%(http_port)s/grafana
# 允许跨域
allowed_origins = *
# 允许iframe嵌入
allow_embedding = true
🔊注意：
如果配置文件中修改了端口（
http_port）【默认为3000】，那么以下对应的nginx中的端口也要进行修改。
🧾nginx配置文件修改
Nginx代理grafana
配置nginx代理grafana，配置后只能通过nginx访问grafana，grafana单独访问就失效了。
# 代理Grafana
server{
listen 12300;
server_name 10.0.204.66;
charset utf-8;
location /grafana {
root html;
index index.html index.htm;
add_header 'Access-Control-Allow-Origin' '*';
add_header Access-Control-Allow-Methods GET,POST,OPTIONS,DELETE;
add_header 'Access-Control-Allow-Headers' 'userId,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
proxy_pass http://127.0.0.1:3000;
rewrite ^/grafana/(.*) /$1 break;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Host $host;
# websocket处理
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
# 处理grafana重定向问题， proxy_redict grafana默认路径 nginx代理路径
proxy_redirect http://localhost:3000 http://10.0.204.66:12300;
}
}
🔊注意：
grafana中有websocket使用，这里需要配置websocket的处理。proxy_http_version指定使用HTTP/1.1协议proxy_set_headerUpgrade以及Connection表示使用Upgrade头协议，将HTTP协议升级为WebSocket协议grafana中有重定向的场景（例如切换组织机构时），需要额外配置重定向proxy_redirect替换重定向的ip和端口。nginx配置说明rewrite ^/grafana/(.*) /$1 break;：匹配/grafana/下的所有，替换为正则中的第一个（正则表达式组的概念），break本条规则匹配完成后即终止，不在匹配后面的任何规则
Grafana免登录
通过在Nginx中实现鉴权操作，从而实现免登录功能。
grafana中配置apikey（以10.0.1版本为例）
- nginx转发配置
直接在nginx中鉴权，配置后url可直接访问，可以与主应用服务放在同一个server下。启动Authorization中的token参照第一步进行即可。
location /grafana {
root html;
index index.html index.htm;
add_header Access-Control-Allow-Methods GET,POST,OPTIONS,DELETE;
rewrite ^/grafana/(.*) /$1 break;
proxy_pass http://127.0.0.1:23000;
proxy_buffering on;
proxy_buffer_size 4k;
proxy_buffers 8 1M;
proxy_busy_buffers_size 2M;
proxy_max_temp_file_size 0;
proxy_connect_timeout 600s;
proxy_read_timeout 600s;
proxy_send_timeout 600s;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
# 授权，需要从grafana中配置获取
proxy_set_header Authorization "Bearer glsa_wX9BVN8AQmB70Z4Te1A30PwEs3Vp6jY7_b5309935";
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
⛳Grafana主题与组织
可以直接在url后添加参数theme=dark 修改主题颜色，例如：
取值：
dark 深色
light 浅色
🧱数据迁移
默认情况下，grafana数据存储在文件中，如果有多个环境配置问题，只要Grafana版本相同可以直接迁移数据文件。
文件地址/grafana-10.0.1/data/grafana.db
📖参考文档
- nginx代理后打开grafana页面If you‘re seeing this Grafana has failed to load its application files_nginx 代理grafana_privateobject的博客-CSDN博客
- 灵活应用Nginx Map：实战经验与实用方法
