前言
本教程以Vercel和Aiven免费数据库为例,不止可以用Vercel托管,也可以选择Netlify等,数据库也可以选择其他免费数据库服务,详细的请观看官方文档。
一、准备
注册Github,Vercel,Aiven,Cloudflare(如何注册就不写了,注册非常简单)
二、创建数据库
注册好Aiven
后创建 MySQL
数据库
设置MySQL
数据库,数据库位置选择亚太地区
三、设置Vercel
注册好Github
后,Fork Umami
仓库

打开Vercel
选择Fork的仓库
复制 Service URI
到Vercel
的环境变量中添加DATABASE_URL
设置DATABASE_URL
环境变量
可选:非必要环境变量TRACKER_SCRIPT_NAME
,设置Umami跟踪器名称
(可填写自己喜欢的值),避免默认名称被广告拦截器拦截导致追踪失败。
设置自定义域名(由于Vercel
自分配域名被墙,国内访问不到)
四、设置Umami
默认用户名为 admin
,默认密码为 umami
,可在登录后自行修改(推荐修改默认密码,防止他人作恶)
4.1 创建新用户
进入设置
—用户
—创建新用户并设置密码
,设置权限为仅浏览量
(防止后续教程默认用户的Token
被人作恶)
4.2 创建团队
进入设置
—团队
—创建团队
后面是把需要统计的网站添加到团队,切换到团队
-设置
-网站
-添加网站
即可,这个比较简单,不过多描述。
4.3 记录访问代码
进入设置
—团队
—点击创建的团队
—查看详细信息
4.4 登陆新用户
退出登陆
—登陆新用户
—输入新创建的用户名
和密码
,之后进入设置
—团队
—加入团队
—输入访问代码
五、Cloudflare-Workers搭建Umami数据接口
前往 Hoppscotch获取Token
输入新创建的用户名
和密码
成功后返回Token
信息
前往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; }
完成编辑后,保存并部署
可选:绑定自定义域名。在Workers
中点击设置,在域和路由项下添加自定义域名(受Cloudflare
限制,域名必须已托管至Cloudflare
才可绑定)
由于接入的教程十分简单,本文不再详细写明。
评论区
评论加载中...