前言#

在 PB-Website 完成重构后需要一个平台帮忙做访问统计。经过一番研究后，整理了几个比较知名的平台及其对应的免费版额度：

平台	保存事件条数	开通项目个数	数据保留时长	自定义事件	UTM 参数	是否使用 Cookie
Google Analytics	无限制	100	14 个月	✓	✓	是
Microsoft Clarity	无限制	无限制	13 个月 (录屏 30 天)	✓	✓	是
Vercel Web Analytics	50000	无限制	1 个月	×	×	否
Cloudflare Web Analytics	无限制	10 (CF未代理)	6 个月	×	×	否
Umami Cloud	每月 10 万条	最多 3 个网站	6 个月	✓	✓	否
自托管 Umami	无限制	无限制	永久 (取决于数据库)	✓	✓	否

我的需求是能够较为长期地保存访问数据，同时我很讨厌某些网站弹出来问我 是否接受 Cookies 的弹窗以及点击 只允许必要 Cookies 的过程，虽然有能够自动帮忙点这个弹窗的浏览器插件，但是还是很反感这个弹窗本身的存在，也更不想把这种体验带给别人，但是仍然要尊重访问者的隐私而不是直接偷拿数据。

经过比较，我决定选择 Umami。它是一款开源的注重隐私的现代分析平台，无需 Cookie 就能够收集分析数据，因此不需要弹出 Cookies 窗口，同时提供了所有我所需要~~和不需要~~的功能。

umami-software

umami

Waiting for api.github.com...

00K

Waiting...

一开始我选择的是官方的 Umami Cloud，但是后来发现可以使用完全免费的方案自己部署 Umami 后义无反顾地选择了自托管。

Important

注意，如果选择自托管部署，则只有付费计划能将数据导入至 Umami Cloud，如果你后续打算迁移到官方服务请仔细考虑，建议先使用官方服务体验一下能不能满足需求再决定要不要自托管部署

先决条件#

一个 GitHub 账号
一个 Vercel 账号
（可选） 一个 Neon 账号

关于 Neon

本教程中使用 Neon 提供 PostgreSQL 数据库，你也可以使用 Supabase、Aiven 之类的平台或者自己配置数据库连接来替代。如果没注册过的话在部署流程中会使用 Vercel 账号自动注册一个

部署#

1. 部署 PostgreSQL 数据库#

如果你有自己的 PostgreSQL 数据库可以跳过这一步
~~什么你说没有怎么办？没有的话就跟着教程走啊~~

点击 Create Database，选择 Neon，点击 Continue

选择一个地区，并且禁用 Auth，下方保持默认的免费方案就好，点击 Continue

Tip

地区推荐选择 Singapore (Southeast) sin1，地理位置上距离中国大陆最近。请记住这个地区，后续部署 Umami 的时候可以选择相同/相近的地区以提高数据库响应速度。

为你的数据库取一个好记的名字 ~~比如Ciallo就很好记~~，点击 Continue

完成部署！现在你可以先保留这个页面，在完成下一步后回来点击 Done 并在跳转到的页面中选择 Umami 来快速配置数据库，然后执行一次重新部署

2. 在 Vercel 上部署 Umami#

Tip

Umami 官方提供了一个链接，你可以 点击这里 快速完成下方教程的 1 ~ 4 步
如果手动 Fork 官方仓库后导入，则可以在 GitHub 网页端快速同步主仓库 commit（缺点是无法把仓库设置为 Private）

以下内容参考自 Umami 官方文档：

将 https://github.com/umami-software/umami 项目 Fork 到您的 GitHub 帐户

在 Vercel 上创建一个帐户

在仪表板页面上点击“导入项目”，然后指定您在 GitHub 上 Fork 的项目 URL

将所需的 DATABASE_URL 环境变量添加到您的 Vercel 项目中。这些值在安装步骤的“配置 Umami”中定义

部署

Note

你需要为 Umami 使用 POSTGRES_PRISMA_URL，其形式为 postgres://user:passwd@endpoint-pooler.postgres.vercel-storage.com/verceldb?pgbouncer=true&connect_timeout=10
用于数据库 URL 的环境变量可以在 db/postgresql/prisma.schema 文件中更改
官方文档中提到的“Vercel Postgres”服务已停运，不再可用

回到刚刚创建数据库的页面，选择你创建的 Umami 项目来快速配置数据库，然后前往项目页面执行一次重新部署
- 如果你已经关闭了那个页面：
  1. 前往 Storage → <你的数据库名> 找到 POSTGRES_PRISMA_URL 并复制等号右边的值（记得在右边点开Show secret显示明文）
  2. 打开你的 Umami 项目，在 Settings → Environment Variables → Add Environment Variable 填入环境变量，Key 填写 POSTGRES_PRISMA_URL，Value 粘贴你刚刚复制的值，保存后 Vercel 会提示你重新部署，确认即可
- POSTGRES_PRISMA_URL 的形式为 postgresql://user:password@ep-*****-******-*******-pooler.ap-ciallo-1.aws.neon.tech/neondb?connect_timeout=15&sslmode=require （你直接复制粘贴我这个是没用的喵=w=）
  配置环境变量

3. （可选）配置自定义域名#

Important

Vercel 会为每个项目默认分配一个形如 <project-name>.vercel.app 的域名，但该域名在中国大陆地区无法访问，因此强烈建议添加一个你自费购买的域名来提供服务

回到你的 Umami 项目页面，在左边导航栏点击 Domains（如果遇到 404 尝试刷新一下页面），然后点击右上角的 Add Domain 。在弹出的窗口中填入你的域名并确认，根据你的 DNS 提供商的说明设置 CNAME

如果你的域名使用 Cloudflare 管理 DNS，Vercel 会提供一个选项跳转到 Cloudflare 快速设置 DNS

添加好后可以直接点击默认域名旁边的 Edit → Remove 移除默认域名 ~~这个，不需要了~~

如果你希望新添加一个以 .vercel.app 结尾的自定义子域名，直接在 Add Existing 输入完整的子域名即可

4. 登录 Umami#

Caution

请务必在登录后更改默认账户密码！

回到你的 Umami 项目页面（Overview），在右侧找到 Domains，点开下方你添加的域名（或者 Vercel 分配给你的默认域名），进入 Umami 登录页面
使用默认管理员账户登录
- 默认用户名：admin
- 默认密码：umami

登录后点击侧边导航下拉菜单，然后点击设置

导航到个人资料并点击更改密码按钮

输入新密码并保存

Tip

页面左下角可以切换语言
点击侧边导航下拉菜单，然后点击管理员可以修改默认用户名

5. 添加你的第一个网站#

在网站页面点击右上角添加网站，在弹出的窗口中输入网站名和域名（域名不需要添加 https:// 协议头）并保存
打开你添加的网站页面，点击右上角编辑，复制页面中的跟踪代码
在你自己网站的 <head> 部分插入跟踪代码并更新网站

**大功告成！**试着访问一下你的网站吧，数据应该会立即出现在你的 Umami 控制面板里面！

DLC 1：提高数据库响应速度：自定义 Vercel 函数运行位置#

还记得前面部署 Neon 数据库时选择的地区吗？你可以修改 Vercel 运行 Umami 的地区，降低 Umami 访问数据库的延迟，提高响应速度

在 Vercel 控制台中打开你的 Umami 项目页面
点击左侧导航栏下方的 Settings → Functions
在Function Region中选择函数运行地区，建议与数据库所在地区保持一致（如 Asia Pacific → Singapore (Southeast) - ap-southeast-1 - sin1）

DLC 2：通过 Vercel 代理 Umami Analytics#

该部分内容参考自 Umami 官方文档

如果你的网站也部署在 Vercel 上，你可以使用 Vercel 的重写功能代理 Umami Analytics，以便从你网站的域名提供 Umami Analytics 服务。这在使用 Umami Cloud 时对于绕过广告拦截器也很有帮助

在你网站项目的根目录中，添加 vercel.json 文件，内容如下：

1
{
2
  "rewrites": [
3
    {
4
      "source": "/stats/:match*",
5
      "destination": "https://cloud.umami.is/:match*"
6
    }
7
  ]
8
}

自托管 Umami 请注意替换其中的 https://cloud.umami.is 部分为你的自托管 Umami 实例的 URL

跟踪代码脚本标签应使用 /stats/script.js 作为 src 值：

1
<script
2
  defer
3
  src="/stats/script.js"
4
  data-website-id="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
5
></script>

DLC 3：共享链接#

想要展示你的网站访问数据给访客看吗？可以在 Umami 控制面板的设置里开启共享链接

截至目前（v3.0.2）自部署 Umami 的分享链接只能分享 Overview 页面的数据（Umami Cloud 可以自定义分享范围）

音乐

音乐

前言#

先决条件#

部署#

1. 部署 PostgreSQL 数据库#

2. 在 Vercel 上部署 Umami#

3. （可选）配置自定义域名#

4. 登录 Umami#

5. 添加你的第一个网站#

DLC 1：提高数据库响应速度：自定义 Vercel 函数运行位置#

DLC 2：通过 Vercel 代理 Umami Analytics#

DLC 3：共享链接#

参考文献#

支持与分享

评论区

音乐

目录

音乐

音乐

使用 Vercel 和 Neon 免费部署自托管 Umami

前言#

先决条件#

部署#

1. 部署 PostgreSQL 数据库#

2. 在 Vercel 上部署 Umami#

3. （可选） 配置自定义域名#

4. 登录 Umami#

5. 添加你的第一个网站#

DLC 1：提高数据库响应速度：自定义 Vercel 函数运行位置#

DLC 2：通过 Vercel 代理 Umami Analytics#

DLC 3：共享链接#

参考文献#

支持与分享

评论区

音乐

目录

3. （可选）配置自定义域名#