使用Ackee完成简单的网站访问统计

笔记 · 2023-12-09 · 163 人浏览

前言

之前一直想怎么统计一下我的这赛博废墟的访问量,找了一段时间后发现一个比较简单的项目:Ackee

它可以比较方便地跟踪一些网站的相关数据,例如设备类型,Refer等,对于我这种简单的需求来说完全足够。

安装它遇到了一点点麻烦,在此做个笔记吧

安装

Ackee提供了很多种安装方式,包括Docker、Docker-compose、Vercel等,也可以直接运行它更为简单,本文使用直接安装,不使用Docker,因为官方提供的Docker镜像需要内联MongoDB,我的数据库里面已经有很多数据,所以不方便操作。故单独运行

注意:如果您决定使用Docker安装MongoDB和Ackee,请将MongoDB监听的IP指定为 127.0.0.1,否则会有被攻击者扫描到并删除数据的风险

1.克隆项目

执行以下命令克隆项目到你想要的目录中

git clone https://github.com/electerious/Ackee

2.安装Node环境 (可选)

由于读者操作系统各不相同,直接扔一个NVM(NodeJS version manager)的连接在这里

使用方式: 执行以下两条命令中的任意一条

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

然后安装NodeJS 20.10.0 LTS版本和NPM

nvm install 20.10
nvm install-latest-npm

然后安装yarn pm2 并检查安装版本

npm install -g yarn
npm install -g pm2

yarn --version  #1.22.21
pm2 --version   #5.3.0

注意:某些操作系统下执行pm2/yarn命令会出现command not found错误,是因为环境问题,不再赘述,参考官方文档

正式安装Ackee

进入到你的Ackee的安装目录,新建一个.env文件并写入以下内容

ACKEE_MONGODB=mongodb://localhost:27017/ackee   #MongoDB的连接地址
ACKEE_USERNAME=THEUSERNAME                      #登录Ackee的用户名
ACKEE_PASSWORD=THEPASSWORD                      #登录Ackee的密码
ACKEE_PORT=3002                                 #Ackee所监听的端口

然后执行 yarn run start 检查是否成功运行,正常输出应该是:

[Ackee] › …  awaiting  Connecting to mongodb://localhost:27017/ackee
[Ackee] › ✔  success   Connected to mongodb://localhost:27017/ackee
[Ackee] › ▶  start     Starting the server
[Ackee] › …  watching  Listening on http://localhost:3002

证明配置无误,关闭后使用命令pm2 start --name Ackee src/index.js 启动

附注: 可以使用pm2 startup 将其设为自动启动项,避免每次手动重启

配置反向代理

官方实例中,提到了CROS,也就是跨域的问题,假设Ackee通过反向代理服务在A中,那么如果有一个网站服务的域名是B,此时B网站的访客就无法被Ackee统计到。因为涉及到跨域访问,这在绝大部分浏览器中都是被认为不安全的,除非网站运营方手动开放跨域访问。

跨域访问资料参考:https://www.jianshu.com/p/89a377c52b48

配置跨域访问

网站A:https://trace.olderfox.com
网站B:https://www.olderfox.com
在这个实例中,我的网站A作为数据统计网站B作为被统计的网站,目前所做操作均在A网站所对应的Nginx配置文件中.

首先,浏览器在检测跨域可用性的方式是发送一个preflight请求,检测对方网站是否允许跨域访问,需要包含一个httpHeader,且返回的状态码需要为204

Access-Control-Allow-Origin "$http_origin" always;

直接扔一份反向代理配置文件在这:

#PROXY-START/

location /
{
    proxy_pass http://127.0.0.1:3002;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header REMOTE-HOST $remote_addr;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection $connection_upgrade;
    proxy_http_version 1.1;
    # proxy_hide_header Upgrade;
    #Persistent connection related configuration

    add_header X-Cache $upstream_cache_status;

    #Set Nginx Cache
    
    
    set $static_fileIjM89oPq 0;
    if ( $uri ~* "\.(gif|png|jpg|css|js|woff|woff2)$" )
    {
        set $static_fileIjM89oPq 1;
        expires 1m;
        }
    if ( $static_fileIjM89oPq = 0 )
    {
    add_header Cache-Control no-cache;
    add_header Access-Control-Allow-Origin "$http_origin" always;
    add_header Access-Control-Allow-Methods "GET, POST, PATCH, OPTIONS" always;
    add_header Access-Control-Allow-Headers "Content-Type, Authorization, Time-Zone" always;
    add_header Access-Control-Allow-Credentials "true" always;
    add_header Access-Control-Max-Age "3600" always;
    }
      if ($request_method = 'OPTIONS') {
      add_header X-Frame-Options deny;
      add_header 'Content-Type' 'text/plain; charset=utf-8';
      add_header 'Content-Length' 0;
      add_header Access-Control-Allow-Origin "$http_origin" always;
      add_header X-Cache $upstream_cache_status;
      add_header Access-Control-Allow-Methods "GET, POST, PATCH, OPTIONS" always;
      add_header Access-Control-Allow-Headers "Content-Type, Authorization, Time-Zone" always;
      add_header Access-Control-Allow-Credentials "true" always;
      add_header Access-Control-Max-Age "3600" always;
      add_header Strict-Transport-Security "max-age=31536000" always;
      add_header 'Access-Control-Max-Age' 1728000;
      return 204;
    }
}

#PROXY-END/

OK,你现在就能用了!晚安玛卡巴卡。