【Web Monitor】一个基于PHP+React+ANTD的前后端分离的服务器监控工具

由本社区发起的开源项目
回复
头像
YeLee
论坛版主
帖子: 26406
注册时间: 2008-08-13 8:48
系统: Fundu i64
来自: 东海硇州,一双管钥。
联系:

【Web Monitor】一个基于PHP+React+ANTD的前后端分离的服务器监控工具

#1

帖子 YeLee » 2021-06-28 22:36

开始之前还是先上一张界面截图吧,免得你们连我在说什么都不知道:
界面截图.jpg
由于gayhub被墙了,我暂时上传到gitee了,欢迎大家试用:

代码: 全选

git clone https://gitee.com/YeLee_CN/Web-Monitor.git
开始前先叨几句

之前买了台树莓派,刚开始还折腾得挺得劲的,后来太忙了,就扔在角落吃灰了。

最近,在树莓派上搭建了个开发环境,有时候设备会无缘无故出现各种问题,便想着装个软件监控设备状态,于是便想到了PI Dashboard。玩了一段时间之后,发现这东西还挺有趣的,看了他的源码之后,便萌生了一个自己造轮子的想法,Web Monitor便是这样诞生的。

前后端分离的想法

前面我们说到,Web Monitor是一款前后端分离的服务端监控工具,为什么这样说呢?

后端用PHP读取服务器状态,并生成JSON信息
前端用React负责页面的渲染工作
组件用ANT Design和ANTD Charts来展示数据

后端到底干了什么?

后端工作流程:

代码: 全选

前端向api.php发送请求
key.php验证k参数有效性
sysinfo.php根据POST过来的v参数返回JSON
Web Monitor后端包含3个文件api.php、key.php、sysinfo.php,都放在api目录下面了,PHP建议采用7.0以上版本。

代码: 全选

api.php提供前端访问接口,数据需前端通过POST请求,浏览器不可访问,错误码通过JSON方式返回。
参数v:一个JSON格式的数组,可请求的参数可参见sysinfo.php的说明
参数k:系统的验证用的Token,用于key.php的验证

key.php提供一个前端认证的Token,防止设备外部访问,(由于这部分算法问题,我暂时将这部分代码注释了)

sysinfo.php提供一个服务端的访问接口,目前可访问以下设备信息:
now 设备当前时间
uptime 设备开机时间,来源于 /proc/uptime
user 当前用户名
hostname 当前设备名
ip 当前设备的IP地址
port 当前访问的Web端口
memory 设备内存信息,来源于 /proc/meminfo
disk 存储设备信息,来源于 /proc/mounts
cpu CPU设备信息,来源于 /proc/cpuinfo
stat 系统和内核的统计信息,来源于 /proc/stat
loadavg CPU负载状态,来源于 /proc/loadavg
net 网络设备统计信息,来源于 /proc/net/dev
temp 设备温度信息,来源于 /sys/class/thermal/thermal_zone
cpufreq CPU核心频率,来源于 /sys/devices/system/cpu/cpu
前端到底干了什么?

前端工作流程:

代码: 全选

index.js入口初始化
Locales/AppRoot.jsx初始化语言环境
Locales/locales.jsx引入翻译环境文件
Components/main.jsx载入主框架,从服务器获取JSON
Components/main.jsx调用定时器,每1s更新状态信息
根目录下的package.json是项目依赖文件,在npm工作时需要从此获取更新包。public下面一些系统运行时的静态文件,favicon.ico是一个树莓派的图标文件。

前端的源代码都放在src目录下面了,下面我将依次进行说明这些文件是干嘛用的。

代码: 全选

index.js 程序的主入口
setupProxy.js 解决开发环境下跨域访问的,在部署正式环境时建议删除。
Locales/AppRoot.jsx 程序根节点代码,主要用来进行Locales初始化
Locales/locales.jsx react-intl通过它来获取Locales
Locales/xx_XX.jsx Locales文件
Components/main.jsx 主框架代码,负责从服务器获取信息,并载入子组件
Components/base.jsx 基础信息组件,主要展示数组base里面的静态信息
Components/cpu.jsx CPU信息组件,由于精力问题,目前仅展示CPU负载均衡信息,后续有时间再更新
Components/memory.jsx 内存信息组件,展示内存空间和交换空间信息
Components/network.jsx 网络信息组件,展示当前网络状态
Components/disk.jsx 存储设备组件,展示当前存储设备信息
Components/common.js 一个通用的组件,主要负责将存储格式转换为更易读的格式
Components/App.css CSS样式文件
一些技术细节

前端代码Components/main.jsx的base里面的now、uptime、user、hostname、port、ip等信息仅初始化时获取,memory、cpu、stat、loadavg、net、cpufreq每秒更新,disk、temp每10秒更新一次,并不存在频繁访问资源的问题。

在正式布署之前,建议在Components/main.jsx的箭头函数getData里面修改axios进行POST的路径,以免出现404错误。

由于开发环境存在跨域问题,所以我加了http-proxy-middleware中间件,不过正式环境下建议删除setupProxy.js,以免出现问题。

怎么安装?
将api目录下面的3个php文件拷贝到相应目录
终端进入项目当前目录,运行npm install,安装React的依赖文件
按照上文一些技术细节所提的内容,进行修改
将build生成的代码拷贝到服务端上,即可通过浏览器访问
这小东西目前只是一个雏形,当然还有很多地方不太完善,等我有空再把那些我觉得不太重要的功能更新。
当然,我知道这是我第一次提交代码,可能很多地方还不完善,这也许也是我最后一次提交代码了,鬼知道这家伙马上就要烂尾了,毕竟也没几个人用。
◎当我站在道德的高度上俯视别人的时候,发现自己是多么渺小。
♥执着但不偏激,反对而不排斥,坚决捍卫矛盾体的存在方式。
★★★天气预报★★★
fcitx-yatable一个可以使用的码表输入法
[教程]几个实例攻克软件编译难关
Gentoo Development Guide
字体相关
头像
qy117121
论坛版主
帖子: 50530
注册时间: 2007-12-14 13:40
系统: Winbuntu
来自: 志虚国乌由市
联系:

Re: 【Web Monitor】一个基于PHP+React+ANTD的前后端分离的服务器监控工具

#2

帖子 qy117121 » 2021-06-29 10:23

支持监控多个服务器吗?
渠月 · QY   
本人只会灌水,不负责回答问题
无聊可以点一下→ http://u.nu/ubuntu

Ubuntu 20.04 快速设置指南,请配合浏浏览器自动翻译使用

邮箱 chuan@ubuntu.org.cn
头像
qy117121
论坛版主
帖子: 50530
注册时间: 2007-12-14 13:40
系统: Winbuntu
来自: 志虚国乌由市
联系:

Re: 【Web Monitor】一个基于PHP+React+ANTD的前后端分离的服务器监控工具

#3

帖子 qy117121 » 2021-06-29 10:23

顺便,我用的 https://eheh.org 的监控
渠月 · QY   
本人只会灌水,不负责回答问题
无聊可以点一下→ http://u.nu/ubuntu

Ubuntu 20.04 快速设置指南,请配合浏浏览器自动翻译使用

邮箱 chuan@ubuntu.org.cn
头像
YeLee
论坛版主
帖子: 26406
注册时间: 2008-08-13 8:48
系统: Fundu i64
来自: 东海硇州,一双管钥。
联系:

Re: 【Web Monitor】一个基于PHP+React+ANTD的前后端分离的服务器监控工具

#4

帖子 YeLee » 2021-06-29 12:06

qy117121 写了: 2021-06-29 10:23 支持监控多个服务器吗?
目前暂不支持,不过理论上是支持的
◎当我站在道德的高度上俯视别人的时候,发现自己是多么渺小。
♥执着但不偏激,反对而不排斥,坚决捍卫矛盾体的存在方式。
★★★天气预报★★★
fcitx-yatable一个可以使用的码表输入法
[教程]几个实例攻克软件编译难关
Gentoo Development Guide
字体相关
回复