建站与专题← 返回文章列表

项目接入 Umami 统计：基于 Vercel 与 Supabase 的零成本部署实践

记录使用 Vercel 托管开源 Umami 并配合 Supabase PostgreSQL 数据库的自建流程，涵盖数据库连接池配置、环境变量、自定义域名接入与 Next.js 客户端统计集成。

LJ
李建辉·前端全干工程师

· 9 分钟

读完你能做什么

  • 申请并配置 Supabase 免费 PostgreSQL 数据库，规避 Serverless 下的连接池配置陷阱。
  • 将 Umami 分析服务部署到 Vercel，绑定独立统计二级域名以降低广告拦截器误伤率。
  • 在 Next.js App Router 项目中接入追踪脚本，实现无感知 SPA 路由切换统计与自定义事件埋点。

start

自建分析服务的核心不是追求功能比 Google Analytics 更繁复，而是在保障访客隐私、避免广告拦截器全盘误杀的同时，以最低的运维与存储成本获取关键访问漏斗。

在个人技术博客或全栈项目的访问分析选型中，传统方案常常伴随着以下痛点：

  • Google Analytics 4 (GA4)：脚本体积偏大（往往超过 45KB），依赖第三方 Cookie 需要强制弹出弹窗提醒；在国内网络环境下加载延迟高，且几乎被所有 AdBlock 类浏览器插件无差别拦截。
  • 百度统计 / 友盟：界面陈旧，脚本偶有外链加载与隐私合规疑虑，且不易深度集成进现代化前端框架中。

Umami 是目前开源社区中最受欢迎的轻量级分析方案之一：脚本体积不足 3KB，完全无需 Cookie 即可统计唯一访客，数据 100% 掌握在自己手中。结合 Vercel（免费 Serverless 托管）与 Supabase（免费 500MB PostgreSQL），可以搭建一套长期稳定的零成本自建数据面板。

步骤一：创建 Supabase PostgreSQL 数据库

Umami 依赖 PostgreSQL 存储站点元数据与时序访问日志。Supabase 提供了开箱即用的免费托管实例用于部署 umami的环境变量：

  1. 登录 Supabase 官网  并新建一个 Project。
  2. 填写数据库密码（Database Password），所在地域建议选择与目标受众最近的节点（如 Northeast Asia (Tokyo) 或 Southeast Asia (Singapore)）。
  3. 项目初始化完成后，进入 Project Settings -> Database 面板，找到 Connection string。

连接字符串注意事项

start

在 Serverless 环境下（如 Vercel），数据库连接处理需要区分直连与连接池（Pooler）：

  • Direct Connection（端口 5432）：适合构建期执行数据库迁移（Migration）。
  • Transaction Pooler（端口 6543）：通过 PgBouncer 管理连接，适合运行时高并发请求。

步骤二：在 Vercel 部署 Umami 实例

Umami 官方提供了对 Vercel 的原生支持，无需手动编写 Dockerfile 或配置 Node.js 运行时：

1. 导入代码仓库

访问 Umami 官方仓库 ，点击右上角 Fork 到自己的 GitHub 账号；或者直接使用官方提供的一键部署链接导入 Vercel。

2. 配置环境变量

在 Vercel 项目设置中的 Environment Variables 填入以下两个核心参数DIRECT_DATABASE_URL和DATABASE_URL： start

3. 执行首次构建

点击 Deploy。Vercel 会自动拉取依赖并调用 prisma migrate deploy 将 Umami 所需的表结构（包括 website、session、website_event 等）写入 Supabase 数据库中。整个部署耗时通常在 2 分钟左右。

步骤三：初始化后台与绑定自定义域名

1. 修改默认管理员凭据

部署完成后，打开 Vercel 分配的域名访问 Umami 登录界面：

  • 默认账号：admin
  • 默认密码：umami

首次登录后必须立即在 Settings -> Profile 中修改密码，防止被全网扫描器撞库控制。

2. 绑定自定义二级域名（关键步骤）

很多去广告插件（如 uBlock Origin）默认内置了对 *.vercel.app 域名的上报过滤规则。为了保证统计数据的完整性，建议绑定自己的二级域名（例如 analytics.yourdomain.com）：

  1. 在 Vercel 项目的 Settings -> Domains 中添加 analytics.yourdomain.com。
  2. 在你的 DNS 解析服务商（如 Cloudflare 或阿里云）处添加一条 CNAME 记录，指向 cname.vercel-dns.com。
  3. 等待 Vercel 自动签发 Let’s Encrypt SSL 证书。

3. 添加被统计站点

在 Umami 控制台的 Settings -> Websites 点击 Add Website：

  • Name：项目名称（如 我的个人技术博客）。
  • Domain：博客正式访问域名（如 blog.ljhboard.cn）。

保存后，点击该站点右侧的 Edit -> Tracking Code，即可得到包含站点唯一标识（data-website-id）的代码段：

HTML
<script defer src="https://analytics.yourdomain.com/script.js" data-website-id="8f91c34a-9b12-4e56-8a7c-0123456789ab"></script>

start

官方资料

工程经验小结

这套 Vercel + Supabase + Umami 的架构对于独立博客和中小项目而言性价比极高，但在长期运行中有以下几点需要注意：

  1. 连接数耗尽防线：Vercel Serverless Function 在突发流量下会并发拉起多个函数实例，若每个实例都直接连接 PostgreSQL，可能会瞬间占满 Supabase 免费配额中的最大连接数（通常为 60）。生产环境下建议在 DATABASE_URL 中指定连接上限参数（例如 ?connection_limit=3），或者使用 Supabase 的 Transaction Pooler 端口（6543）配合 PgBouncer。
  2. Supabase 免费实例休眠机制：Supabase 免费项目在连续 7 天无 API 或数据库请求时会被自动暂停（Paused）。对于正常线上运行的博客，每日只要有零星真实访客或搜索引擎爬虫触发页面访问，数据上报就会持续写入数据库，一般不会触发休眠。若属于流量极低的个人实验站，可以借助 GitHub Actions 配置一个每周定时执行的保活 Workflow 定期查询数据库。
  3. 域名反代与脚本混淆：除了绑定第一方自定义域名避免被 AdBlock 拦截器基于域名的静态黑名单过滤外，Umami 还支持在构建期通过配置 TRACKER_SCRIPT_NAME 环境变量自定义脚本名称（例如将 script.js 替换为自定义的静态文件名），能够进一步降低被基于通用 URL 规则误拦截的概率。