背景
目前随着数据和图表的逐渐增多,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-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
---
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