基于开源Uptime kuma的监控服务页面搭建教程

最近，我利用空余时间，参考GitHub里大佬们的教程，利用现有服务器、域名、CloudFlare和抱脸（Hugging Face）等平台资源，陆续部署了一些自用的线上服务。

主要分三类，包括个人网站、AI应用和其他服务。AI应用比较推荐深度研究，其他服务主要是一些效率工具，比较小众。

搭建的初衷，是基于学习、效率和安全需求自用，毕竟知根知底，搭建的过程也是一种锻炼。

有需要和感兴趣的朋友，可以点击跳转，或“大橙小原”公众号底部中间“线上服务”试用（手机建议浏览器打开，因为临时域名没备案，微信打开会有提示，是正常的）。

大部分服务都是抄L站^[1]和GitHub里大佬们的教程，没啥技术含量，感兴趣的可以根据教程自己动手尝试。

除了跑通之后的成就感，还能给自己今后的工作生活提供一些便利。

试用的话，有的服务需要试用帐号或密钥，可以后台联系我获取。

接下来，我打算把自己搭建时的笔记整理成几篇文章，逐一分享这些服务的使用场景和搭建过程。

这篇文章，就先介绍这个基于Uptime kuma搭建的对外服务聚合页。

1. Uptime kuma介绍

Uptime kuma是一种易于使用的自托管监视工具。可以定时监控所有线上服务站点的可用状态，操作简单、界面美观，支持Docker和多种平台上部署。

官方提供domo临时演示服务器，可以点击试用：https：//demo.kuma.pet/start-demo^[2]

2. 我部署的页面效果

电脑端： 

公众号端：见首图。

3. 搭建步骤

我主要介绍我采用的方案搭建方式，通过抱脸（Hugging Face）接入数据库部署，CloudFlare反代。

3.1 前提准备

• 抱脸^[3]和CloudFlare^[4]帐号，免费。
• 在线数据库aiven^[5]账号，免费
• 自有域名，推荐在spaceship^[6]上购买xyz数字域名，一年不到10块钱。

3.2 主要步骤

• 3.2.1 在aiven上创建一个mysql数据库，记住这5项

  

• 3.2.2 在Hugging Face拉取uptime kuma镜像，类型填mariadb，其他对应按编号填入，然后点击Duplicate Space

  

拉取的镜像地址^[7]

如果镜像地址上没有显示复制（Duplicate Space）选项，可以切换到files库，对照创建相同的几个文件，并增加上图6个参数即可。

• 3.2.3 创建 data/db-config.json 文件，复制下面代码填入：data/db-config.json
  {
  “type”: %(ENV_UPTIME_KUMA_DB_TYPE)s,
  “host”: %(ENV_UPTIME_KUMA_DB_HOSTNAME)s,
  “port”: %(ENV_UPTIME_KUMA_DB_PORT)s,
  “user”: %(ENV_UPTIME_KUMA_DB_USERNAME)s,
  “password”: %(ENV_UPTIME_KUMA_DB_PASSWORD)s,
  “database”: %(ENV_UPTIME_KUMA_DB_NAME)s
  }

• 3.2.4 进入cloudflare反代

第一步、获取我们的访问地址

第二步、进入cloudflare 的 Workers 和 Pages^[8]创建应用程序，编辑如下代码，然后 保存并部署：

export default {
async fetch(request, env) {
const _url = new URL(request.url);
const hostname = _url.hostname;
_url.hostname = "xxx.hf.space";
const req = new Request(_url, request);
req.headers.set('origin', 'https://xxx.hf.space');

const res = await fetch(req);
let newres = new Response(res.body, res);
let location = newres.headers.get('location');
if (location !== null && location !== "") {
*// 可选 - >*
*// 去除原始路径中的 /dashboard*
location = location.replace('/dashboard', '');
*// 添加 /status/web 路径*
location = location + '/status/web';
*// <- 可选*
location = location.replace('://xxx.hf.space', '://'+hostname);
newres.headers.set('location', location);
}
return newres;
},
};

第三步、将自己的域名添加到自定义域

• 3.2.5 按需把域名加到公众号的自定义菜单栏里

• 3.2.6 最终效果见第2章展示图片

4. 参考教程

• github：louislam/uptime-kuma^[9]
• 在Hugging Face上搭建Uptime kuma并接入数据库 ^[10]
• 在huggingface部署uptime-kuma（webdav同步）^[11]

写在最后

本文介绍了借助抱脸（Hugging Face）、CloudFlare和公众号，搭建uptime-kuma的自托管监视服务的主要步骤和展示效果。

后续会陆续更新自己的服务，以及参照教程将配置数据切换成webdav同步的方式。

朋友们试用服务过程中有任何问题或建议，欢迎反馈给我，谢谢。

参考资料