共计 4514 个字符,预计需要花费 12 分钟才能阅读完成。
对于监控平台,民工哥在以往的文章中介绍过太多太多,仔细的读者都发现了。
不过,话说回来,监控零碎对于任何业务来说都是重中之重,部署实现之后,除了必要的逻辑优化与更新迭代,监控与报警显得更加重要。
往期介绍的【监控零碎】在这里。大家能够依据本人的理论生产环境与业务需要抉择适合的。
所以,明天民工哥又给大家安利一款 轻量级、酷炫的监控零碎。
简介
Webfunny 是一款轻量级前端异样监控和前端性能监控零碎,致力于帮忙前端工程师定位并解决各种线上问题,确保我的项目衰弱良好的运行。这是一款由前端工程师设计的软件,咱们深知前端的痛点,咱们心愿前端的工作更有效率。
Webfunny 反对千万级别日 PV 量,可能满足用户的各种场景需要。同时,针对不通过企业和用户,提供一对一的领导服务,满足更多业务需要。
Webfunny 专一于微信小程序、H5 前端、PC 前端线上利用实时监控,实时监控前端网页、前端数据分析、谬误统计分析监控和 BUG 预警,第一工夫报警,疾速修复 BUG!反对私有化部署,容器化部署!
环境要求
- 请装置 NodeJS,版本号:10.6.0 及以上。
- 日活十万 UV 以内:1 核 2G 内存及以上,单点即可。
- 日活百万 UV 左右:2 核 4G 内存及以上,单点即可。(为保障稳定性,倡议至多 2 核 2G 以上)
装置部署
第一步、下载 (clone) 最新部署包,初始化
# 本地克隆代码
$:git clone https://github.com/a597873885/webfunny_monitor.git
#应用码云仓库
$:git clone https://gitee.com/webfunnyMonitor/webfunny_monitor.git(github 网络不稳固,能够应用码云地址)#在我的项目根目录下执行初始化命令和装置命令
$:npm run init && npm install
#确认是否装置了 pm2,如果没有装置 pm2,请执行装置命令
$:npm install pm2 -g
第二步、配置数据库 (Mysql) 连贯
- 装置 Mysql 数据库
Mysql 装置教程:
- 创立数据库
数据库名称:webfunny_db。字符集设置:[Default Character set]:utf8、[Default Collation]:utf8_bin
-
数据库连贯配置
进入 webfunny_monitor/bin/mysqlConfig.js 文件中(如果没有数据库,能够分割我,应用测试数据库哦)module.exports = { write: { ip: 'xxx.xxx.xxx.xxx', // 近程 ip 地址 port: '3306', // 端口号 dataBaseName: 'webfunny_db', // 数据库名 userName: 'root', // 用户名 password: '123456' // 明码 } }
第三步、本地部署运行
1)此时此刻,本地配置曾经实现了,尝试运行命令$: npm run prd
如果提醒报错:Script already launched
,阐明程序曾经运行了,请应用$: npm run restart
2)关上浏览器,拜访地址:http://localhost:8010/webfunn… (初始化管理员账号,并登录)
3)创立新我的项目后,能够看到探针部署教程,实现部署。
第四步、生产环境部署
-
IP 地址或者域名配置(形式一)
进入 webfunny_monitor/bin/domain.js 文件中(留神,对应的端口号要保持一致),IP 地址配置形式:module.exports = { localServerDomain: 'xxx.xxx.xxx.xxx:8011', // 日志上报域名 localAssetsDomain: 'xxx.xxx.xxx.xxx:8010', // 前端页面域名 localServerPort: '8011', // 日志上报端口号 localAssetsPort: '8010', // 前端页面端口号 }
-
代理域名配置,去掉端口号(形式二)
# 应用代理域名的用户,请肯定要了解分明 Nginx 代理的办法,代理域名配置形式(端口号还是须要配置的):module.exports = { localServerDomain: 'www.baidu.com', // 日志上报域名 localAssetsDomain: 'www.baidu.com', // 前端页面域名 localServerPort: '8011', // 日志上报端口号 localAssetsPort: '8010', // 前端页面端口号 }
第五步、增加执行权限
失常状况下 createTable.sh, restart.sh
这两个脚本没有执行权限,须要用户手动受权。
linux、mac 零碎,须要在我的项目根目录下执行命令 $:chmod 755 createTable.sh,chmod 755 restart.sh
进行受权。
其余操作系统,请自行搜寻受权形式。【留神】如果不受权,可能无奈主动创立每天的数据库表。
目录构造
|
|──bin/ * 我的项目启动目录
| |
| |
| |—— domain.js * 域名配置文件
| |—— messageQueue.js * 音讯队列开关配置文件
| |—— mysqlConfig.js * mysql 数据库连贯配置文件
| |—— purchaseCode.js * 激活码配置文件
| |—— saveDays.js * 日志存储周期配置文件
| |—— webfunny.js * 服务启动文件
|
|
|——config/ * 根底配置目录(使用者能够不必关注)|
|——controllers/ * 业务逻辑代码(已加密)|
|——interceptor/ * 拦截器代码(监控到的异样都会通过拦截器,使用者能够自定义报警)| |
| |—— config/dingRobot.js * 钉钉机器人配置
|
|——lib/
| |
| |—— RabbitMq.js * 音讯对列创立文件
| |—— webfunny.min.js * 探针生成的模板文件
|
|——logs/
| |
| |——errors/ * 监控零碎运行谬误日志目录(排查部署问题)| |
| |——info/ * 一般日志打印目录
|
|——schema/ * 根底表数据库字段设计
|——schema_con/ * 须要分表的数据库字段设计
|
|——modules/
| |
| |—— models.js * 业务逻辑代码(已加密)|
|
|——routes/ * 路由、定时器
|
|——views/ * 监控零碎页面代码
|
|
|
|—— app.js * 程序入口文件
|—— Dockerfile.js * docker 部署配置文件
|—— restart.sh * 程序重启脚本文件(需设置此文件的执行权限)|—— 其余文件或目录,使用者大可不必关注
祝贺您,Webfunny 这样就部署好了,快去尝试部署到线上环境吧。
应用文档中文:https://www.webfunny.cn/des.html
我的项目源码地址:https://github.com/a597873885…
Nginx 代理配置
webfunny 的探针是依据监控我的项目的网址来判断的,你的我的项目地址用的是 https,上报接口也会切换到 https
http {
map $http_upgrade $connection_upgrade {
default upgrade;
'' close;
}
#用 80 端口代理 8011,8010 两个端口号(可反对 http)server {
listen 80;
server_name www.baidu.com;
root /home/jiangyingwei/webWorks/website;
index /home.html;
location /webfunny/ {
proxy_pass http://101.23.9.1:8010/webfunny/;
proxy_redirect default ;
}
# webfunny_server 数据接口等反向代理
location /server/ {
proxy_pass http://101.23.9.1:8011/server/;
proxy_connect_timeout 3000;
proxy_send_timeout 3000;
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
}
#用 443 端口代理 8011,8010 两个端口号(可反对 https)server {
listen 443 ssl;
server_name www.baidu.com; #网站域名,和 80 端口保持一致
root /home/jiang/webWorks;
index /index.html;
# ssl on;
ssl_certificate /etc/nginx/cert/3120409_www.baidu.com.pem; #证书公钥
ssl_certificate_key /etc/nginx/cert/3120409_www.baidu.com.key; #证书私钥
ssl_session_cache shared:SSL:1m;
ssl_session_timeout 5m;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_ciphers ECDH:AESGCM:HIGH:!RC4:!DH:!MD5:!3DES:!aNULL:!eNULL;
ssl_prefer_server_ciphers on;
# 数据接口等代理
location /server/ {
proxy_pass http://www.baidu.com:8011/server/;
proxy_connect_timeout 3000;
proxy_send_timeout 3000;
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
# 页面服务代理
location /webfunny/ {
proxy_pass http://www.baidu.com:8010/webfunny/;
proxy_redirect default ;
}
}
}
性能展现
成果展现
整体概览
数据大屏
一站式数据可视化展现平台,炫酷大屏,自在部署,实时数据,我的项目运行状态和衰弱状态尽收眼底。
经营数据
数据“采集 + 治理 + 剖析”智能一体化,获取经营要害数值,让您对我的项目经营情况一目了然。
用户数据
谬误数据统计
性能剖析
- 接口
- 页面
自定义埋点
小程序监控数据
以上就是明天给大家带来的分享内容,如有帮忙请顺手点个在看与转发朋友圈反对一下,感激大家。如果须要我的项目源码与具体的阐明文档,能够点击下方公众号名片,而后回复关键字 webfunny 监控 收费获取。