Featured image of post 如何不花一分钱搭建 Umami 统计工具

如何不花一分钱搭建 Umami 统计工具

好兄弟的博客数据统计被我看到了,不用爬梯子就能看,而且可以公示,界面简洁支持中文,非常符合我的需求,话不多说,开整!

Umami 是什么?

官网 的介绍如下:

Umami is an open source, privacy-focused alternative to Google Analytics.

Umami 是谷歌分析的开源且注重隐私的替代方案。

至于它能收集什么信息,你可以看我的 Umami 数据统计。这个多语言确实香,看得懂英文不代表乐意看。

搭建这个比搭博客复杂一些,因为需要用到数据库,这个数据库还需要可以白嫖,因为我并不打算花钱买一个 VPS(虚拟专用服务器),其实就是嫌麻烦。

找教程

第一步当然是找教程!由于博客是利用 Vercel 搭建的,那这个 Umami 自然也想接着用它嫖一个出来。正好,官网有一篇 Running on Vercel 的教程,直接开看。

前边都「嗯,嗯,对,对」,然后看到 DATABASE_URL 这个环境变量直接懵逼——这什么东西?数据库?我没有啊!是的,我一开始并不知道这个小东西还需要额外搞一个数据库才行,好嘛,那我想办法搞一个来。

于是利用必应搜索,搜索出来一篇 少数派 的文章,叫做 从零开始搭建一个免费的个人博客数据统计系统(umami + Vercel + Heroku),我心说这个好,少数派的公众号我有关注,看他们的文章质量挺不错,希望这一篇文章把问题全解决。然后翻到底下评论区一看,有人留言说:

坏消息,Heroku 的免费计划要无了(

https://blog.heroku.com/next-chapter

我不信邪,直接去注册了一个 Heroku 的账号试了一下,果不其然,寄了,这条路直接堵死。

于是就开始搜「类似 Heroku 的数据库服务提供商」,一通找啊,找到一个叫做 Supabase 的,感觉可以,一看 Umami 官网,还有一篇 Running on Supabase 呢!感觉稳了。结果发现根本不是那么回事儿,整个过程实在是太抽象了,我也从来没搞过数据库,又卡住了。

但是基本的服务已经确定是 Vercel + Supabase 的组合了,那么就按照这些关键词去找,找到一篇 使用 vercel+supabase 免费部署 umami,非常高兴,一步一步照着做,前边都很顺利,然后死在了部署这一步,报错。一看评论区,嘿!有个哥们儿分享了自己的方法,于是点过去看了看——在 Vercel 部署 umami 网站统计及报错解决,哎,这个好,试试吧!

一顿鼓捣,结果是,Umami 确实部署成功能访问了,但是,登录不进去!又寄了。

我想,这篇教程已经是中文教程里面最优秀的一批了,中文不行,那我看英文的嘛!直接谷歌三个关键词 umami vercel supabase,于是找到了真正可以「follow 它 exactly」的教程——How to run Umami Analytics + Supabase + Vercel for free,这个是真的保姆级,简直是手把手,确实细致。

实操与问题解决

执行到「[Caution] How to solve problem at the deployment with v1.39.0」一节,遇到问题,它要求「Clone the forked Umami repository to local」,但实际上这在我的 M1 Mac 上是不可行的,解决方案是看 前面提到的一篇教程 的「报错解决」里的第一句话:

你需要准备一台 Linux x86 VPS(不能是 ARM64)。如果没有,建议使用 GitHub Codespaces 来操作。

使用 GitHub Codespaces 确实可以,打开它是一个在线的 Visual Studio Code 页面,可以像本地一样运行那些代码,于是就把这一节完成了。

后面就一步一步继续跟进,直到部署完成。

由于此文没有讲解部署成功后要怎样具体配置 Umami,因此,还需要参考 少数派教程「访问 Umami 服务」及其后面的章节。

解决「PGBouncer 和 IPv4 弃用」问题

2024 年 2 月 2 日更新!

Supabase 给我发了好多好多封邮件来提醒我 这个问题

简单来说,IPv4 物以稀为贵,云提供商开始收费,所以 Supabase 将会把 db.projectref.supabase.co 解析到 IPv6。

同时,PgBouncer 被弃用,其替代品名为 Supavisor。在 How to run Umami Analytics + Supabase + Vercel for free 的「How to solve problem at the deployment」一节,我们可以看到 DATABASE_URL 使用了 PgBouncer:

1
DATABASE_URL=postgres://postgres:[YOUR-PASSWORD]@[HOST]:6543/postgres?pgbouncer=true

如果继续通过该链接使用 PgBouncer,我们的数据统计将停摆。为此,我们需要更新 DATABASE_URL。下面,我们到 Supabase 获取新的可用链接:

通过图中步骤即可复制出新的链接

注意将链接中的 [YOUR-PASSWORD] 部分替换掉,它在你之前填入 Vercel 的 DATABASE_URL 里就有,复制粘贴出来即可。

在用新链接替换掉 DATABASE_URL 中的旧链接后,只需要重新部署,你的 Umami 就复活了。

注意事项

根据我走过的各种弯路,得到如下经验:

  1. Vercel 的服务器在哪,Supabase 的服务器最好也选在哪;
  2. DATABASE_URL 的格式要特别注意!必须形如 postgres://postgres:[YOUR-PASSWORD]@[HOST]:6543/postgres?pgbouncer=true,要特别留意开头是 postgres 而非 postgresql,还有末尾的 ?pgbouncer=true[YOUR-PASSWORD][HOST] 是替换项,因人而异,不要直接丢到 Vercel 和 .env 文件里面;
  3. 在 Supabase 创建服务器并设置服务器独立密码时,应采用网站界面上直接提供的密码生成器,如果自己生成的密码字符类型过于复杂(比如带了特殊符号),会导致部署阶段不支持;
  4. .env 文件是直接创建在 Umami 文件夹里面的,和 README.md 这些文件同层;
  5. 如果你用的是和我一样的主题 Stack,则用于统计的脚本引入代码应加在 layouts\partials\head\script 目录下;
  6. 由于我们会为 Umami 配置域名,所以应该用域名访问并复制脚本引入代码;不要用 Vercel 自动生成的域名来打开 Umami 并引入代码,因为那样引入的统计脚本很可能会被墙出去,导致无法统计中国大陆用户的访问情况。
Written by ZexWoo. All rights reserved.
主题 StackJimmy 设计 | 使用 Hugo 搭建