使用 CloudFlare 部署 Umami API
2024 年 10 月 12 日
Oct
12
使用 CloudFlare 部署 Umami API
SUUS.ME

前言

最近在大家的疯狂安利下,捣鼓上了这样一款可以部署在Docker上的前端统计应用。特别是木木老师,更是直接放出了 《前端调用 Umami API 数据》 。不得不说,这个应用的可玩性成功的吸引了我的注意。

Umami 是一个高颜值可自部署的统计应用,本站也一直在使用该项目统计网站的访客数据,最后通过AI的帮助也是成功的在Memos页面中调用了umami统计的浏览数据,于是做个记录。

教程

获取 Umami API Token

如果你是在直接在 Umami 网站注册帐号使用的,可以直接在 网站后台获取 Api Token

否则,如果是自托管,需要先进行身份验证。2(本文以下内容均以自托管为例)

首先需要去 Hoppscotch 获取umami站点的登录token,然后按照下图序号选取,最后获取token备用。

POST https://your-umami-instance.com/api/auth/login

图中第5步,填入以下信息:

{
  "username": "your-username",
  "password": "your-password"
}

步骤顺序
步骤顺序

通过 CloudFlare 部署 API

登录 CloudFlare 创建一个 Workers ,修改名称并点击部署。

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

const API_BASE_URL = 'https://umami.yourdomain.com';
const TOKEN = 'your_token';
const WEBSITE_ID = 'your_website_id';
const CACHE_KEY = 'umami_cache';
const CACHE_TIME = 600; // Cache time in seconds

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;
}

通过访问部署好的地址,应该可以看见返回类似以下的数据串。

返回数据
返回数据

最后在页面中嵌入。

更新于: 09 月 16 日
2023 年 04 月 12 日
2024 年 12 月 20 日