granfana 使用cdn模式加速页面加载

grfana系列文章目录

`
配置文件
第五章 grafana使用CDN模式进行页面加速

---

---

前言

  目前很多项目都在用Grafana来进行系统报告的展示。不管是使用Grafana自带的界面还是嵌入式的显示，
都会遇到一个问题就是页面在加载时的缓慢问题。（毕竟很多用户都要求页面在15-30秒完成初始化加载）

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、 需要将那部分放到CDN中

1 ） 首先需要明白Grafana到底什么部分需要缓存

需要缓存的部分是发布的包，容器

2 ）怎么找？

在本文中使用的是docker方式安装的Grafana，和实际install安装的方式是一样的。在这里使用的Grafana的版本是8.5.2
存放容器的目录:/usr/share/grafana/public
红色框的部分需要放到CDN服务器上的部分就是这个。

3 ) 转移它

二、使用NGINX方式配置CDN

1）将刚才的那个目录放到nginx的web服务下面，注意目录的路径不要错

格式为：/grafana-oss/版本号（我的版本是8.5.2）/public/
注意后面的public不要忘记

2）在nginx中创建配置部分

server {
    listen       80;
    listen  [::]:80;
    server_name  192.168.1.122;

    access_log  /var/log/nginx/host.access.log  main;
    error_log /var/log/nginx/host.error.log warn;
    root /var/www/grafana/cdn; #这里是文件所在的目录

    location ~ .*\.(jpg|png|ico)(.*){
        expires 30d;
    }
    location ~ .*\.(js|css)(.*){
        expires 7d;
    }

    location /{
    add_header Access-Control-Allow-Origin *; # 这个就是解决跨域的语句
    autoindex on;
        autoindex_exact_size on;
        autoindex_localtime on;
        # proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        # proxy_set_header X-Forwarded-Proto $scheme;
        # proxy_set_header X-Forwarded-Port $server_port;
    }
}

修改完配置使用命令热加载

nginx -s reload

这是结果

三、修改Grafana的配置文件

1） 配置文件的位置

/etc/grafana

2）需要修改的部分

#################################### Server ####################################
[server]
# Protocol (http, https, h2, socket)
protocol = http #这里设置为使用http方式访问

# The ip address to bind to, empty will bind to all interfaces
;http_addr =

# The http port  to use
http_port = 3000  # 设置http的端口号为3000（这里是对外服务的端口）

# The public facing domain name used to access grafana from a browser
domain = localhost

# Redirect to correct domain if host header does not match domain
# Prevents DNS rebinding attacks
enforce_domain = false

# The full public facing url you use in browser, used for redirects and emails
# If you use reverse proxy and sub path specify full url (with sub path)
root_url = %(protocol)s://%(domain)s:%(http_port)s/ #（	去掉前面的分号）

# Serve Grafana from subpath specified in `root_url` setting. By default it is set to `false` for compatibility reasons.
serve_from_sub_path = true  # 这个一定要打开（去掉前面的分号和改成true）

# Log web requests
router_logging = false

# the path relative working path
static_root_path = public

# enable gzip
;enable_gzip = false

# https certs & key file
;cert_file =
;cert_key =

# Unix socket path
;socket =

# CDN Url
cdn_url = http://192.168.1.122:1341 #（这里是刚才配置的cdn的路径，由于我们给的是跟路径，所以这里就是到端口号就好了）

# Sets the maximum time using a duration format (5s/5m/5ms) before timing out read of an incoming request and closing idle connections.
# `0` means there is no timeout for reading the request.
;read_timeout = 0

四、解决跨域的问题

跨域的问题，修改NGINX中的配置文件，看里面的跨域解决的那句话

总结

使用cdn来存储所有的js和公共部分速度大约可以提升10%左右，这个是保守估计。