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如下：

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的区别

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

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即可）

[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

后台日志为：

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

# 打开损坏的数据库文件
.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

---
apiVersion: apps/v1
kind: Deployment
metadata:annotations: {}labels:app: nginx-grafananame: nginx-grafananamespace: tools
spec:progressDeadlineSeconds: 600replicas: 1revisionHistoryLimit: 10selector:matchLabels:app: nginx-grafanastrategy:rollingUpdate:maxSurge: 25%maxUnavailable: 25%type: RollingUpdatetemplate:metadata:creationTimestamp: nulllabels:app: nginx-grafananamespace: toolsspec:containers:- image: 'docker-cf.registry.cyou/nginx:1.22.0'imagePullPolicy: IfNotPresentname: nginxports:- containerPort: 80protocol: TCPresources: {}terminationMessagePath: /dev/termination-logterminationMessagePolicy: FilevolumeMounts:- mountPath: /etc/nginx/conf.d/name: nginx-configreadOnly: true- mountPath: /tmpname: storagednsPolicy: ClusterFirstrestartPolicy: AlwaysschedulerName: default-schedulersecurityContext: {}terminationGracePeriodSeconds: 30volumes:- configMap:defaultMode: 420name: grafana-nginxname: nginx-config- name: storagepersistentVolumeClaim:claimName: pvc-grafana---
apiVersion: v1
kind: Service
metadata:annotations: {}labels:app: nginx-grafananame: nginx-grafananamespace: tools
spec:internalTrafficPolicy: ClusteripFamilies:- IPv4ipFamilyPolicy: SingleStackports:- port: 80protocol: TCPtargetPort: 80selector:app: nginx-grafanasessionAffinity: Nonetype: ClusterIP---
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:annotations: {}name: nginx-grafananamespace: tools
spec:ingressClassName: nginxrules:- host: xxxxxxxhttp:paths:- backend:service:name: nginx-grafanaport:number: 80path: /pathType: Prefixtls:- hosts:- xxxxxsecretName: xxxxx

configmap.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-nginxnamespace: tools