umami 和 plausible 都是非常受欢迎的开源的 google analytics 的替代品,都提供了开源服务和 cloud 付费托管服务,功能非常强大,plausible 的新版本部署有些麻烦,很容易出错,我转而使用了 umami。
最近要构建多租户的网站流量监控,umami 恰好提供了通过 api 创建站点,查看站点数据的功能,我打算拿到这些数据之后,通过 recharts 自建图标的方式对用户的访问数据进行统计展示。
plausible 和 umami 的文档写的一般,导致我在实现这部分功能时,频频踩坑,所以把内容记录下来。
代码修改
umami 是开源的 google analytics 类似的服务,github repo 地址 直接将代码 fork 拉取到本地并进行一定的修改,我这里是拉取的 v3.1 最新版本,只修改 docker-compose.yml 即可,最终 docker-compose.yml 文件如下:
---
services:
umami:
image: ghcr.io/umami-software/umami:latest
networks:
- umami-network
ports:
# 此处端口替换为自己用的
- "61201:3000"
environment:
DATABASE_URL: postgresql://ctree_max:ctreeisthebest001@db:5432/umami
APP_SECRET: VyMhYXOr5VOVSh62RBFErzy36foOz+b0anzjdTs5ICw=
depends_on:
db:
condition: service_healthy
init: true
restart: always
healthcheck:
test: ["CMD-SHELL", "curl http://localhost:3000/api/heartbeat"]
interval: 5s
timeout: 5s
retries: 5
db:
image: postgres:15-alpine
networks:
- umami-network
environment:
POSTGRES_DB: umami
# 数据库用户名和密码进行修改
POSTGRES_USER: meepo_max
POSTGRES_PASSWORD: meepoisthebest001
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:
# 网络显式声明一下,我当时部署的时候遇到点问题
networks:
umami-network:
driver: bridge
总计进行了 3 项修改
1、修改对外的端口暴露
2、显式声明 network 内部连接
3、修改默认的数据库和密码
部署
使用 dokploy 直接部署 umami 服务,对 dokploy 服务不熟悉的可以查看我的 dokploy 入门文章介绍。
1、创建 project -> service -> 选择 compose

2、填写名称

3、关联自己的 github 账号对应的 repo,并制定 docker compose 的文件地址,配置完成之后点击 Deploy 按钮 即可。

再指定一个域名,以及对应的 3000 端口映射,SSL 证书自动配置

访问自己配置的自定义域名,用户名默认是 admin,密码默认是 umami (后续可在管理后台进行修改),进入页面,可以自己添加 website

添加完 website,还需要将具体的 script 代码嵌入到自己的目标站点中,点击 Edit

将 script 代码添加到目标站点中,即可收集数据了。

注意这里有个 share url ,你可以将目标站点的访问数据公开给别人展示。
Umami API 使用
umami 提供了自部署版本和 cloud 版本,不要混淆了,从umami api 官方文档这里可以看到,对于自部署的和 umami 的调用节点,以及 api key 的获取都不一样,这里其实挺坑的,文档没有做好提醒。
在 umami cloud 注册登录后,可以在管理后台看到 Api keys 的管理入口,进去之后直接创建 api key 就可以用了。

但是自部署的版本,是没有这个 api keys 的入口的,而是要通过 api 的方式,先进行 api 调用登录,拿到接口返回的 token,用这个 token 值来充当 api key 去进行 api 的不同方法的调用,天啊撸,第一次见到这么反人类的,需要在 Authentication 页面中按官方的介绍,调用登录接口获取到 token,然后就可以调用它的 Endpoints 中的对应 API 了

Discussion