grafana加载缓慢解决方案

背景

目前随着数据和图表的逐渐增多，Grafana 页面加载速度明显变慢，严重影响了用户体验，几次都有骂娘的冲动=.=，因此我们需要对 Grafana 进行优化，以提升加载性能。

对于速度优化，我们可以从以下方面进行入手：

优化前端资源加载

使用反向代理和压缩 ：通过 NGINX 或其他反向代理服务器启用 gzip 压缩和缓存静态资源，减少页面加载的时间。

静态资源缓存：确保静态资源如 CSS、JS 等在浏览器中缓存，以避免每次加载都重新获取这些资源。
优化grafana server端服务器资源

增加服务器性能：检查服务器的 CPU、内存和 I/O 是否有瓶颈，适当增加服务器资源配置。

调整 Grafana 服务器配置 ：增加 Grafana 的 concurrent_requests_limit 设置，允许更多的并发请求。
数据库优化

如果你使用的是 Grafana 自己的 sqlite 或 MySQL/PostgreSQL，请确保这些数据库被适当优化，数据库性能问题也可能导致慢加载。
分离数据源

多实例 Prometheus：如果你使用的是 Prometheus 数据源，可以考虑使用多个 Prometheus 实例来分担负载，特别是如果你的查询数据量很大。
优化数据源查询

减少查询时间范围：设置默认时间范围为较短的时间段（如过去 5 分钟或 15 分钟），以减少加载时的数据量。

使用高效的数据源：检查你的数据源（如 Prometheus 或 Elasticsearch）是否有性能瓶颈。数据源的响应速度慢会直接影响 Grafana 的加载速度。

优化查询 ：确保你的查询尽可能高效，避免不必要的复杂计算或过滤条件。使用 rate() 或 avg_over_time() 等函数优化大数据量的查询。
检查网络延迟

这些方案从易到难顺序如下：检查网络延迟 < 优化数据源查询 < 优化grafana server端服务器资源 < 分离数据源 < 优化前端资源加载 < 数据库优化

目前我遇到的问题是网络没有延迟，数据源采集到的数据量不大，使用了多个prometheus实例，而且grafana server端内存使用率不到 30% ，所以只剩两个选择了，一个是前端资源优化，一个是数据库优化

数据库优化涉及到一个备份迁移的过程，感觉相对来说复杂点，所以尝试了一下优化grafana前端资源

本篇文章主要涉及的是优化grafana前端资源

实践

下面内容是基于docker的方式进行演示

缓存哪部分内容

grafana静态文件的目录是在/usr/share/grafana/public

我们需要将这部分内容放到缓存中或者CDN或者OSS中

由于CDN和OSS都需要花钱，我们暂时就用nginx来做一个类似缓存的功能

注意事项：

这里我建议直接在正在运行的grafana容器中把这个public包下载下来（想办法下载，比如压缩后下载，docker cp也行），因为grafana运行了很长时间，里面或多或少会新增一些js文件，而这些文件，是在官方纯净版public是没有的

官方纯净版：Download Grafana | Grafana Labs 选择对应的版本，下载window版本，解压后里面有public文件

nginx操作

部署一个nginx，将public静态文件夹放到nginx下面

default.conf如下：

nginx 复制代码

server {
    listen       80;
    listen  [::]:80;
    server_name  xx.xx.xx;
    
    location /grafana-oss/9.5.7/public/ {
        alias   /tmp/public/;
        
        # 跨域配置
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
 
        autoindex on;
        autoindex_exact_size on;
        autoindex_localtime on;
    }
    error_page   500 502 503 504  /50x.html;
    
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
  }

内容解释

location 必须是/grafana-oss/你的grafana版本/public/，因为grafana后台请求时，这些是它源码里面携带的地址，你自己改不了

alias /tmp/public/ 这个路径是下载下来的public 放在 nginx容器里面的某个位置（我这里是/tmp/public/） ，可以自定义，当然你也可以是用root，两者的区别：nginx 中location中root和alias的区别

配置完成后，执行下面命令，进行热加载（如果你选择重启容器，下面命令可以不执行）

bash 复制代码

nginx -t # nginx校验
nginx -s reload  # nginx热加载，不用启动容器

接下来验证一下：

访问地址：域名/grafana-oss/9.5.7/public

修改grafana配置文件

配置文件的位置一般在：/etc/grafana/grafana.ini

在[server]下增加以下内容 cdn_url = https://xxx 这个是刚刚nginx的地址（https://ip:port即可）

nginx 复制代码

[analytics]
check_for_updates = true
[grafana_net]
url = https://xxx
[log]
mode = console
[paths]
data = /var/lib/grafana/
logs = /var/log/grafana
plugins = /var/lib/grafana/plugins
provisioning = /etc/grafana/provisioning
[server]
domain = xxxxx
root_url = https://xxxx
cdn_url = https://xxx
[auth.gitlab]
enabled = true
allow_sign_up = true
...
[database]
type=sqlite3
cache_mode = shared

注意，这里你的grafana地址是https的话，建议你nginx也是https,因为https跳转http的话会有点问题

配置完成之后，重启grafana容器即可

验证

此时打开grafana，如果发现地址是修改后的nginx地址，即修改成功

如果是404的话，有下面几个原因：

public没有相对应的文件；
nginx location有问题，或者alias有问题；
跨域问题

拓展

修复sqlite3数据库

在替换完成之后，我在保存图表的过程报错，error saving dashboard failed to save dashboard

后台日志为：

tex 复制代码

logger=context userId=0 orgId=0 uname= t=2024-09-20T02:58:49.667754459Z level=info msg="Request Completed" method=GET path=/api/live/ws status=401 remote_addr=103.90.188.115 time_ms=11 duration=11.749188ms size=27 referer= handler=/api/live/ws
logger=context userId=1 orgId=1 uname=admin t=2024-09-20T02:58:49.893549608Z level=error msg="Failed to save dashboard" error="saving dashboard failed: database disk image is malformed" remote_addr=xxxxx traceID=
logger=context userId=1 orgId=1 uname=admin t=2024-09-20T02:58:49.893663102Z level=error msg="Request Completed" method=POST path=/api/dashboards/db/ status=500 remote_addr=xxx time_ms=101 duration=101.326151ms size=51 referer="https://grafana.ljdong.net/d/ea7794xxxxfrom=now-30m&orgId=1&to=now" handler=/api/dashboards/db

注意看，他有一个database disk image is malformed，这个代表是sqlite3文件数据库损坏了，所以保存不了

解决方案：

修复sqlite数据库
切换mysql或者其他数据库（更稳定）
权限问题

修复sqlite数据库的方案：

https://www.sqlite.org/download.html 网站上下载 sqlite-tools 工具

解压上面的压缩包，并在命令行模式下进入该目录运行 sqlite3.exe

bash 复制代码

# 打开损坏的数据库文件
.open d:/grafana.db
# 进行检测
PRAGMA integrity_check;
# 设置导出文件为 tmp.sql
.output d:/tmp.sql
# 将 grafana.db 中的内容以 sql 方式导出到 tmp.sql
.dump 
# 创建 temp.db 数据库
.open d:/temp.db 
# 从 tmp.sql 中导入数据
.read d:/tmp.sql 
# 退出
.quit 


# temp即为修复好的数据库

还有一种方案是使用SQLite Expert Professional 工具提供的 repair 来修复 db 文件，这种方案我没试通，感兴趣的可以试试

k8s部署nginx脚本

方便测试

deployment.yaml

yaml 复制代码

---
apiVersion: apps/v1
kind: Deployment
metadata:
  annotations: {}
  labels:
    app: nginx-grafana
  name: nginx-grafana
  namespace: tools
spec:
  progressDeadlineSeconds: 600
  replicas: 1
  revisionHistoryLimit: 10
  selector:
    matchLabels:
      app: nginx-grafana
  strategy:
    rollingUpdate:
      maxSurge: 25%
      maxUnavailable: 25%
    type: RollingUpdate
  template:
    metadata:
      creationTimestamp: null
      labels:
        app: nginx-grafana
      namespace: tools
    spec:
      containers:
        - image: 'docker-cf.registry.cyou/nginx:1.22.0'
          imagePullPolicy: IfNotPresent
          name: nginx
          ports:
            - containerPort: 80
              protocol: TCP
          resources: {}
          terminationMessagePath: /dev/termination-log
          terminationMessagePolicy: File
          volumeMounts:
            - mountPath: /etc/nginx/conf.d/
              name: nginx-config
              readOnly: true
            - mountPath: /tmp
              name: storage
      dnsPolicy: ClusterFirst
      restartPolicy: Always
      schedulerName: default-scheduler
      securityContext: {}
      terminationGracePeriodSeconds: 30
      volumes:
        - configMap:
            defaultMode: 420
            name: grafana-nginx
          name: nginx-config
        - name: storage
          persistentVolumeClaim:
            claimName: pvc-grafana

---
apiVersion: v1
kind: Service
metadata:
  annotations: {}
  labels:
    app: nginx-grafana
  name: nginx-grafana
  namespace: tools
spec:
  internalTrafficPolicy: Cluster
  ipFamilies:
    - IPv4
  ipFamilyPolicy: SingleStack
  ports:
    - port: 80
      protocol: TCP
      targetPort: 80
  selector:
    app: nginx-grafana
  sessionAffinity: None
  type: ClusterIP

---
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  annotations: {}
  name: nginx-grafana
  namespace: tools
spec:
  ingressClassName: nginx
  rules:
    - host: xxxxxxx
      http:
        paths:
          - backend:
              service:
                name: nginx-grafana
                port:
                  number: 80
            path: /
            pathType: Prefix
  tls:
    - hosts:
        - xxxxx
      secretName: xxxxx

configmap.yaml

yaml 复制代码

---
apiVersion: v1
data:
  default.conf: |
    server {
        listen       80;
        listen  [::]:80;
        server_name  xxxx;
    
        location /grafana-oss/9.5.7/public/ {
            alias   /tmp/public/;
    
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
    
            autoindex on;
            autoindex_exact_size on;
            autoindex_localtime on;
        }
        error_page   500 502 503 504  /50x.html;
    
        location = /50x.html {
            root   /usr/share/nginx/html;
        }
      }
kind: ConfigMap
metadata:
  name: grafana-nginx
  namespace: tools