共计 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 监控 收费获取。