前端如何使用图片打点进行数据上报

豆芽y
2,277 阅读3分钟

背景

关于埋点数据上报大概接口上报、图片打点上报、sendBeacon三种方式，各有利弊，今天我们看一下图片打点相关的服务端配置。

运行环境

Linux CentOS
#需要的服务配置
Zookeeper、Kafka、Kafka-manager(可选）、nginx、rsyslog、rsyslog-kafka(我们现在用的是fileBeta）

项目流程说明

image.png

  • 前端通过JS SDK 通过请求一个极小gif图片得方式，将在项目中收集得数据，追加到请求gif图片的路径后面，这样 nginx 就可以将拿到请求写入 access.log 日志。同时，配置的 rsyslog 会将写入到 access.log 日志通过 rsyslog-kafka 模块转发到 kafka topic，此时，nginx便作为一个生产者的角色，天眼服务端server若订阅了此 kafka topic 便可以监听到转发过来的日志数据，进行消费处理，将收集到的信息处理后保存到数据库。

配置

nginx配置

  • log_format配置nginx存储日志格式，为了更方便解析，需要设置成json格式。其配置如下：
log_format log_json '{ "@timestamp": "$time_local", '
'"ipaddress": "$remote_addr", '
'"args": "$args", '
'"method": "$request_method", '
'"referer": "$http_referer", '
'"request": "$request", '
'"status": $status, '
'"bytes": $body_bytes_sent, '
'"agent": "$http_user_agent", '
'"x_forwarded": "$http_x_forwarded_for", '
'"up_addr": "$upstream_addr",'
'"up_host": "$upstream_http_host",'
'"up_resp_time": "$upstream_response_time",'
'"request_time": "$request_time"'
' }';
	
access_log  logs/access.log  log_json;

gif配置

location = /_.gif {
    empty_gif;
}

header_buffer配置

由于 SDK 收集的数据比较多，需要配置 nginx 请求体缓冲区大小，nginx默认是8k，如果超过过长的请求会被nginx截断存储到日志，导致参数丢失。配置详细说明可参考header_buffer解释。

client_header_buffer_size 512k; # 参考大小 根据实际调整 目前这个配置比较大，足够目前使用
large_client_header_buffers 4 512k;

rsyslog相关配置

安装

rsyslog 和 rsyslog-kafka 安装，安装完成后可查看 /lib64/rysylog/) 中是否存在 omkafka.so ,验证 rsyslog-kafka 是否安装成功。

yum install rsyslog
yum install rsyslog-kafka.x86_64

配置

编辑 rsyslog 配置文件（路径 /etc/rsyslog.conf ），在配置文件 #### MODULES #### 的下面添加如下配置（或者在 /etc/rsyslogd/ 目录下添加 xxx.conf 配置文件）:

# ####### rsyslog配置文件 #######
# 加载omkafka和imfile模块
module(load="omkafka")
module(load="imfile")
 
# nginx template
template(name="nginxAccessTemplate" type="string" string="%msg%")  
 
# ruleset
ruleset(name="nginx-kafka") {
    #日志转发kafka
    action (
        type="omkafka"
     template="nginxAccessTemplate"
        topic="tianyan-test"        # 对应kafka topic名称
        broker="xx.xxx.xx.xx:9092"     # 对应kafka 地址
    )
}
 
# 定义消息来源及设置相关的action
input(type="imfile" Tag="nginx-accesslog" File="/var/log/access.log" Ruleset="nginx-kafka")

配置简单说明：

  • xx.xx.xxx.xx:9092 需要修改为服务器上对应的kafka地址（如果为集群多个地址逗号分隔）
  • /var/log/access.log 是监控的 nginx access.log 日志文件
  • topic: tianyan-test 对应 kafka topic ，后续可通过 kafka-manager 进行创建

修改完配置后运行： rsyslogd -N 1 或者 rsyslogd -dn 查看配置是否报错

然后重启rsyslog，执行 service rsyslog restart 重启后查看 /var/log/message 中日志是否报错。

kafka配置

kafka 和 kafka-manager 的安装，我们是采用的docker-compose进行安装的，如果已有相关服务，无需再安装。安装好 kafka 和 kafka-manager 后相关配置可以参考我之前文章 nodejs接入kafka。

到此，整个配置已经完成，访问nginx服务地址，就可以观察是否有日志写入，以及是否转发到kafka。

avatar
文章
阅读
粉丝