给自己的网站添加一个访客统计系统

碎碎念

前两天网站被打了，导致服务器很多的东西都好像有损坏无法重新运行，于是重新部署了一遍反正也不麻烦，顺带着部署了一个网站监控系统，Umami，页面也还挺好看，功能对我来说足够了哈哈哈，并且重点是部署很简单！

选择的原因

引用站外地址，不保证站点的可用性和安全性

推荐 5 款免费开源的网站流量分析统计工具

zhuanlan.zhihu.com

其实市面上有很多选择，matomo，Plausible，Fathom，Ackee，Shynet等等，都非常的优秀，参考上方链接，对于这五款的介绍大致如下：

Umami：
优点：简单易用，自托管，不使用 Cookie，不跟踪用户，符合 GDPR，资源占用低，功能丰富。
缺点：功能简单，样式比较单一。
Shynet：
优点：不使用 Cookie，不跟踪用户，分析脚本轻量，适合个人项目和中小型网站。
缺点：可能不适合高流量网站。
Plausible：
优点：100%开源，不使用 Cookie，不收集个人数据，符合隐私政策，功能完善。
缺点：官方托管版本收费，免费自建版本发布频率较低。
Fathom：
优点：注重隐私，不收集个人身份信息，有免费开源Lite版本。
缺点：Lite版本使用匿名Cookie，数据较少，不符合某些隐私政策。
Ackee：
优点：关注隐私，界面简洁美观，采用匿名数据采集，提供有用的统计信息。
缺点：内容较少，可能缺少一些全功能营销分析平台的功能。
Matomo：
优点：功能齐全强大，提供转化优化、搜索引擎优化、一体化集成等多种功能，用户拥有数据所有权。
缺点：自部署难度高，设置复杂，追踪代码体积大可能影响网站加载速度，需要专业知识和耐心操作。

由于我的小服务器限制，导致很难部署比较大的统计网站，再加上追踪代码太大了的话会影响速度，于是我选择了Umami，这个统计代码才不到3KB的小家伙。

文件下载后的大小

开始部署

引用站外地址，不保证站点的可用性和安全性

Umami-Github仓库链接

github.com/umami-software

引用站外地址，不保证站点的可用性和安全性

Umami官网

umami.js

部署要求

部署中需要用到反向代理，所以请提前备好Nginx，下面是两种部署方式

源码部署
Node.js 版本为 16.13 或更新的服务器。
一个功能正常的数据库，Umami 支持 MySQL 和 Postgresql 数据库。
Docker部署
Docker正常运行~

这里我们选择第二种方式，Docker部署，并使用Postgresql数据库。

部署过程

首先我们创建一个网站，这里我使用的是宝塔面板，点击网站，创建网站，输入你的域名，页面选择纯静态，注意创建页面之前，先将对应DNS解析添加到域名中，指向位置为你的服务器外网IP。

创建站点

然后我们尝试访问网站应该就可以访问了，下面申请SSL，注意这一步需要在反向代理之前，后面续费也先关闭反向代理，申请证书，再打开代理。这一步不用多说了，选择宝塔免费的即可。

申请SSL证书

下面就开始部署啦，打开上面申请的网站文件所在位置，克隆仓库，当然也可以自己找位置，我这么做主要是方便网站管理：

1	git clone https://github.com/umami-software/umami.git

如果服务器克隆有困难，可以将其先导入到Gitee，再克隆Gitee仓库，或者直接克隆我的gitee镜像仓库，克隆之前请确保我的仓库是最新的内容，如果不是最新可以自己导入gitee或者联系我更新：

1	git clone https://gitee.com/willow-god/umami.git

克隆下来以后，打开文件 docker-compose.yml ，内容如下：

---
version: '3'
services:
  umami:
    image: ghcr.io/umami-software/umami:postgresql-latest
    ports:
      - "3000:3000" # 前面的端口你可以改，如果3000已经被占，你可以改成如：3001:3000
    environment:
      DATABASE_URL: postgresql://umami:umami@db:5432/umami
      DATABASE_TYPE: postgresql
      APP_SECRET: replace-me-with-a-random-string # 修改为随机字符串，为了安全
    depends_on:
      db:
        condition: service_healthy
    restart: always
    healthcheck:
      test: ["CMD-SHELL", "curl http://localhost:3000/api/heartbeat"]
      interval: 5s
      timeout: 5s
      retries: 5
  db:
    image: postgres:15-alpine # 这里会创建postgresSQL的docker
    environment:
      POSTGRES_DB: umami # 默认创建的数据库名称，可以不改
      POSTGRES_USER: umami # 默认创建的数据库用户名，可以不改
      POSTGRES_PASSWORD: umami # 默认创建的数据库密码，也可以不改，但是建议改改，为了安全
    volumes:
      - umami-db-data:/var/lib/postgresql/data
    restart: always
    healthcheck:
      test: ["CMD-SHELL", "pg_isready -U $${POSTGRES_USER} -d $${POSTGRES_DB}"]
      interval: 5s
      timeout: 5s
      retries: 5
volumes:
  umami-db-data:

按照上方的注释编辑好之后，在目录下打开终端，并运行下面的命令进行创建：

1	docker-compose up -d

等三个started出现后，命令运行完毕，此时去宝塔面板的Docker管理器可以看到我们创建的两个容器，一个是postgresSQL数据库，还有一个是Umami主程序：

两个Docker容器

此时他已经运行到了我们的默认的3000端口，我们现在配置反向代理将其转发到我们刚才创建的域名下，点击网站，选择对应网站的设置，点击反向代理，按照下面的图片进行配置：

反向代理

这样我们就部署完成了！

开始使用

下面我们就可以访问到站点了，访问创建的网站，默认账户为:admin，默认密码为:umami：

登陆页面

进去之后首先点击右上方头像，个人资料修改密码，修改之后，返回仪表板，点击设置，网站，添加网站，添加自己的站点：

添加网站

添加完成后，点击编辑，追踪代码，将这一串代码添加到你的网站JS中即可，如果你有很多网站使用同一套源码，可以使用以下JS，自行判断域名并加载代码，这样可以防止统计到本地调试时的n次访问：

var currentDomain = window.location.hostname;

if (currentDomain.includes('[站点1]')) {
    var script = document.createElement('script');
    script.src = 'https://[你的站点]/script.js'; // 这个需要你自己看着改改
    script.setAttribute('data-website-id', '[站点1的网站ID，也就是跟踪代码后面一串]');
    script.async = true; // 将script的async属性设置为true，实现异步加载
    document.head.appendChild(script);
    console.log('========成功加载 [站点1] 统计分析工具代码========');
} else if (currentDomain.includes('[站点2]')) {
    var script = document.createElement('script');
    script.src = 'https://你的站点/script.js';
    script.setAttribute('data-website-id', '[站点2的网站ID]');
    script.async = true; // 将script的async属性设置为true，实现异步加载
    document.head.appendChild(script);
    console.log('========成功加载 [站点2] 统计分析工具代码========');
} else { // 比如本地调试，就不需要统计了，要不然会发现统计页面很多来自本地localhost
    console.log('========当前网站不需要加载统计分析工具========');
}