一个网站当用户量增大时候，不可避免有统计pv和uv的需求。

  • UV（Unique Visitor）：独立访客，以cookie为依据区分不同访客，UV计算一天之内（00:00-24:00），访问网站的访客数量。
  • PV（Page View）：页面访问量，同一个用户对页面多次访问累计。

本文介绍一种通过分析nginx日志统计pv、uv的方法。

一、方案设计

如何根据Nginx的访问日志统计pv和uv呢？

我们可以通过分析nginx的访问网站页面的日志来统计参数，比如一个单页应用的博客网站，用户访问/、/article_list、/article_detail都应该算作一次访问。

但是如果网站的路由不确定时候，就不好统计。当路由变化时候，需要更新统计脚本。而且，用户首次访问后才设置了cookie，所以首次页面请求是不带cookie的，这会导致漏报。另外，用cookie记录数据，由于是js写的cookie，所以需要保证同域访问，这就很不灵活。如果不是js写的cookie，那就说明依赖后端服务，也不够灵活。

所以我们采取的方法是前端上报页面访问事件。

首先前端生成一个uuid，向Nginx发起一个请求并携带uuid，Nginx会精确匹配这个请求，然后返回204，以减小数据传输量。

由于上报地址和页面是同域的，因此我们这里使用cookie保存uuid，如果不同域，还可以使用localStorage将uuid存在本地，然后在参数中将uuid带上。

Nginx收到上报后，根据我们指定的固定格式生成日志。我们还要设置定时任务，定期切割日志，以便分析日志时候以月和天为维度统计指标。

整体流程示意图如下：

使用Nginx访问日志统计PV和UV - 图1

二、上报访问事件

前端使用uuid这个库生成uuid，使用js-cookie对cookie进行读写，cookie有效期设置为30天，如果已经存在则不设置。

这里上报地址是“/report.gif”。为了避免上报请求被缓存，请求参数加一个时间戳。

  1. // index.js
  2. import Cookies from 'js-cookie';
  3. import {v4 as uuidv4} from 'uuid';
  5. try {
  6.   if (!Cookies.get('uuid')) {
  7.     Cookies.set('uuid', uuidv4().replace(/-/g, ''), {expires: 30});
  8.   }
  9.   // 上报访问
  10.   axios.get(`https://www.example.com/report.gif?t=${Date.now()}`);
  11. }
  12. catch (e) {}

Nginx需要配置响应

  1. location =/report.gif {
  2.   return 204;
  3. }

三、Nginx配置日志格式

我们可以指定Nginx访问日志的格式，分析日志时候更方便。

注意，log_format指令只能用在http模块中，不能用在server模块中。

这里在http模块中通过log_format定义了一个格式，命名为main，然后在server模块中使用access_log定义访问日志的存放目录，并且引用main指定日志格式。server模块中还匹配了请求里面的cookie，取出uuid赋值给$uuid变量以便写日志时候能够正常读取uuid。

  1. http {
  2.   log_format main '$remote_addr - [$time_local] "$request" '
  3.     ' - $status "uuid:$uuid" ';
  4.   server {
  5.     access_log /path/to/log/access443.log main;
  6.     if ( $http_cookie ~* "uuid=([A-Z0-9]*)"){
  7.         set $uuid $1;
  8.     }
  9.   }
  10. }

我们会得到这样的日志

  1. 101.241.91.99 - [04/May/2022:09:36:34 +0800] "GET /assets/vendor.337922eb.js HTTP/1.1"  - 304 "uuid:a27050e998864af89de0fbc7605d1548"
  2. 101.241.91.99 - [04/May/2022:09:36:34 +0800] "GET /assets/style.81f77c22.css HTTP/1.1"  - 200 "uuid:a27050e998864af89de0fbc7605d1548"
  3. 101.241.91.99 - [04/May/2022:09:36:34 +0800] "GET /assets/index.9c0fae7c.js HTTP/1.1"  - 304 "uuid:a27050e998864af89de0fbc7605d1548"
  4. 101.241.91.99 - [04/May/2022:09:36:34 +0800] "GET /assets/quiz.5e3bb724.js HTTP/1.1"  - 304 "uuid:a27050e998864af89de0fbc7605d1548"
  5. 101.241.91.99 - [04/May/2022:09:36:34 +0800] "GET /report.gif?id=0&t=1651628194189 HTTP/1.1"  - 204 "uuid:a27050e998864af89de0fbc7605d1548"
  6. 101.241.91.99 - [04/May/2022:09:36:34 +0800] "GET /assets/logo.c5f2dde3.jpeg HTTP/1.1"  - 200 "uuid:a27050e998864af89de0fbc7605d1548"
  7. 101.241.91.99 - [04/May/2022:09:36:34 +0800] "GET /favicon.ico HTTP/1.1"  - 200 "uuid:a27050e998864af89de0fbc7605d1548"

四、日志切割

为了方便统计我们希望把日志文件按时间分割，分割成这样的结构：

  1. ├── 2022
  2. │   └── 05
  3. │       └── 03.log

按照年、月、日分层，每天生成一个日志。

实现思路是，先建立一个日志存放目录，每天的凌晨0点1分，将前一天的日志按照日期移动到日志目录中。然后再重新创建一个日志文件供Nginx写入。

先写一个脚本实现这个功能

log_split.sh

  1. #!/bin/bash
  2. # 定位到脚本所在目录（注意我这里也是Nginx写访问日志的目录，当然这不是必须的）
  3. log_base=$(cd `dirname $0`; pwd)
  4. # 根据前一天的时间生成日志所在目录名
  5. log_path=${log_base}/$(date -d yesterday +%Y)/$(date -d yesterday +%m)
  6. # 创建日志目录
  7. mkdir -p $log_path
  8. # 将当前Nginx的日志移动到指定存放目录
  9. mv $log_base/access443.log $log_path/$(date -d yesterday +%d).log
  10. # 重新创建日志文件，给Nginx写日志用
  11. touch $log_base/access443.log
  12. # 给Nginx发送信号，注意你的Nginx目录可能不同
  13. kill -USR1 `cat /www/server/nginx/logs/nginx.pid`

值得注意的是，虽然移动完日志，并且重新创建，但是Nginx的文件引用还是移走的那个，所以最后要给Nginx发送信号，让它写到新的日志文件中。

脚本写完，我们还要定时（每天0点1分执行切割任务），这用到了Linux的crontab工具。

首先在控制台输入crontab -e打开编辑界面。然后输入1 0 * * * sh /path/to/log/log_split.sh。这个定时任务的意思是每天0点1分执行日志分割脚本，编辑完成后保存关闭，定时任务就生效了。

我们还可以通过crontab -l查看当前的定时任务；通过crontab -r移除当前的定时任务。

五、Nodejs脚本分析日志，统计PV、UV

有了日志，就很容易分析PV、UV。我们可以使用Linux命令分析，但我这次选择用Nodejs脚本来统计，原因是对JS更熟悉，另外相对Linux也更灵活。

分析的大概思路是根据每天的访问日志，过滤出report.gif这个上报请求，上报次数就是PV，然后根据uuid去重，得到UV。

统计脚本如下：

  1. // stats.js
  2. const fs = require('fs');
  3. const path = require('path');
  5. const args = process.argv.slice(2);
  7. const [year] = args;
  9. // 打印统计结果
  10. function echo() {
  11.   yearDir = year || '2022';
  12.   const stats = statsYearLog(yearDir);
  13.   Object.entries(stats)
  14.     .sort(([a], [b]) => a - b)
  15.     .forEach(([month, dateStats]) => {
  16.     console.log(`${month}月`);
  17.     Object.entries(dateStats)
  18.       .sort(([a], [b]) => a - b)
  19.       .forEach(([date, {pv, uv}]) => {
  20.       console.log('  ', `${date}日`, `pv: ${pv}`, `uv: ${uv}`);
  21.     });
  22.     console.log('\n');
  23.   });
  24. }
  26. // 统计某一年的数据
  27. function statsYearLog(year) {
  28.   // 读取目录下的文件夹名字
  29.   const dir = path.resolve(__dirname, year);
  30.   const monthDirList = fs.readdirSync(dir);
  32.   const logMap = monthDirList.reduce((result, monthDir) => {
  33.     const monthStats = statsMonthLog(year, monthDir);
  34.     result[monthDir] = monthStats;
  35.     return result;
  36.   }, {});
  38.   return logMap;
  39. }
  41. // 统计每个月的数据
  42. function statsMonthLog(year, month) {
  43.   const dir = path.resolve(__dirname, year, month);
  44.   const dateLogList = fs.readdirSync(dir);
  46.   const monthLogMap = dateLogList.reduce((result, dateLogFileName) => {
  47.     const dateStats = statsDateLog(year, month, dateLogFileName);
  48.     result[dateLogFileName.replace('.log', '')] = dateStats;
  49.     return result;
  50.   }, {});
  52.   return monthLogMap;
  53. }
  55. // 统计某天的数据
  56. function statsDateLog(year, month, dateFile) {
  57.   const logPath = path.resolve(__dirname, year, month, dateFile);
  58.   const logText = fs.readFileSync(logPath, 'utf-8');
  59.   const logList = logText.split('\n');
  60.   const pvLogList = logList.filter((line) => {
  61.     return /report.gif/.test(line)
  62.   });
  63.   const uvLogMap = pvLogList.reduce((result, line) => {
  64.     const match = line.match(/uuid:(\S+)"/);
  65.     if (match && match[1]) {
  66.       result[match[1]] = 1;
  67.     }
  68.     return result;
  69.   }, {});
  71.   return {pv: pvLogList.length, uv: Object.keys(uvLogMap).length};
  72. }
  74. // 执行打印统计结果
  75. echo();

执行统计脚本node stats.js 2022

打印结果

  1. 05月
  2.    03日 pv: 1 uv: 1

六、展望

后续可以考虑扩展现有能力，让Node实现日志切割的功能，并提供api和界面，可以可视化统计PV、UV。