Vercel+Umami实现网站流量监控

Umami 是一个简单、快速、注重隐私的网站分析工具，旨在替代 Google Analytics。它提供实时的网站访问统计、用户行为分析等功能，帮助网站管理员更好地了解网站的访问情况和用户行为。

我是通过Vercel+Umami的方式来部署的，具体步骤如下：

1.Fork 官方仓库

在 Vercel 上，通过 Fork Umami 的 GitHub 仓库，将仓库复制到你的 GitHub 账号中。

2.导入Umami项目

打开 https://vercel.com，如果没有账号需要先注册，来到 Overview 面板，点击 Add New，选择 Project

选择刚刚 fork 的 umami 项目，点击 Import，然后直接点击最下方Deploy，因为我们未提供环境变量，Vercel 会提示部署失败。不过没关系，我们先把这个Project创建起来了。

3.创建数据库

Vercel 上进入 Storage 界面。点击 Create Database，因为Umami 官方文档要求使用 PostgreSQL，所以我们选择 Neon （Serverless Postgres）数据库类型。

所在区域选默认推荐的即可，我这里显示的是华盛顿特区。

Install Plan选择Free即可，容量够我们用的了。

在创建数据库的最后步骤中，它会让你选需要连接的Project，选择我们刚才创建的umami项目即可（其他配置项不用动，包括前缀那个）。

4.重新部署 umami 项目

连接好数据库后，就可以重新部署了，点击 umami 项目，进入 Deployments 面板，找到刚才部署失败的 deployment，点击 Redeploy 重新部署，成功部署大约需要几分钟时间。

5.使用 umami 监控网站

部署完成之后，我们从部署详情中可以看到，Umami的访问地址，类似xxx.vercel.app/login这样的，初始账号密码：

UserName: admin
Password: umami

首次登录后，在左下角切换Language，然后修改管理员密码。

然后点击 Settings 面板，选择 Websites，点击 Add Website 按钮添加需要监控的域名。

接下来，为需要监控的网站添加 tracking code，点击刚刚添加的Website最右侧的 Edit，进入刚刚添加的网站，其中有一段跟踪代码，将这段 script 添加到网站的 <head></head> 中。

以 hugo 为例，我使用的hextra主题，无法直接修改主题文件。我的做法是直接复制一份 hextra 的 layouts/partials/head.html 文件到自己的 hugo 项目中，添加上 umami 提供的 tracking code。

6.Cloudflare配置Worker代理

我的 umami 在 vercel，但 vercel.app 这个域名不翻墙好像访问不到，我的 blog 在 cloudflare上，所以我打算通过Worker代理的方式。通过 Cloudflare Worker 代理，不仅能解决 vercel.app 域名被屏蔽的问题，还能顺带解决广告拦截器屏蔽统计脚本的问题，一举两得。具体步骤如下：

6.1 创建并配置 Cloudflare Worker

// 1. 请将此处的 URL 替换为你的 Vercel Umami 地址
const UMAMI_HOST = 'https://你的项目名.vercel.app'; 

export default {
  async fetch(request, env, ctx) {
    const { pathname, search } = new URL(request.url);

    // 处理 /script.js 请求，并缓存以提升性能
    if (pathname.endsWith('.js')) {
      let response = await caches.default.match(request);
      if (!response) {
        response = await fetch(`${UMAMI_HOST}/script.js`, request);
        ctx.waitUntil(caches.default.put(request, response.clone()));
      }
      return response;
    }

    // 处理所有其他 API 请求 (数据上报)
    const req = new Request(request);
    req.headers.delete("cookie"); // 建议删除 cookie 以保护隐私
    // 转发真实 IP，确保统计数据准确
    req.headers.append('x-client-ip', req.headers.get('cf-connecting-ip'));
    return fetch(`${UMAMI_HOST}${pathname}${search}`, req);
  },
};

点击保存并部署

6.2 为 Worker 绑定自定义域名

为了让统计脚本更稳定，建议给 Worker 绑定一个你自己的域名（如 umami.yourblog.com）。
在 Worker 的设置 > 触发器 > 自定义域 中添加你的域名并按提示完成 DNS 配置。

6.3 更新Blog中集成的监控代码

将你博客中原来的 Umami 统计代码，修改为指向你刚刚创建的 Worker 地址。
如果绑定了自定义域名（例如 umami.yourblog.com），代码应类似：

<script defer src="https://umami.yourblog.com/script.js" data-website-id="你的网站ID"></script>