✨概述

在使用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_header Upgrade以及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参照第一步进行即可。

bash 复制代码

    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：实战经验与实用方法

Nginx代理Grafana，鉴权访问以及Grafan免登录访问

✨概述