基于前端埋点思考持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第1天基于全栈的前端埋点思考。

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第1天，点击查看活动详情

应用背景

作为一个全栈工程师，之前的开发过程当中，一直注重的是数据的获取，渲染流程。也就是从数据当中获取到数据然后顺利的渲染到页面上的流程，但是最近的开发过程当中发现，从用户的日常操作行为当中获取用户行为可以更好的做网站的优化和数据采集。比如:通过用户在网站当中的操作，记录到日志，然后对日志进行分析，得到访问最频繁的，质量最高的功能模块，所以有了今天的文章。

开发思路

按照用户行为捋一下思路：

1、首先设定用户的操作行为，对用户的操作链接进行统一的规划，比如：

1）对所有的请求设定url地址，比如：

搜索地址规则：

/search/blog 文章搜索

/search/image 图片搜索

/search/ask 问答搜索

详情地址规则：

/click/blog 文章详情

/click/image 图片详情

/click/ask 问答详情

2）然后在nginx日志当中进行统计。

cat access.log | grep '/search/blog' | awk -F '{print $1}' | wc -l

Nginx安装

安装nginx依赖：pcre

wget http://downloads.sourceforge.net/project/pcre/pcre/8.37/pcre-8.37.tar.gz

tar -xzpvf pcre-8.37.tar.gz && cd pcre-8.37

./configure

make && make install

pcre-config --version

安装openssl 、zlib 、 gcc 依赖

yum install make zlib zlib-devel gcc-c++ libtool openssl openssl-devel -y

安装nginx

wget http://nginx.org/download/nginx-1.20.1.tar.gz

tar -zxvf nginx-1.20.1.tar.gz &&b cd nginx-1.20.1

./configure

make && make install

ln -s /usr/local/nginx/sbin/nginx /usr/bin/nginx

nginx

前台尝试访问，记得配置防火墙或者安全组【云主机使用】

日志配置

日志格式

access_log path [format [buffer=size] [gzip[=level]] [flush=time] [if=condition]]; # 设置访问日志

path 指定日志的存放位置。

format 指定日志的格式。默认使用预定义的combined。

buffer 用来指定日志写入时的缓存大小。默认是64k。

gzip 日志写入前先进行压缩。压缩率可以指定，从1到9数值越大压缩比越高，同时压缩的速度也越慢。默认是1。

flush 设置缓存的有效时间。如果超过flush指定的时间，缓存中的内容将被清空。

if 条件判断。如果指定的条件计算为0或空字符串，那么该请求不会写入日志。

access_log off; # 关闭访问日志

比如：
access_log /var/logs/nginx-access.log buffer=32k gzip flush=1m

该例子指定日志的写入路径为/var/logs/nginx-access.log，日志格式使用默认的combined，指定日志的缓存大小为32k，日志写入前启用gzip进行压缩，压缩比使用默认值1，缓存数据有效时间为1分钟

访问日志的作用域

可以应用access_log指令的作用域分别有http，server，location，limit_except。也就是说，在这几个作用域外使用该指令，Nginx会报错。

可用日志配置关键词

默认日志配置格式

log_format combined '$remote_addr - $remote_user [$time_local] '

                  '"$request" $status $body_bytes_sent '

                  '"$http_referer" "$http_user_agent"';

Nginx自定义日志语法

log_format name [escape=default|json] string ...;

name 格式名称。在access_log指令中引用。

escape 设置变量中的字符编码方式是json还是default，默认是default。

string 要定义的日志格式内容。该参数可以有多个。参数中可以使用Nginx变量。

Nginx自定义日志常用变量

变量	含义
$bytes_sent	发送给客户端的总字节数
$body_bytes_sent	发送给客户端的字节数，不包括响应头的大小
$connection	连接序列号
$connection_requests	当前通过连接发出的请求数量
$msec	日志写入时间，单位为秒，精度是毫秒
$pipe	如果请求是通过http流水线发送，则其值为"p"，否则为“."
$request_length	请求长度（包括请求行，请求头和请求体）
$request_time	请求处理时长，单位为秒，精度为毫秒，从读入客户端的第一个字节开始，直到把最后一个字符发送张客户端进行日志写入为止
$status	响应状态码
$time_iso8601	标准格式的本地时间,形如“2017-05-24T18:31:27+08:00”
$time_local	通用日志格式下的本地时间，如"24/May/2017:18:31:27 +0800"
$http_referer	请求的referer地址。
$http_user_agent	客户端浏览器信息。
$remote_addr	客户端IP
$http_x_forwarded_for	当前端有代理服务器时，设置web节点记录客户端地址的配置，此参数生效的前提是代理服务器也要进行相关的x_forwarded_for设置。
$request	完整的原始请求行，如 "GET / HTTP/1.1"
$remote_user	客户端用户名称，针对启用了用户认证的请求
$request_uri	完整的请求地址，如 "daojia.com/"

nginx 加载外部日志

include文件路径可以是绝对路径，也可以是相对路径，相对路径以nginx.conf为基准，同时可以使用通配符。

nginx 埋点日志

以/click为例子：

server {
    listen       8080;
    server_name  poit_server;

    location /click {
        access_log  logs/point.log  main;

        default_type application/json;
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Credentials true;
        add_header Access-Control-Allow-Methods GET,POST;
        return 200 '{"status": "success", "result": "请求成功"}';
    }
}

前端访问

这个时候就可以在前端设置路由或者是在现有的路由基础上进行前端埋点了。

<body>
    <a onclick="point()" href="www.baidu.com">点击事件</a>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script>
        function point(){
            $.ajax({
                url: "http://nginx_host/click/blog",
                type: "get",
                data: "",
                success: function(data){
                    if(data["status"]=="success"){
                        return true
                    }else{
                        return false
                    }
                }
            })
        }
    </script>
</body>