#web-performance-monitoring-system 前端性能监控系统

• 实时统计访问页面真实性能分析
• 实时统计页面AJAX性能分析
• 实时统计访问页面脚本错误分析
• 实时统计页面所有资源加载性能分析
• 实时统计慢加载资源追踪
• 设置各项阀值，邮件通知，紧急修改维护
• 模拟单个http请求，并给出性能指标，可做接口测试
• 检查线上网页性能，给出详细性能指标

项目使用babel编译   
项目通过gulp-nodemon 实时编译刷新node服务
提供了mysql的封装函数 和案例 （我自己开发使用时做的）
提供了邮件发送 nodemailer 配置
提供了七牛云上传JDK

https秘钥部署方式参考：云服务器HTTPS实践，node.js + nginx https实践

如果项目不需要https部署，package.json中需要做如下操作
build命令 ：IS_HTTPS=FALSE
server命令：IS_HTTPS=FALSE

1、 直接启动app.js
pm2 start -i 2 --name web_performance app.js

2、 使用npm server命令 
pm2 start -i 2 --name web_performance npm -- run server

3、 使用npm pm2 命令
npm run pm2

http://blog.seosiwei.com/detail/19

https://github.com/wangweianger/web-report-sdk

https://github.com/wangweianger/zanePerfor

项目上传之后，比较受大家的关注，有些朋友不知道如何在本地正确的安装，让项目跑起来,鉴于此我在这里详细的说明项目安装步骤，希望对你有帮助。

• node.js v8.0(推荐)
• 本项目需要node.js支持async await的语法因此node需要7.6版本以上，建议使用node.js 8.0版本，推荐大家使用nvm安装node.js
• nvm github官网：https://github.com/creationix/nvm 有详细的安装教程
• linux系统的童鞋安装请参考：LINUX系统安装nvm 快速搭建Nodejs开发环境

• 备注：安装mysql时会给你默认账户、密码，有提示，自己记录下后期项目配置需要
• 官网下载地址：https://www.mysql.com/downloads/ 推荐大家直接百度搜索 mysql下载 关键词下载百度软件中心的mysql
• linux系统的童鞋安装请参考：阿里云ECS在linux系统下手动安装MySQL5.6
• 安装完mysql之后新建web-performance数据库，默认字符集选择：utf8mb4,默认排序规则选择：utf8mb4_bin,然后导入项目中的web-performance.sql文件

• cnpm install
• 因为项目使用了phantomjs 在安装依赖的时候会去国外下载资源，推荐有vpm的开vpm,没有vpm的就使用淘宝镜像源，或者使用cnpm

• 做完以上步骤之后你需要修改下项目的配置文件，即：src/config.js 中的 DB 配置，
• HOST配置填写为 localhost 或者你本地ip地址
• USER 和 PASSWORD 请填写你本地的mysql账户和密码，安装mysql时会给你默认账户、密码，有提示。

如果你已经做完以上4步，请运行 npm run dev,项目应该会正常的跑起来；

• 1.项目数据库中有一个默认用户账号为：zane 密码：123456
• 2.src/config.js 中的 七牛云根路径配置和用户邮箱配置暂时未用上，可以不管理，后期项目开发邮件预警的时候会用上
• 3.项目打包时配置 也就是gulpfile.js 会有config.js的配置替换，如果需要在线上运行，需要去留意
• 4.如果需要在linux系统上跑起来请参考：个人博客node.js，mysql 项目阿里云ECS部署完整流程介绍

• 1.dev 是开发模式，开发运行
• 2.build是线上生产模式,打包时运行
• 3.server是开启一个node服务，需要先bulid之后再运行
• 4.pm2是使用pm2来守护我们的node.js进程以及记录日志，需要本地安装pm2，linux用户需要当前角色有写入目录日志的权限
• 5.test-build此命令是直接本地打包直接发布到服务端，服务端需要有相应的接受脚本，此命令大家用不上

希望对前端性能监控有兴趣的有帮助，同时也希望大家有任何建议请给我反馈，同时我也会不断的更新优化迭代，有兴趣的请持续关注。

如果你对其api语法不了解可以关注：https://github.com/wangweianger/mysqls 项目，其中有完善的api文档说明

• 如果你的web服务为nginx，请加上如下配置，用以获取用户的真实ip

location / {
    #获取用户的真实ip
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    #代理的服务 
    proxy_pass    http://127.0.0.1:18088/;
}

开发环境：npm run dev

打包：npm run build

启动项目：npm run server

pm2启动方式：npm run pm2