granfana 使用cdn模式加速页面加载
grfana系列文章目录
`
配置文件
第五章 grafana使用CDN模式进行页面加速
这个是系列文章中的一部分
- grfana系列文章目录
- 前言
- 一、 需要将那部分放到CDN中
- 1 ） 首先需要明白Grafana到底什么部分需要缓存
- 2 ）怎么找？
- 3 ) 转移它
- 二、使用NGINX方式配置CDN
- 1）将刚才的那个目录放到nginx的web服务下面，注意目录的路径不要错
- 2）在nginx中创建配置部分
- 三、修改Grafana的配置文件
- 1） 配置文件的位置
- 2）需要修改的部分
- 四、解决跨域的问题
- 总结
前言
目前很多项目都在用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%左右，这个是保守估计。
granfana 使用cdn模式加速页面加载相关推荐
- chrome如何分析页面加载时间
以chrome为例,开发者模式中跟页面加载时间相关的是network面板. network 面板的 DOMContentLoaded和load 打开Network面板后,刷新页面,面板底部有这三个时间 ...
- 利用Medium的CDN来改善Feed的页面加载时间
前阵子 ,我决定,我想从我的中型出版的文章的很好的视觉房源出现在我的网站的底部. 方便地,我需要完成的大多数信息都存在于出版物的feed中. 对于许多中型出版物,可以按以下方式查找供稿: https: ...
- layui 如何动态加载局部页面_从输入URL到页面加载的过程？如何由一道题完善自己的前端知识体系！
前言 见解有限,如有描述不当之处,请帮忙指出,如有错误,会及时修正. 为什么要梳理这篇文章? 最近恰好被问到这方面的问题,尝试整理后发现,这道题的覆盖面可以非常广,很适合作为一道承载知识体系的题目. ...
- 从输入URL到页面加载的过程？由一道题完善自己的前端知识体系！
梳理主干流程 这道题上,如何回答呢?先梳理一个骨架. 知识体系中,最重要的是骨架,脉络.有了骨架后,才方便填充细节.所以,先梳理下主干流程: 从浏览器接收url到开启网络请求线程(这一部分可以展开浏览 ...
- 从输入url到页面加载完成中间都发生了什么？
从输入 URL 到页面加载完成的过程中都发生了什么事情? nwind | 24 May 2014 背景 本文来自于之前我发的一篇微博: 不过写这篇文章并不是为了帮大家准备面试,而是想借这道题来介绍计算 ...
- 试简述smtp通信的三个阶段的过程_从输入URL到页面加载的过程？《转载》
这是我看过这个问题最完整/优质的回答了,转来分享 知乎的排版不太好,可以浏览博客原文: http://gaoxiang.ga/index.php/archives/36/gaoxiang.ga 前言 ...
- 从输入URL到页面加载的过程？如何由一道题完善自己的前端知识体系！
前言 见解有限,如有描述不当之处,请帮忙指出,如有错误,会及时修正. 为什么要梳理这篇文章? 最近恰好被问到这方面的问题,尝试整理后发现,这道题的覆盖面可以非常广,很适合作为一道承载知识体系的题目. ...
- 前端性能优化:页面加载速度慢怎么办？
文章目录 前端性能优化 如何识别页面加载速度慢的原因 性能优化的方式 提高资源的请求速度 http缓存 --提升二次访问的响应速度 CDN缓存静态资源缓存 webpack的hash策略-文件资源缓存 ...
- instant.page —— 一个 JS 脚本实现网站预加载，提升页面加载速度
instant.page 使用即时预加载技术,在用户点击之前预先加载页面.当用户的鼠标悬停在一个链接上超过 65 毫秒时,浏览器会对此页面进行预加载,当用户点击链接后,就从预加载的缓存中直接读取页面内 ...
- Dns-prefetch DNS 预解析优化页面加载速度
Dns-prefetch DNS 预解析优化页面加载速度 浏览器访问一个链接时并不是直接将请求到网页对应的服务器上,而是先要做域名解析--将域名解析到网页对应的服务器 ip 地址,然后浏览器才能和服务 ...
最新文章
- 操作系统的八股文自述（持续更新）
- 万门大学倒闭了，童哲连夜跑路了
- 哪里可以学python编程-Python编程适合哪些人学？老男孩Python教程
- lvm的备份还原及修改UUID
- ExtJS MVC 学习手记3
- opencv-api convexityDefects
- HDU-基础搜索总结
- php图像处理缩略图,17.ThinkPHP 扩展库：图像处理--生成缩略图
- C++基础——有关引用的问题
- flink 入门及安装
- Google 的核心 Java 库 guava 常用工具类
- 最新php在线扒站程序源码分享
- linux下输入法终极解决方案
- jira权限设置-各个项目组查看不同项目
- 搞一下 SOA实战 | 01 SOA 开发流程实战
- 电商大数据“杀熟”套路有哪些
- react前端显示图片_react.js - 关于react引用本地静态资源图片的问题
- PMBOK第六版工具与技术:数据收集数据分析数据表现
- 每个开发人员都应该学习的5种编程语言（上）
- python做题记录之切西瓜