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

本文最后更新于:2022年4月9日 晚上

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

远程辅助

提供远程辅助(QQ:198330181),可以远程辅助的人群:

  • 打赏捐赠用户,即:捐赠一杯咖啡以上的用户。
  • 使用我们专属链接购买服务器首单满200元的用户
  • B站关注我们满六个月。因为有粉丝,根本没看教程,就来找我,想让我远程搭建好。居然这样,那我写教程的目的是什么?因此,暂时取消该福利。

上诉条件满足其一即可。远程辅助保证能运行服务器,如果需要其他Linux指导或其他问题(如:搭建网站等),额外商务需求,定制价格另算。

远程辅助,仅仅为额外功能;主要是太多人,图文教程都不看、B站视频也不看就直接 来问我们,我们又没那么多时间,一遍一遍重复博客和视频内容,有的看我们教程,一点都不客气,还发恶心的表情;有的看不懂教程,不懂提问就算了,还在评论区、视频里恶语相向。为此,不再提供免费辅助。

一切博客教程,均可自己按图索骥,不用担心没有远程辅助就不能实现。^_^

辅助视频

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

准备工作

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

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

推荐在博客专属腾讯云优惠链接内购买轻量应用服务器哦,不过需要备案才可以绑定域名进行Http服务,进而进行Https;如果不想备案,又想Http/Https,可以选择腾讯云轻量应用服务器: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,可以使用screenhttps://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′○)