日志采集 - 前端埋点日志收集

#原理分析

分析 : 在采集数据的网页上进行埋点(编写一小段js用于动态生成Img标签,而后加入dom页面中，利用该标签将参数请求至服务器中) 经过img标签的src属性能够解决跨域问题<img src="http://127.0.0.1/log.gif?k1=v1&k2=v2">将数据传递给后端服务器 后端服务器执行步骤：

1. 接受请求 , 响应图片(log.gif)
2. 解析参数 , 保存数据
3. 设置cookie

#设计实现

##肯定须要搜集的信息 |名称|途径|备注| |:---|:---|:---| |访问时间|web server|Nginx $msec| |IP|web server|Nginx $remote_add| |域名|JavaScript|document.domain| |URL|JavaScript|document.URL| |页面标题|JavaScript|document.title| |浏览客户端|web server|Nginx $http_user_agent| |参数1|JavaScript|k1| |参数2|JavaScript|k2|

#前端埋点操做

//经过组装params的参数为url请求到指定IP的log.gif地址
function logOperate(params){
	var args = ''; 
    for(var i in params) {
        if(args != '') {
            args += '&';
        }   
        args += i + '=' + encodeURIComponent(params[i]);
    }
	 var img = new Image(1, 1); 
    img.src = 'http://127.0.0.1/log.gif?' + args;
}

#后端nginx简单配置采集日志

user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    #日志采用|分隔符
    log_format  main  '$remote_addr|$msec|$http_user_agent|$k1|$k2';
    access_log off;
    sendfile        on;
    #链接持有时间
    keepalive_timeout  5;
    #gzip  on;
    server {
        listen       80;
        server_name  127.0.0.1;
                #拦截/log.gif路径，而且只针对这个路径才采集日志
		location /log.gif {
                        #日志记录位置且采用main格式
			access_log /var/log/nginx/access.log main;
                        #返回类型
			default_type image/gif;
                        #获取请求参数值格式为[$arg_argname],以便于日志格式解析。
			set $k1 $arg_k1;
			set $k2 $arg_k2;
                        #设置返回前端时不须要缓存
			add_header Expires "Fri, 01 Jan 1980 00:00:00 GMT";
			add_header Pragma "no-cache";
			add_header Cache-Control "no-cache, max-age=0, must-revalidate";
			#返回一个1×1的空gif图片
			empty_gif;
		}
		#拦截其余全部路径，统一返回空图片。
		location / {
			default_type image/gif;
			empty_gif;
		}
	}
}

#后记 前端经过img请求url将对应url参数发送至后端被nginx进行拦截而且解析以|竖线为分隔符的字符串追加到日志文件/var/log/nginx/access.log中。

后期能够经过flume或者logstat将相应日志发送到对应的分析服务器中进行分析数据。