wangweianger / zanePerfor翻译 / 编辑

最近提交:3天前
创建时间:2018.09.14

语言构成

JavaScript51.3%
HTML46.0%
CSS2.6%
Shell0.1%

README

zanePerfor一款完整、高性能、高可用的前端性能监控和统计平台

开发功能进度说明

  • 集成框架选型及其相关配置(已完成)
  • 主重数据库相关配置开发(已完成)
  • web网页sdk开发 (已完成)
  • web端数据库数据后端存储逻辑开发 (已完成)
  • web端网站性能数据,错误信息,资源加载信息后台逻辑开发(定时任务:已完成)
  • web端网站PV,UV,IP统计开发(定时任务:已完成)
  • ip地址库存储逻辑(多种缓存策略:本地文件缓存,redis缓存,mongodb缓存)(已完成)
  • web端上报脚本开发(已完成)
  • 分城市统计性能逻辑开发(已完成)
  • 浏览器端后台cms界面开发(已完成)
  • 微信小程序sdk开发 (已完成)
  • 微信小程序相关后端逻辑开发 (已完成)
  • 微信小程序后台cms界面开发(已完成)
  • 微信分城市统计性能逻辑开发(已完成)
  • 用户行为漏斗分析 即用户行为分析(已完成)
  • TOP性能统计(已完成)
  • 省市流量统计热力图分析(已完成)
  • 上报方式新增redis 消息队列(已完成)
  • 索引优化(已完成)
  • Mongodb副本集读写分离开发(已完成)
  • 数据库分表(即分集合)针对于apges,ajaxs,errors,resource,enviroment大数据量表分表,不同应用存储到单独的表中(已完成)
  • Mongodb集群配置 (已完成)
  • github第三方登录 (已完成)
  • 新浪微博第三方登录 (已完成)
  • 微信授权第三方登录 (已完成)
  • Mongodb集群分片开发(优化中)
  • 项目性能优化(优化中)
  • 邮件触发服务开发(已完成)
  • 每日日报邮件发送(已完成)
  • 所有预警相关业务开发(开发中)
  • Kafka消息队列的引入和使用 (已完成)

技术选型说明

  • egg.js, ejs, mongodb, redis, vue2, kafka

项目开发文档

项目说明

  • 项目已部署到正式环境,并已稳定运行一段时间,请放心使用。
  • 前期推荐使用单机数据库或者Mongodb副本集架构,后期根据自身需求考虑是否使用集群分片
  • 目前4核8G单机服务器大概能支撑每日50-100W的pv,8核16G单机服务器可支撑100W-500W的PV流量
  • 如果项目日PV超千万,需要Redis集群,Mongodb集群分片的部署方式
  • 项目后台查询性能增加合适的索引之后,千万以上的数据量可在100ms-2s之内查询出来,平均100-300ms(单机/副本集)

分支说明

master分支

  • 推荐使用
  • 项目master分支做了分表功能,即每新增一个应用都会把数据存放到自己的表中,这样很好的做到了横向的扩展,支持N个应用的同时查询也会比较快,因为查询的数据表中全是自己应用的数据
  • 此模式适合单机和副本集部署方式,因为表(集合)的名称不固定,如果要做集群分片模式会比较麻烦(应用多的情况),如果应用少,可新增一个应用之后针对新增应用的表做分片。
  • 此模式可做集群分片,只是分片操作可能会比较频繁,每增加一个应用,需要分片是就需要去设置分片。

onetable分支

  • onetable所有应用的数据存放于相同表中,因此应用多时数据量比较大,查询会相对于耗时一些
  • 基于所有应用数据存放在相同表中,此模式适合做集群分片,分片只需要在项目初始化时执行一次

浏览器端使用说明

使用SDK方式上报数据(推荐)

  • 使用web SDK进行数据上报,使用方式请参考 web-report-sdk SDK详情
  • 例如

npm引入使用方式

// 通用版本引入
import Performance form 'web-report'
// 使用
Performance({
    domain:'http://report.com/api/v1/report/web',
    add:{
        appId:'D3D9B9AA45B56F6E424F57EFB36B0XXX',
    }
})

// 按需引入
import {
  axiosReport,
  defaultReport,
  fetchReport,
  jqueryReport,
  noneReport,
} from 'web-report'
// 使用
defaultReport({
    domain:'http://report.com/api/v1/report/web',
    add:{
        appId:'D3D9B9AA45B56F6E424F57EFB36B0XXX',
    }
})

浏览器端上报SDK web-report-sdk:

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

微信小程序端使用说明

  • 直接下载sdk,引入到小程序的app.js最顶部
微信小程序 app.js头部引入sdk

const wxRepotSdk = require('./utils/wx-report-sdk.min');

new wxRepotSdk({
    domain:'http://test.com',
    add:{
        appId:'56F6E424F57EFB36B0XXX'
    }
})

小程序端上报SDK wx-report-sdk:

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

docker 安装配置环境(非必须)

  1. 安装并保证有 docker-compose 的环境

  2. 修改 start-docker-compose.sh 里的 hostIP 为外网 IP ⚠️ 不能是 127.0.0.1localhost

  3. docker-compose 启动方式

方式一:

# 项目所在目录
./start-docker-compose.sh

方式�二

export hostIP='自己的外网IP' && docker-compose up -d --build
  1. 启动 web 开发环境
npm run dev
  1. 启动 web start 环境 ⚠️ 修改 config/config.prod.js 里的 redis 配置
npm start 

讨论区

说说你的看法