使用Vercel自建Umami数据统计

文章摘要

青稚Ai

前言

本教程以Vercer和Aiven免费数据库为例，不止可以用Vercer托管，也可以选择Netlify等，数据库也可以选择其他免费数据库服务，详细的请观看官方文档。

准备

注册Github，Vercer，Aiven，Cloudflare（如何注册就不写了，注册非常简单）

创建数据库

注册好Aiven后创建 MySQL 数据库
创建数据库

设置MySQL数据库，数据库位置选择亚太地区
设置数据库

设置Vercel

注册好Github后，Fork Umami仓库

打开Vercel选择Fork的仓库
选择Fork的仓库

复制 Service URI 到Vercel的环境变量中添加DATABASE_URL
复制Service URI

设置DATABASE_URL环境变量

可选：非必要环境变量TRACKER_SCRIPT_NAME，设置Umami跟踪器名称（可填写自己喜欢的值），避免默认名称被广告拦截器拦截导致追踪失败。
设置环境变量

设置自定义域名（由于Vercel自分配域名被墙，国内访问不到）
自定义域名1
自定义域名2

设置Umami

默认用户名为 admin ，默认密码为 umami，可在登录后自行修改（推荐修改默认密码，防止他人作恶）

创建新用户

进入设置—用户—创建新用户并设置密码，设置权限为仅浏览量（防止后续教程默认用户的Token被人作恶）

创建团队

进入设置—团队—创建团队

后面是把需要统计的网站添加到团队，切换到团队-设置-网站-添加网站即可，这个比较简单，不过多描述。
创建团队

记录访问代码

进入设置—团队—点击创建的团队—查看详细信息

登陆新用户

退出登陆—登陆新用户—输入新创建的用户名和密码，之后进入设置—团队—加入团队—输入访问代码

Cloudflare-Workers搭建Umami数据接口

前往 Hoppscotch获取Token

输入新创建的用户名和密码
Hoppscotch1

成功后返回Token信息
Hoppscotch2

前往Cloudflare，创建一个Workers，设置好名称，确认部署并等待

部署完成，点击右上角编辑代码，修改worker.js的内容（部分内容需修改为自己的数据）

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event));
});

const API_BASE_URL = 'umami地址';
const TOKEN = '获取到的token';
const WEBSITE_ID = '网站在umami中的website ID';
const CACHE_KEY = 'umami_cache'; // 缓存
const CACHE_TIME = 600; // 缓存时间，单位秒

async function fetchUmamiData(startAt, endAt) {
  const url = `${API_BASE_URL}/api/websites/${WEBSITE_ID}/stats?startAt=${startAt}&endAt=${endAt}`;
  const response = await fetch(url, {
    headers: {
      'Authorization': `Bearer ${TOKEN}`,
      'Content-Type': 'application/json'
    }
  });

  if (!response.ok) {
    console.error(`Error fetching data: ${response.statusText}`);
    return null;
  }

  return response.json();
}

async function handleRequest(event) {
  const cache = await caches.open(CACHE_KEY);
  const cachedResponse = await cache.match(event.request);

  if (cachedResponse) {
    return cachedResponse;
  }

  const now = Date.now();
  const todayStart = new Date(now).setHours(0, 0, 0, 0);
  const yesterdayStart = new Date(now - 86400000).setHours(0, 0, 0, 0);
  const lastMonthStart = new Date(now).setMonth(new Date(now).getMonth() - 1);
  const lastYearStart = new Date(now).setFullYear(new Date(now).getFullYear() - 1);

  const [todayData, yesterdayData, lastMonthData, lastYearData] = await Promise.all([
    fetchUmamiData(todayStart, now),
    fetchUmamiData(yesterdayStart, todayStart),
    fetchUmamiData(lastMonthStart, now),
    fetchUmamiData(lastYearStart, now)
  ]);

  const responseData = {
    today_uv: todayData?.visitors?.value ?? null,
    today_pv: todayData?.pageviews?.value ?? null,
    yesterday_uv: yesterdayData?.visitors?.value ?? null,
    yesterday_pv: yesterdayData?.pageviews?.value ?? null,
    last_month_pv: lastMonthData?.pageviews?.value ?? null,
    last_year_pv: lastYearData?.pageviews?.value ?? null
  };

  const jsonResponse = new Response(JSON.stringify(responseData), {
    headers: {
      'Content-Type': 'application/json',
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
      'Access-Control-Allow-Headers': 'Content-Type, Authorization'
    }
  });

  event.waitUntil(cache.put(event.request, jsonResponse.clone()));

  return jsonResponse;
}