使用Umami为自己的网站统计访问流量并可视化数据

本文最后更新于 2024年9月28日 中午

Umami

想知道自己网站，每天有多少人浏览？或者想更直观的查看自己网站的访客统计？快来试试Umami，一个基于Nodejs开发的网站浏览统计系统，搭建自己的网站统计后台，甚至完胜Google Analytics等工具。

Umami is a simple, fast, website analytics alternative to Google Analytics.

官方Demo图

而且Umami基于Node.js开发，所有数据存储在自己的Mysql（当然，支持MariaDB）或Postgresql内，不用担心个人数据被第三方平台进行算法优化、用户建模等。

挺好奇，单用MySQL数据库，Umami是怎么解决高并发情况下，“幻读”或者“脏读”问题的？有机会研究研究源码～～

Umami开源地址：https://github.com/mikecao/umami
Umami官方文档地址：https://umami.is/docs/about

支持创作

制作教程不易，如果热心的小伙伴，想支持创作，可以加入我们的电圈（还可以解锁远程协助、好友位😃）：

WebChart Recognise

当然，也欢迎在B站或YouTube上关注我们：

更多：

辅助视频

嘿嘿，做教程视频不易（B站根本不会推荐引流），请务必一键三连嗷～B站视频地址：https://www.bilibili.com/video/BV1t34y1k7De

准备工作

首先，我们看看准备工作，也就是我们需要什么前置依赖。

硬件方面，只需要一台服务器，十分推荐Linux服务器，比如：

使用博客专属链接，享受超低折扣哦。 不过，如果你需要解析域名到服务器上，目标服务器是大陆服务器，需要域名备案才可以进行 Web 服务；如果不想备案，又想使用域，可以选择 腾讯云轻量应用服务器：https://curl.mintimate.cn/1HOageMOqRj 内的香港、新加坡地区。

其次是软件方面，需要：

本次教程，为了照顾小白；同时演示常规方法和宝塔方法；小白或者在使用宝塔的用户，可以使用宝塔方法。

宝塔官网：https://www.bt.cn

需要注意，如果你选择宝塔安装，需要安装：
安装Nginx和Mysql（版本随意）

安装umami

首先当然是SSH远程连接我们的Linux服务器，如果你是第一次使用Linux服务器，不知道怎么连接服务器，可以查看教程：

克隆umami仓库

首先我们需要克隆umami的仓库：https://github.com/mikecao/umami

通常情况，umami并没有发布方法包，我们直接用git进行克隆即可：

1
git clone https://github.com/mikecao/umami

如果你的服务器无法连接GitHub，可以使用Github加速

克隆umami仓库

安装依赖

之后，我们就可以安装依赖：

1
2
3
4
# 进入刚刚克隆的仓库内
cd umami
# 使用NPM进行依赖安装
npm install

umami安装依赖

之后，我们要初始化数据库。

初始化数据库

初始化数据库，这里给大家演示两个方法：

  • 常规方法：自己配置和安装MySQL数据库情况下操作。
  • 宝塔方法：使用宝塔安装数据库的情况下操作。

如果你想使用宝塔方法，但是并不知道怎么安装宝塔面板：

如果你并不想使用宝塔面板，但是不知道怎么手动配置MySQL/MariaDB，参考文章：

常规方法（推荐非小白）

常规方法，确保你已经安装了MySQL或者MariaDB，我处于个人习惯，安装的是MariaDB：
安装的MariaDB版本

很简单，我初始化数据库的步骤：登录数据库-创建新数据库-创建新用户-绑定数据库-用umami自带的SQL初始化。

如果你有什么其他需求，可以执行更改（比如：如果不需要安全，可以直接用root用户初始化数据库）。

登录数据库太简单了，我设置数据库是本地登录不需要密码，所以：

1
2
# 登录数据库
mariadb

登录MariaDB

数据库与用户

相信看常规方法的小伙伴，肯定对SQL语句有所了解，我就粗略说一下：

1
2
3
4
# 创建一个用户，并仅允许本机访问
CREATE USER 'umami'@'localhost' IDENTIFIED BY 'E51H1c1c';
# 创建一个数据库
CREATE DATABASE umami;

创建数据库与用户

其中：

  • E51H1c1c：我设置的数据库密码，使用Mintimate在线工具箱-随机强密码自动生成。
  • 数据库和用户名我都取名为umami，方便分类。
  • 我只允许本地登录，方便进行安全管理。

用户权限赋予

之后，我们把新建的数据库，交给新建的用户去管理：

1
GRANT ALL ON umami.* TO 'umami'@'localhost';

之后退出MariaDB的交互：
退出交互

SQL初始化

umami自带SQL文件，让我们来初始化数据库：
自带的SQL文件

所以，我们提取运行即可：

1
mariadb -u umami -p umami < sql/schema.mysql.sql

其中：

  • -u umami：使用umami账户；
  • -p umami：理论上-p代表使用密码，但是这里代表使用密码访问，umami代表访问的数据库。

SQL初始化

到此，SQL的初始化就完成了，可以登录MariaDB里看看：
SQL初始化

宝塔方法（推荐小白）

宝塔方法就很简单了，在宝塔内，新建数据库即可：
宝塔面板内新建数据库

获取的数据

之后，回到Terminal内，用使用umami自带的SQL文件进行数据库初始化：

1
mysql -u umami -p umami < sql/schema.mysql.sql

SQL初始化

其中，密码会自动隐藏哦，直接宝塔后台复制后，到这里进行粘贴即可。

到此，SQL的初始化就完成了。

配置环境

umami需要我们配置一个.env的环境在umami根目录，之后umami会读取这个文件进行数据库的连接和“Hash加盐”。

1
vim .env

我们直接用vim进行创建，并写入：

1
2
DATABASE_URL=mysql://umami:E51H1c1c@localhost:3306/umami
HASH_SALT=Mintimate

配置环境

其中：

  • 第一个umami为用户名
  • E51H1c1c为用户密码
  • 第二个umami为数据库
  • HASH_SALT为Hash加盐字符，任意字符串即可。

配置好以后，保存并推出即可。如果你并不知道vim的操作，可以使用宝塔面板操作，或者查看文章：

或者直接使用宝塔面板进行操作：
腾讯云轻量应用服务器宝塔镜像

因为我同时买了两台轻量应用服务器进行演示（一台宝塔镜像，一台Debian），所以Umami的安装地址有时候不一样；大家要记住自己的Umami安装地址哦。

构建umami

最后，我们可以更具自己的配置（数据库），进行umami的构建，很简单，使用命令：

1
npm run build

注意，这里需要下载依赖包，而依赖包下载地址并没有中国大陆节点；所以，大陆服务器可能会构建比较慢，甚至构建失败。（腾讯云轻量应用服务器的香港、新加坡地区会比较快）

构建失败，就重新运行一次npm run build

构建中……
构建成功……

运行umami

之后，我们可以使用：

1
npm run start

启动umami：
启动成功……

这个时候，用浏览器就可以访问了。但是为了使用更方便，我们使用Nginx进行反向代理。

后台运行

另外，推荐后台运行umami，可以使用screen：https://www.mintimate.cn/2021/09/02/howToUseScreen/

当然，你也可以注册为systemctl服务，注册内容参考：

1
2
3
4
5
6
7
8
9
10
11
12
[Unit]
Description=NodeServer

[Service]
ExecStart=/……/npm start
Restart=always
Environment=PATH=/usr/bin:/usr/local/bin:/……node/bin
Environment=NODE_ENV=production
WorkingDirectory=/YourWorkPath/umami/

[Install]
WantedBy=multi-user.target

最后效果：
使用systemctl

这个……有机会本篇文章视频化，给大家演示一下

Nginx反向代理

为了能使用Https访问，或者说用443、80端口访问，而不是奇怪的IP+3000端口，这样的奇怪方式访问umami，我们使用Nginx进行反向代理：

常规操作

常规操作，就是我们自己编译安装的Nginx，我们编译Nginx配置，添加反向代理配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
location =/api/collect {
    proxy_pass http://127.0.0.1:3000;
        proxy_buffering on;
        proxy_http_version 1.1;
        proxy_ssl_session_reuse off;
        proxy_ssl_server_name on;
        proxy_set_header X-Forwarded-Proto https;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Host  $host;
}
location /{
    proxy_pass http://127.0.0.1:3000/;
}

Nginx配置

宝塔操作

当然，你也可以使用宝塔进行操作：
首先是宝塔添加域名：
宝塔添加域名

之后是反向代理：
Nginx配置

如果你并不知道域名解析，可以参考腾讯云的DNS文档：https://cloud.tencent.com/document/product/302/2589

如何使用

首先：

  • umami的默认用户名为：admin
  • umami的默认密码为：umami

默认用户名和密码

进入到后台，创建一个网站：
添加网站

之后，我们复制跟踪代码，到自己网站的<head>内粘贴即可：
添加网站
添加网站

我是Vue项目，放到根目录的index.html即可；重新部署：
网站head
即可跟踪网站数据：
网站数据开始追踪

最终效果

最终效果

当然，还可以看看用户来源：
最终效果2

唯一有点不足的是，IP库不是很全：
最终效果3

Q&A

无法追踪自己的网站

无法追踪的情况很多。但是最近一次，源自一个网友，他问我为什么无法追踪他的GitHub Pages网站。我一看，GitHub是Https请求，Umami还是默认的3000端口，这种情况怎么可能可以追踪呢？

Https只能请求Https的JS、CSS等资源，这不仅仅是浏览器要求，也是Https的要求，不让使用Https的安全性大大降低。

所以，如果你搭建了Umami，需要追踪自己的网站，记得使用Nginx进行反向代理！！！

END

到此，Umami就安装和部署网站了。是不是还有小伙伴想知道如何进行OTA升级呢？其实官方也提供了方法，只需要在Umami没有运行情况下，重新pull并进行依赖安装和构建即可：

1
2
3
4
5
6
7
8
# 此时Umami没有运行，Terminal处于Umami地址内
git pull
# 依赖重新安装
npm install
# 重新构建项目
npm run build
# 重新启动项目（如果有配置Systemctl，可以使用）
npm run start

若对文章很感兴趣，可以B站关注我ヾ(≧▽≦*)o

点此跳转“爱发电”页面(○｀ 3′○)
Code > 工具
#Web #Web统计
使用Umami为自己的网站统计访问流量并可视化数据
https://www.mintimate.cn/2022/03/02/deployUmami/
作者
Mintimate
发布于
2022年3月2日
许可协议