8

ElasticSearch和Gome-error-report的安装教程

 3 years ago
source link: https://zhuanlan.zhihu.com/p/26365046
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

ElasticSearch和Gome-error-report的安装教程

前端开发话题下的优秀回答者
之前专栏写了前端监控系统的落地文章，但是其实看了跟没看一个卵用，主要是没有实际的落地具体教程，如果你想使用GER项目，还必须要安装ElasticSearch和ger-server这2个项目，那么我就从实战出发，分享一下，如果你要自己做一套这个系统，一步一步要怎样来。

一，安装java jdk

因为ElasticSearch依赖java jdk，首先下载对应系统的jdk：Java SE Development Kit 8

下载完毕后jdk-8u131-linux-x64.tar.gz解压缩到/usr/java 目录，没有就创建一个。

$ tar -zxvf jdk-7u40-linux-i586.tar.gz
$ mv jdk-7u40-linux-i586 /usr/java
$ vim /etc/profile

在结尾输入：

JAVA_HOME=/usr/java
CLASSPATH=.:$JAVA_HOME/lib.tools.jar
PATH=$JAVA_HOME/bin:$PATH
export JAVA_HOME CLASSPATH PATH

最后再让配置文件生效，检查安装是否生效。

$ source /etc/profile
$ java -version

二，安装ElasticSearch

安装完毕java之后就可以安装ElasticSearch了，安装方法也十分简单，首先下载解压，GER-server依赖固定版本的ElasticSearch，大家下载2.3.1版本 Elasticsearch 2.3.1

下载完毕后开始配置安装：

$ curl -L -O https://download.elastic.co/elasticsearch/release/org/elasticsearch/distribution/tar/elasticsearch/2.3.1/elasticsearch-2.3.1.tar.gz
$ unzip elasticsearch-2.3.1.zip
$ cd  elasticsearch-2.3.1

安装完毕后启动ES，-d为后台运行：

$ ./bin/elasticsearch -d

安装完毕后并启动，需要做一个template，执行下面命令即可：

$ curl -XPUT 127.0.0.1:9200/_template/template_1 -d '{"template":"logstash-web_access*","mappings":{"logs":{"properties":{"@timestamp":{"type":"date"}}}}}'

三，安装GER-server

$ git clone https://github.com/gomeplusFED/GER-server.git
$ git submodule init && git submodule update
$ npm install -d && cd public/GER-UI/ && npm install -d

因为是前后端分离的项目所以需要到2个目录中都安装一遍项目依赖。

四，启动GER-server

$ cp config.default.js config.js
$ cp plugin/user.default.json plugin/user.json
$ npm start

先把项目的配置文件和用户权限文件拷贝一份，然后可以自己稍作修改，也可以不修改，直接使用默认的配置，具体配置可见default文件。

然后使用npm start启动项目，如果一切正常就没有问题了。

五，使用PM2启动GER-server项目

$ pm2 start "/usr/local/bin/npm" --name "GER" -- start

然后访问127.0.0.1:8888 即可访问项目了。

六，安装GER收集前端错误

六.1 源码方式安装最新的代码，也可以做扩展和pr：

$ git clone https://github.com/gomeplusFED/GER.git
$ cd GER && npm install -d && npm run build
$ ls dist
$ ger.js  ger.min.js

dist目录下即为ger的压缩和未压缩版，也可以自己修改lib目录中的文件然后重新build，载入方式参见：gomeplusFED/GER

这里需要注意的是，如果你的项目需要兼容ie78，则需要引入babel的polyfill，如果是移动项目或者不兼容ie7，8的则不需要：

<!--[if IE]>
<script type="text/javascript" src="http://cdn.bootcss.com/babel-polyfill/6.23.0/polyfill.js"></script>
<![endif]-->

然后加载方式因为是使用rollup的umd方式，支持cmd，amd，es还有iife方式的，可以根据需要自行引入页面。

然后根据文档初始化配置，编写初始化函数，可以参见六.2。

六.2 使用npm安装GER，webpack和rollup项目推荐：

如果你的项目基于webpack或者rollup这种模块化开发工具，那么安装更加简单，使用npm下载对应的安装包：

$ npm install gome-error-report

然后增加webpack配置：

{
  plugins:[
     new webpack.ProvidePlugin({
        GER:'gome-error-report'
     })
  ],
  resolve:{
     extensions: ['', '.js', '.json'],
     alias:{
       'gome-error-report':'gome-error-report/dist/ger.js'
     }
  }
}

这样你就可以在你的webpack系统中使用GER这个全局变量了，然后新建一个初始化模块：

var gomeGER = new GER({
    url: 'http://127.0.0.1:8888/report/add',
    proxyJquery: true,
    proxyTimer: true
});

这里注意url参数，如果你使用的是GER-server，则上报接口为report/add，你也可以参考GER-server的对应report/add的controller来使用其他语言操作ES，写入日志。

七，其他额外配置

在开始使用之前，如果你的项目js的存放地址和程序主域不一致，则需要再增加2个修改。

应用程序为http://www.abc.com

js存放地址为http://www.jscdn.com

那么你需要在http://www.abc.com的js引入部分，也就是script标签上增加一个 `crossorigin`属性，具体作用参见：CORS settings attributes

增加了crossorigin属性后，必须对应的服务增加cors的头，http://www.jscdn.com的nginx中可以这样配置：

location /{
  add_header 'Access-Control-Allow-Origin' 'http://abc.com';
  add_header 'Access-Control-Allow-Credentials' 'true';
  add_header 'Access-Control-Allow-Headers' 'Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,X-Requested-With';
  add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS';
}

当然origin也可以配置成 "*"，允许所有跨域的请求。

增加cors的头的方法有很多，这里就不一一解释了。

通过以上的几步，就可以完成一套自己的前端错误监控体系的搭建了，如果在操作中遇到问题，欢迎留言和去GER或者GER-server中提pr或者issues。

最后给大家看下项目最终的系统截图：




基本上的功能截图就在这里，这是我们内网部署的一些界面截图。

----------我是分割线---------

最后，帮公司视频部门招聘中高级前端开发工程师：

1、熟悉javascript、html、css，开发符合需求的前端模块，并兼容多浏览器；
2、熟悉jQuery等开发框架，深入过代码细节优先；
3、熟悉ajax、json，了解至少一种后台语言，能有与后端工程师配合；
4、保持高效的前端性能；
5、能够自我驱动，具备强烈的进取心、求知欲及团队合作精神，有较强的沟通及协调能力；
6、具备较好的技术文档撰写能力；
7、熟悉多种前端工程构建工具者优先。

基本要求：
2年以上前端领域开发经验
深入掌握HTML+CSS+JavaScript等前端技术，代码符合W3C标准、兼容主流浏览器
熟练使至少一种JS框架，掌握其原理
掌握至少一种其他语言（如Java/PHP/Python/Ruby），有实战经验

进阶要求：
注重细节的习惯，大胆假设，小心求证的态度
深入分析业务需求，承担复杂的任务，高质量的产出

优先条件：
熟悉Mobile Web/Hybrid Web App等开发
利用开源代码打造自有效率工具的经验
熟悉Linux/Unix/Mac平台下的软件开发环境
Nodejs下项目开发经验

提供工作岗位是我一直以来坚持的……恩，咳咳，最后如果想了解更多好玩的开源项目知识，也可以参与周六我的一场关于前端开源项目的live：知乎 Live - 全新的实时问答

以上，多谢！


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK