使用 CloudFlare 部署 Umami API

Sat, 12 Oct 2024 16:05:00 +0800

注意

此方法仅适用于Umami V2版本， V3版此方法不适用

前言

最近在大家的疯狂安利下，捣鼓上了这样一款可以部署在Docker上的前端统计应用。前几天也试着将其部署在Vercel了。特别是木木老师，更是直接放出了《前端调用 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

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

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

返回数据

最后在页面中嵌入。

收集的API

Tue, 14 Nov 2023 09:45:19 +0800

在此收集一些不需要Token认证的API。

推荐的API

在此推荐一些比较好用的 API ，皆为从网上收集，其中的 {url} 部分替换成你自己的网址，{height} 为高度，{width} 为宽度。顺便我会放上预览图，实时检测该API是否失效。

自动生成缩略图的API - WordPress

https://s0.wp.com/mshots/v1/{url}?w={width}&h={height}
https://s1.wp.com/mshots/v1/{url}?w={width}&h={height}
https://s2.wp.com/mshots/v1/{url}?w={width}&h={height}
https://s3.wp.com/mshots/v1/{url}?w={width}&h={height}
https://s4.wp.com/mshots/v1/{url}?w={width}&h={height}
https://s5.wp.com/mshots/v1/{url}?w={width}&h={height}

示例

图片加速接口API

WordPress

https://i0.wp.com/{url}
https://i1.wp.com/{url}
https://i2.wp.com/{url}
https://i3.wp.com/{url}

其中url部分是不带协议头的，即http://、https://

百度加速

https://image.baidu.com/search/down?url={url}

url填完整url，注意该url需要是直链，重定向链接会失效。

CDNjson

(旧)https://cdn.cdnjson.com/{url}

(新)https://cdn.cdnjson.com/pic.html?url={url}

其中url部分是不带协议头的，即https://
注意该url需要是直链，重定向链接会失效。

Favicon图片获取接口API

Favicon.im

<img src="https://favicon.im/hey.com" alt="hey.com favicon" />   // 小尺寸
<img src="https://favicon.im/hey.com?larger=true" alt="hey.com favicon (large)" />   // 大尺寸

示例

API on SUUS

使用 CloudFlare 部署 Umami API

前言

教程

获取 Umami API Token

通过 CloudFlare 部署 API

收集的API

推荐的API