至于监控平台，米工哥在之前的文章中介绍的太多了，细心的读者已经发现了。然而，话虽如此，监控系统是任何企业的重中之重。部署完成后，除了必要的逻辑优化和更新迭代外，监控告警更为重要。之前介绍过的【监控系统】就来了。大家可以根据自己的实际生产环境和业务需求选择合适的。那么，今天米工哥就给大家安利一款轻巧炫酷的监控系统。简介Webfunny是一款轻量级的前端异常监控和前端性能监控系统，致力于帮助前端工程师定位和解决线上各种问题，保障项目的健康良好运行。这是一款由前端工程师设计的软件。我们深知前端的痛点，希望前端的工作更加高效。Webfunny支持每日千万级PV量，可满足用户在各种场景下的需求。同时，为非通行企业和用户提供一对一指导服务，满足更多业务需求。Webfunny专注于微信小程序、H5前端、PC前端在线应用实时监控，前端网页实时监控，前端数据分析，错误统计分析监控，BUG预警，第一时间报警，快速修复BUG！支持私有化部署，容器化部署！环境要求请安装NodeJS，版本号：10.6.0及以上。10万个UV以下DAU：1核2G内存及以上，一键搞定。每天约100万次UV：2核4G内存及以上，一键搞定。（为保证稳定性，建议至少2核2G以上。）安装部署第一步，下载（克隆）最新的部署包，并初始化#本地克隆代码$：gitclonehttps://github。com/a597873885/webfunny_monitor.git#使用码云仓库$:gitclonehttps://gitee.com/webfunnyMonitor/webfunny_monitor.git(github网络不稳定，可以使用码云地址)#执行初始化命令并项目根目录下的安装命令$:npmruninit&&npminstall#确认是否安装了pm2。如果没有安装pm2，请执行安装命令$:npminstallpm2-g第二步，配置数据库（Mysql）连接并安装Mysql数据库Mysql安装教程：创建数据库数据库名称：webfunny_db。字符集设置：【默认字符集】：utf8，【默认排序规则】：utf8_bin数据库连接配置进入webfunny_monitor/bin/mysqlConfig.js文件（没有数据库可以联系我使用测试数据库）模块.exports={write:{ip:'xxx.xxx.xxx.xxx',//远程ip地址port:'3306',//端口号dataBaseName:'webfunny_db',//数据库名userName:'root',//usernamepassword:'123456'//password}}第三步，本地部署运行1）此时本地配置已经完成，尝试运行命令$:npmrunprd如果报错：Scriptalreadylaunched，表示程序已经运行，请使用$:npmrunrestart2）打开浏览器访问地址：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',//logreportingportnumberlocalAssetsPort:'8010',//首页端口号}代理域名配置，去掉端口号（方法二）#使用代理域名的用户，请务必了解Nginx代理方法和proxy域名配置方法（端口号还需配置）：module.exports={localServerDomain:'www.baidu.com',//日志上报域名localAssetsDomain:'www.baidu.com',//front-端页域名localServerPort:'8011',//日志上报端口号localAssetsPort:'8010',//前端页端口号}第五步，添加执行权限一般情况下，两个脚本createTable.sh和restart.sh没有执行权限，需要用户手动授权。对于linux和mac系统，需要在项目根目录下执行命令$:chmod755createTable.sh,chmod755restart.sh进行授权。其他操作系统请自行搜索授权方式。【注意】如果不授权，可能无法自动创建每日数据库表。目录结构||──bin/*项目启动目录||||||——domain.js*域名配置文件||——messageQueue.js*消息队列开关配置文件||——mysqlConfig.js*mysql数据库连接配置文件||——purchaseCode.js*激活码配置文件||——saveDays.js*日志存储周期配置文件||——webfunny.js*服务启动文件|||——config/*基本配置目录（用户无需关注）||——controllers/*业务逻辑代码（已加密）||——interceptor/*拦截器代码（监听到的异常会经过拦截器，用户可以自定义告警）||||——config/dingRobot.js*钉钉机器人配置||——库/||||——RabbitMq.js*创建消息队列文件||——webfunny.min.js*探针文件生成的模板||——日志/|||——errors/*监控系统运行行错误日志目录（用于解决部署问题）||||—info/*常用日志打印目录||—schema/*基础表数据库字段设计|——schema_con/*需要分表的数据库字段设计||——模块/||||——models.js*业务逻辑代码（已加密）|||——routes/*路由、定时器||——views/*监控系统页面代码||||——app.js*程序入口文件|——Dockerfile.js*docker部署配置文件|——restart.sh*程序重启脚本文件（需要设置该文件的执行权限）|——其他文件或目录,用户不需要关注恭喜，Webfunny就这样部署了，去试试部署到线上环境使用中文文档：https://www.webfunny.cn/des.html项目源码地址：https://github.com/a597873885...Nginx代理配置webfunny的probe是根据监听的url判断的project，你的项目地址使用https，上报界面也会切换为httpshttp{map$http_upgrade$connection_upgrade{defaultupgrade;''关闭;}#使用80端口代理8011和8010端口号（支持http）server{listen80;server_namewww.baidu.com;root/home/jiangyingwei/webWorks/website;索引/home.html；位置/webfunny/{proxy_passhttp://101.23.9.1:8010/webfunny/;proxy_redirect默认值；}#webfunny_server数据接口等反向代理位置/server/{proxy_passhttp://101.23.9.1:8011/server/;proxy_connect_timeout3000；proxy_send_timeout3000；proxy_set_header主机$http_host;proxy_set_headerX-Real-IP$remote_addr;proxy_set_headerX-Forwarded-For$proxy_add_x_forwarded_for;proxy_set_headerX-Forwarded-Proto$scheme;}}#代理8011和8010，端口443（可以支持https）server{listen443ssl;硒rver_namewww.baidu.com;#网站域名，与80端口一致root/home/jiang/webWorks;索引/index.html；#ssl开启；ssl_certificate/etc/nginx/cert/3120409_www.baidu.com.pem;#证书公钥ssl_certificate_key/etc/nginx/cert/3120409_www.baidu.com.key;#证书私钥ssl_session_cacheshared:SSL:1m;ssl_session_timeout5m；ssl_protocolsTLSv1TLSv1.1TLSv1.2；ssl_ciphersECDH:AESGCM:HIGH:!RC4:!DH:!MD5:!3DES:!aNULL:!eNULL;ssl_prefer_server_ciphers开启；#数据接口代理位置/server/{proxy_passhttp://www.baidu.com:8011/server/;proxy_connect_timeout3000；proxy_send_timeout3000；proxy_set_header主机$http_host;proxy_set_headerX-Real-IP$remote_addr;proxy_set_headerX-Forwarded-For$proxy_add_x_forwarded_for;proxy_set_headerX-Forwarded-Proto$scheme;}#页面服务代理位置/webfunny/{proxy_passhttp://www.baidu.com:8010/webfunny/;代理服务器直接默认；}}}功能展示效果展示整体概览数据大屏一站式数据可视化展示平台，炫酷大屏，自由部署，实时数据，项目运行状态和健康状态一目了然运营数据数据》采集+管理+分析”智能整合获取关键运营值，让您对项目运营状况了如指掌。用户数据错误数据统计性能分析界面页面自定义埋点小程序监控数据以上就是今天为大家带来的分享内容。如果对您有帮助，请点击观看并转发朋友圈支持。谢谢。如需项目源码及详细文档，可点击下方公众号名片，回复关键词webfunny监控即可免费获取。
