%20(2).svg)
项目简介
本项目是基于 koa2、gulp 和 mysql 搭建的后台前端集成模板，专门用于前端性能监控。它能实时统计页面性能、AJAX 性能、脚本错误、资源加载性能等，还支持慢加载资源追踪。可以设置各项性能阈值，当性能不达标时通过邮件通知，便于及时维护。同时具备模拟 HTTP 请求进行接口测试以及检查线上网页性能并给出详细指标的功能。
项目的主要特性和功能
- 实时统计访问页面的真实性能、AJAX 性能、脚本错误和资源加载性能。
- 追踪慢加载资源。
- 可设置各项性能阈值，触发邮件通知。
- 模拟单个 HTTP 请求，给出性能指标用于接口测试。
- 检查线上网页性能并提供详细性能指标。
安装使用步骤
安装环境
安装 mysql，版本需 v5.6 以上，安装完成后新建 web - performance 数据库，默认字符集选 utf8mb4，默认排序规则选 utf8mb4_bin，然后导入项目中的 web - performance.sql 文件。
安装项目依赖
在项目根目录下执行 cnpm install ，由于项目使用了 phantomjs，安装依赖时可能需从国外下载资源，建议开启 vpm 或使用淘宝镜像源。
安装完成后配置
修改 src/config.js 中的 DB 配置，将 HOST 配置填写为 localhost 或本地 IP 地址，USER 和 PASSWORD 填写本地 mysql 的账户和密码。
运行项目
若已完成上述步骤，运行 npm run dev ，项目即可正常启动。其他运行命令说明如下：
- npm run build：线上生产模式，用于打包。
- npm run server：开启一个 node 服务，需先执行 build 再运行。
- npm run pm2：使用 pm2 守护 node.js 进程并记录日志，本地需安装 pm2，linux 用户需确保当前角色有写入目录日志的权限。
HTTPS 部署说明
若项目需要 HTTPS 部署，可参考 云服务器 HTTPS 实践，node.js + nginx https 实践 。若不需要，需在 package.json 中设置 build 命令和 server 命令的 IS_HTTPS = FALSE 。
nginx 反向代理配置
若使用 nginx 作为 web 服务，可添加以下配置以获取用户真实 IP：
js
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/;
}
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】