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

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

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

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

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

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

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

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

在搭建之初始，希望其服务器上安装 node、git，也可以先安装宝塔面板，其内置了git 、node和LMNP或AMNP的环境。

下载代码

这里默认其服务器上安装了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

本地部署

在项目更目录执行：chmod 755 restart.sh ，给 restart.sh 脚本文件执行权限 (linux、macOs环境下)

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

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

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

宝塔安装pm2

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

宝塔启动服务

宝塔映射

结语

这里需要说明下，部分云服务器需要在安全组里开放两个端口，这里项目使用的端口为8011和8010，其中8010为前端项目端口，8011为服务api的端口，另外，请在宝塔面板中安全 的防火墙里放于其两个端口，至此，整个项目部署完成了。