前言

一個網(wǎng)站當用戶量增大時候，不可避免有統(tǒng)計pv和uv的需求。

• UV（Unique Visitor）：獨立訪客，以cookie為依據(jù)區(qū)分不同訪客，UV計算一天之內(nèi)（00:00-24:00），訪問網(wǎng)站的訪客數(shù)量。
• PV（Page View）：頁面訪問量，同一個用戶對頁面多次訪問累計。

本文介紹一種通過分析nginx日志統(tǒng)計pv、uv的方法。

一、方案設計

如何根據(jù)Nginx的訪問日志統(tǒng)計pv和uv呢？

我們可以通過分析nginx的訪問網(wǎng)站頁面的日志來統(tǒng)計參數(shù)，比如一個單頁應用的博客網(wǎng)站，用戶訪問/、/article_list、/article_detail都應該算作一次訪問。

但是如果網(wǎng)站的路由不確定時候，就不好統(tǒng)計。當路由變化時候，需要更新統(tǒng)計腳本。而且，用戶首次訪問后才設置了cookie，所以首次頁面請求是不帶cookie的，這會導致漏報。另外，用cookie記錄數(shù)據(jù)，由于是js寫的cookie，所以需要保證同域訪問，這就很不靈活。如果不是js寫的cookie，那就說明依賴后端服務，也不夠靈活。

所以我們采取的方法是前端上報頁面訪問事件。

首先前端生成一個uuid，向Nginx發(fā)起一個請求并攜帶uuid，Nginx會精確匹配這個請求，然后返回204，以減小數(shù)據(jù)傳輸量。

由于上報地址和頁面是同域的，因此我們這里使用cookie保存uuid，如果不同域，還可以使用localStorage將uuid存在本地，然后在參數(shù)中將uuid帶上。

Nginx收到上報后，根據(jù)我們指定的固定格式生成日志。我們還要設置定時任務，定期切割日志，以便分析日志時候以月和天為維度統(tǒng)計指標。

整體流程示意圖如下：

二、上報訪問事件

前端使用uuid這個庫生成uuid，使用js-cookie對cookie進行讀寫，cookie有效期設置為30天，如果已經(jīng)存在則不設置。

這里上報地址是“/report.gif”。為了避免上報請求被緩存，請求參數(shù)加一個時間戳。

// index.js
import Cookies from 'js-cookie';
import {v4 as uuidv4} from 'uuid';

try {
  if (!Cookies.get('uuid')) {
    Cookies.set('uuid', uuidv4().replace(/-/g, ''), {expires: 30});
  }
  // 上報訪問
  axios.get(`https://www.example.com/report.gif?t=${Date.now()}`);
}
catch (e) {}

Nginx需要配置響應

location =/report.gif {
  return 204;
}

三、Nginx配置日志格式

我們可以指定Nginx訪問日志的格式，分析日志時候更方便。

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

這里在http模塊中通過log_format定義了一個格式，命名為main，然后在server模塊中使用access_log定義訪問日志的存放目錄，并且引用main指定日志格式。server模塊中還匹配了請求里面的cookie，取出uuid賦值給$uuid變量以便寫日志時候能夠正常讀取uuid。

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

我們會得到這樣的日志

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

四、日志切割

為了方便統(tǒng)計我們希望把日志文件按時間分割，分割成這樣的結(jié)構(gòu)：

├── 2022
│   └── 05
│       └── 03.log

按照年、月、日分層，每天生成一個日志。

實現(xiàn)思路是，先建立一個日志存放目錄，每天的凌晨0點1分，將前一天的日志按照日期移動到日志目錄中。然后再重新創(chuàng)建一個日志文件供Nginx寫入。

先寫一個腳本實現(xiàn)這個功能

log_split.sh

#!/bin/bash
# 定位到腳本所在目錄（注意我這里也是Nginx寫訪問日志的目錄，當然這不是必須的）
log_base=$(cd `dirname $0`; pwd)
# 根據(jù)前一天的時間生成日志所在目錄名
log_path=${log_base}/$(date -d yesterday +%Y)/$(date -d yesterday +%m)
# 創(chuàng)建日志目錄
mkdir -p $log_path
# 將當前Nginx的日志移動到指定存放目錄
mv $log_base/access443.log $log_path/$(date -d yesterday +%d).log
# 重新創(chuàng)建日志文件，給Nginx寫日志用
touch $log_base/access443.log
# 給Nginx發(fā)送信號，注意你的Nginx目錄可能不同
kill -USR1 `cat /www/server/nginx/logs/nginx.pid`

值得注意的是，雖然移動完日志，并且重新創(chuàng)建，但是Nginx的文件引用還是移走的那個，所以最后要給Nginx發(fā)送信號，讓它寫到新的日志文件中。

腳本寫完，我們還要定時（每天0點1分執(zhí)行切割任務），這用到了Linux的crontab工具。

首先在控制臺輸入crontab -e打開編輯界面。然后輸入1 0 * * * sh /path/to/log/log_split.sh。這個定時任務的意思是每天0點1分執(zhí)行日志分割腳本，編輯完成后保存關閉，定時任務就生效了。

我們還可以通過crontab -l查看當前的定時任務；通過crontab -r移除當前的定時任務。

五、Nodejs腳本分析日志，統(tǒng)計PV、UV

有了日志，就很容易分析PV、UV。我們可以使用Linux命令分析，但我這次選擇用Nodejs腳本來統(tǒng)計，原因是對JS更熟悉，另外相對Linux也更靈活。

分析的大概思路是根據(jù)每天的訪問日志，過濾出report.gif這個上報請求，上報次數(shù)就是PV，然后根據(jù)uuid去重，得到UV。

統(tǒng)計腳本如下：

// stats.js
const fs = require('fs');
const path = require('path');
const args = process.argv.slice(2);
const [year] = args;

// 打印統(tǒng)計結(jié)果
function echo() {
  yearDir = year || '2022';
  const stats = statsYearLog(yearDir);
  Object.entries(stats)
    .sort(([a], [b]) => a - b)
    .forEach(([month, dateStats]) => {
    console.log(`${month}月`);
    Object.entries(dateStats)
      .sort(([a], [b]) => a - b)
      .forEach(([date, {pv, uv}]) => {
      console.log('  ', `${date}日`, `pv: ${pv}`, `uv: ${uv}`);
    });
    console.log('\n');
  });
}

// 統(tǒng)計某一年的數(shù)據(jù)
function statsYearLog(year) {
  // 讀取目錄下的文件夾名字
  const dir = path.resolve(__dirname, year);
  const monthDirList = fs.readdirSync(dir);
  
  const logMap = monthDirList.reduce((result, monthDir) => {
    const monthStats = statsMonthLog(year, monthDir);
    result[monthDir] = monthStats;
    return result;
  }, {});
  
  return logMap;
}

// 統(tǒng)計每個月的數(shù)據(jù)
function statsMonthLog(year, month) {
  const dir = path.resolve(__dirname, year, month);
  const dateLogList = fs.readdirSync(dir);
  
  const monthLogMap = dateLogList.reduce((result, dateLogFileName) => {
    const dateStats = statsDateLog(year, month, dateLogFileName);
    result[dateLogFileName.replace('.log', '')] = dateStats;
    return result;
  }, {});
  
  return monthLogMap;
}

// 統(tǒng)計某天的數(shù)據(jù)
function statsDateLog(year, month, dateFile) {
  const logPath = path.resolve(__dirname, year, month, dateFile);
  const logText = fs.readFileSync(logPath, 'utf-8');
  const logList = logText.split('\n');
  const pvLogList = logList.filter((line) => {
    return /report.gif/.test(line)
  });
  const uvLogMap = pvLogList.reduce((result, line) => {
    const match = line.match(/uuid:(\S+)"/);
    if (match && match[1]) {
      result[match[1]] = 1;
    }
    return result;
  }, {});
  
  return {pv: pvLogList.length, uv: Object.keys(uvLogMap).length};
}

// 執(zhí)行打印統(tǒng)計結(jié)果
echo();

執(zhí)行統(tǒng)計腳本node stats.js 2022

打印結(jié)果

05月
   03日 pv: 1 uv: 1

六、展望

后續(xù)可以考慮擴展現(xiàn)有能力，讓Node實現(xiàn)日志切割的功能，并提供api和界面，可以可視化統(tǒng)計PV、UV。

到此這篇關于Nginx訪問日志統(tǒng)計PV與UV的文章就介紹到這了,更多相關Nginx統(tǒng)計PV與UV內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！