webfunny前端监控系统服务器搭建

·  阅读 1131
webfunny前端监控系统服务器搭建

webfunny作为一个免费开源的前端监控系统,主要功能有:

  1. 监控JS报错、http接口报错、静态资源加载报错等;记录页面访问、点击事件、接口请求等行为日志;
  2. 统计PV/UV数据、用户7天留存数据、版本号/机型/地域分布数据
  3. 提供报错具体查找和定位功能、用户详细行为追踪与分析功能、用户网络环境评估功能
  4. 提供额外上报接口,上报自定义日志

再来看下作者给webfunny的定义是:

怎样定位前端线上问题,一直以来,都是很头疼的问题,因为它发生于用户的一系列操作之后。错误的原因可能源于机型,网络环境,复杂的操作行为等等,在我们想要去解决的时候很难复现出来,自然也就无法解决。

不多说,我们来几张webfunny的界面靓照

有这么多功能,是不是有点心动了呢,别急这里,还有他的官网github,各位看官可以去体验看下。

github上官方提供了一些安装方法,但有些不尽详细,这里,我以xx云作为服务器,使用宝塔面板(因为我是服务器小白,这个面板是国内比较好的)来搭建webfunny

在搭建之初始,希望其服务器上安装 nodegit,也可以先安装宝塔面板,其内置了gitnodeLMNPAMNP的环境。

  • 下载代码

这里默认其服务器上安装了git

//回到目录
cd /
//进入 www 目录
cd www
//新建tongji
mkdir tongji
//进入tongji目录
cd tongji
//下载代码
git clone https://github.com/a597873885/webfunny_monitor.git
复制代码
  • 项目配置

这里说下,如果是宝塔面板的话,请点击面板'文件'栏目,就可以看到一个Web的资源管理器界面,这里可以对文件进行各种操作

修改项目根目录下的config.js

/**
  * 请求接口域名, 比如:日志上报,日志查询相关的接口
  * 如果你的云服务器IP是:10.10.1.125, 你就应该配置成 //10.10.1.125:8011
  */
 const default_api_server_url = "//localhost:8011" 

/**
 * 网站的访问域名
 * 如果你的云服务器IP是:10.10.1.125, 你就应该配置成 //10.10.1.125:8010
 */
 const default_assets_url = "//localhost:8010"

复制代码

在项目根目录下,进入 config/db_local.js ,配置mysql数据库的连接配置

/**
 * 你可以在这个文件里配置你自己的数据库
 */
const Sequelize = require('sequelize');
const sequelize = new Sequelize('数据库名', '数据库用户名', '数据库用户密码', {
  //这里需要说下,如果你数据库放在本地可以使用localhost,但如果是使用远程数据库,这里可要改为您远程的数据库
  host: 'localhost',
  //这里是数据库的端口,原文件没有,这里是新增加的
  port:'3306',
  dialect: 'mysql',
  dialectOptions: {
    charset: "utf8mb4",
    supportBigNumbers: true,
    bigNumberStrings: true
  },
  pool: {
    max: 50,
    min: 0,
    acquire: 30000,
    idle: 10000
  },
  timezone: '+08:00' //东八时区
});

module.exports = {
  sequelize: sequelize
}
复制代码
  • 安装依赖
npm run install_packages
复制代码
  • 本地部署
  1. 在项目更目录执行:chmod 755 restart.sh ,给 restart.sh 脚本文件执行权限 (linux、macOs环境下)

  2. 在根目录下执行:npm run prd ,即可启动生产环境服务

  3. 常用命令如下: 执行命令: pm2 log 可查看启动日志 执行命令: pm2 list 可查已经启动的列表 执行命令: pm2 stop webfunny 停止当前服务 执行命令: pm2 delete webfunny 删除当前服务

完成后,希望重启下服务器

  • 宝塔安装pm2

在宝塔面板里选择软件商店->运行环境->pm2管理器

  • 宝塔启动服务

  • 宝塔映射

  • 结语

这里需要说明下,部分云服务器需要在安全组里开放两个端口,这里项目使用的端口为80118010,其中8010为前端项目端口,8011为服务api的端口,另外,请在宝塔面板中安全 的防火墙里放于其两个端口,至此,整个项目部署完成了。我的演示地址为http://webfunny.droom.cn/home.html

分类:
前端
标签:
分类:
前端
标签: