Flask + echarts 轻松搞定 nginx 日志可视化(下)

本文涉及的产品
日志服务 SLS,月写入数据量 50GB 1个月
简介: 最近,线上的业务系统不太稳定,需要分析下访问情况,能拿到的数据只有 nginx 服务器的访问日志,不过难不倒我,用合适的工具,分分钟做出图形化展示,看看怎么做的吧

数据展示

从头利用 Flask 和 echarts 做数据展示是可以的,不过需要处理更多的细节

如果利用一些框架,快速做展示,然后再做局部的个性化调整

这里用到的框架是 TurboWay 的 bigdata_practice,虽然功能比较单一,结构不太灵活,不过用来搭建一个可用的数据展示系统还是没问题的,重要的是可以通过源码学习构建思路的方法

bigdata_practice git 地址为:https://github.com/TurboWay/bigdata_practice.git

将其 clone 到本地

git clone https://github.com/TurboWay/bigdata_practice.git

然后按照依赖模块,在 bigdata_practice 文件夹中,有个 requirements.txt,里面列了项目所依赖的库和组件

关于如何构建 requirements.txt 文件,可参考 《部署 Flask 应用

进入 bigdata_practice 文件夹,用 pip 安装依赖:

pip install -r requirements.txt

注意:最好使用虚拟环境安装,如何创建虚拟环境,可参考这篇文章

安装依赖之后,就可以启动 Flask 服务了

python app.py
 * Serving Flask app "app" (lazy loading)
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: on
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: 137-055-644
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

如果一切正常,可以访问 localhost:5000,查看数据展示效果

这里对项目中的需要定制的部分做下说明

在 ironman 目录下,app.py 为 Flask 服务主代码,其中定义了系统的访问路径,比如首页、线图、饼图等,这里可以根据自己的需求添加或删改

每个访问路径对应一个页面模板,模板文件存放在,templates 文件夹下,如果需要调整菜单,需要对每个模板页面中的菜单部分进行修改,以调整菜单项目以及被激活的菜单

data.py 定义了展示数据的读取接口,相当于一个数据层,依赖于 nginx_log_data.py,将数据设置为,方便展示的结构,如果需要展示更多的图形,需要根据展示效果,修改或添加新的数据接口

nginx_log_data.py 从 Excel 文件中读取需要展示的数据,Excel 中的数据,就是 数据分析 部分得到的结果,这里利用 pandas 读取 Excel 的功能,如果需要展示更多的分析数据,可以在这里添加数据读取结果,另外通过调整 data.py 以及相应的页面模板文件,将数据得以展示

这里,我们就 24小时访问趋势、客户端占比以及用户分布做了展示,效果如下:


0.jpg

24小时访问趋势


1.jpg

客户端占比

2.jpg

用户分布

实践

下载源码后,先安装项目依赖

pip install -r requirements.txt

示例用的 nginx 访问日志,在 nginx_access.zip 压缩包里,先解压到当前目录

然后申请百度API,获取到 ak,修改到 analyse\baidu_api.py 的 13 行

将命令行切换到代码目录下,否则可能出现文件找不到的错误

执行数据分析脚本:

python .\analyse\main.py

最后启动 Flask 服务:

python .\ironman\app.py

总结

今天利用 pandas、Flask、echarts 对 nginx 服务器的访问日志做了简单分析和展示,完成任务的同时,学习和实践了如何通过一些简单的工具和方法构造一个数据展示平台的过程

文章主要说明了构建思路和需要注意的部分,具体细节,请下载示例代码,运行,同时欢迎交流探讨


相关实践学习
日志服务之使用Nginx模式采集日志
本文介绍如何通过日志服务控制台创建Nginx模式的Logtail配置快速采集Nginx日志并进行多维度分析。
目录
相关文章
|
2月前
|
监控 应用服务中间件 定位技术
要统计Nginx的客户端IP,可以通过分析Nginx的访问日志文件来实现
要统计Nginx的客户端IP,可以通过分析Nginx的访问日志文件来实现
208 3
|
4月前
|
分布式计算 资源调度 数据可视化
Hadoop-06-Hadoop集群 历史服务器配置 超详细 执行任务记录 JobHistoryServer MapReduce执行记录 日志聚合结果可视化查看
Hadoop-06-Hadoop集群 历史服务器配置 超详细 执行任务记录 JobHistoryServer MapReduce执行记录 日志聚合结果可视化查看
78 1
|
4月前
|
数据可视化
Tensorboard可视化学习笔记(一):如何可视化通过网页查看log日志
关于如何使用TensorBoard进行数据可视化的教程,包括TensorBoard的安装、配置环境变量、将数据写入TensorBoard、启动TensorBoard以及如何通过网页查看日志文件。
389 0
|
6月前
|
应用服务中间件 nginx
nginx error日志 client intended to send too large body: 1434541 bytes 如何处理?
【8月更文挑战第27天】nginx error日志 client intended to send too large body: 1434541 bytes 如何处理?
512 6
|
6月前
|
应用服务中间件 Linux nginx
在Linux中,如何统计ip访问情况?分析 nginx 访问日志?如何找出访问页面数量在前十位的ip?
在Linux中,如何统计ip访问情况?分析 nginx 访问日志?如何找出访问页面数量在前十位的ip?
|
6月前
|
数据可视化 前端开发 JavaScript
Echarts英雄联盟可视化大屏(记得收藏)
Echarts英雄联盟可视化大屏(记得收藏)
|
6月前
|
数据可视化 前端开发 JavaScript
Echarts+JS实现农业指挥舱可视化大屏!!附源码!!
Echarts+JS实现农业指挥舱可视化大屏!!附源码!!
|
6月前
|
数据可视化 前端开发 JavaScript
【Echarts大屏】智慧医疗可视化大屏(新手必用)
【Echarts大屏】智慧医疗可视化大屏(新手必用)
|
6月前
|
数据可视化 前端开发 JavaScript
Echarts+JS实现数据分析可视化大屏!!附源码!!
Echarts+JS实现数据分析可视化大屏!!附源码!!
|
6月前
|
数据可视化
【Echarts大屏】智慧门店可视化大屏
【Echarts大屏】智慧门店可视化大屏