Uptime Kuma监控面板Kuma Mieru

本文软件由网友 P家单推人 推荐,写一半忘了,耽搁了几个月

简介

什么是 Kuma Mieru ?

Kuma Mieru 是一款基于 Next.js 16TypeScriptRecharts 构建的第三方 Uptime Kuma 监控仪表盘。它可以帮助用户以更美观、更直观的方式查看监控数据。

主要特点

  • 实时监控,自动刷新:状态显示实时更新,无需手动刷新
  • 美观响应式界面:采用 HeroUI 组件构建,界面更加现代
  • 交互式图表:利用 Recharts 图表库实现数据可视化
  • 多主题支持:提供暗色/亮色/系统多种主题
  • 开源免费:基于 MPL-2.0 协议开源

应用场景

  • 个人网站监控:监控个人博客或网站的在线状态
  • 服务器监控:监控服务器、网络设备的运行状态
  • API 监控:监控接口服务的可用性和响应时间

Kuma Mieru 是一个美观的 Uptime Kuma 第三方监控面板,特别适合需要展示监控状态的用户。

[!NOTE]
Kuma Mieru 需要配合 Uptime Kuma 使用,因此需要先部署 Uptime Kuma 并添加监控项、创建状态页面。

第一步:部署 Uptime Kuma

Uptime Kuma 是开源的服务器监控工具,Kuma Mieru 需要连接到它的状态页面获取数据。

docker cli 安装

之前,老苏写过 网站在线监控工具Uptime Kuma,所以我们这里用 docker cli 进行快捷安装

1
2
3
4
5
6
7
8
9
10
11
12
13
# 新建文件夹
mkdir -p /volume1/docker/uptime-kuma

# 进入目录
cd /volume1/docker/uptime-kuma

# 运行容器
docker run -d \
--restart unless-stopped \
--name uptime-kuma \
-p 3211:3001 \
-v $(pwd):/app/data \
louislam/uptime-kuma

初始化配置

在浏览器中访问 http://<群晖IP>:3211 创建管理员账号完成登录之后,需要添加监控项

还是以老苏的博客为例

  • 显示名称:老苏博客
  • URLhttps://laosu.tech

添加之后,需要等一会儿才有数据

切换到状态页面

添加新的状态页

  • 名称:例如 page1
  • 路径:可以和名称一样

从下来框中选择监控项

前面只添加了一个站点,所以这里只有一项

保存之后,得到了一个状态页

地址是 http://<群晖IP>:3211/status/page1

第二步:部署 Kuma Mieru

完成了 Uptime Kuma 的部署和设置之后,就可以安装 Kuma Mieru

docker cli 安装

还是用 docker cli 进行快捷安装

1
2
3
4
5
6
7
# 运行容器
docker run -d \
--name kuma-mieru \
-p 3883:3000 \
-e UPTIME_KUMA_URLS="http://192.168.0.197:3211/status/page1" \
-e KUMA_MIERU_TITLE="Kuma Mieru" \
ghcr.io/alice39s/kuma-mieru

环境变量说明

变量名 必填 说明 示例
UPTIME_KUMA_URLS Uptime Kuma 状态页面 URL http://<群晖IP>:3211/status/page1
KUMA_MIERU_TITLE 页面标题 Kuma Mieru
KUMA_MIERU_DESCRIPTION 页面描述 我的监控面板

注意:状态页面 URL 格式为 http://<UptimeKuma地址>/status/<页面ID>

更多的环境变量可以参考:https://github.com/Alice39s/kuma-mieru/blob/main/.env.example

运行

在浏览器中访问 http://<群晖IP>:3883 即可进入 Kuma Mieru 的监控面板。

时间越长数据越多

注意事项

  1. 端口冲突3883 端口可能被占用,可修改为其他端口
  2. 内网访问Kuma Mieru 需要能访问到 Uptime Kuma,确保网络互通
  3. HTTPS 证书:如果 Uptime Kuma 使用 HTTPS 且为自签名证书,需要设置 ALLOW_INSECURE_TLS=true

参考文档

Kuma Mieru - A beautiful Uptime Kuma dashboard
地址:https://github.com/Alice39s/kuma-mieru

Kuma Mieru Official Demo
地址:https://kuma-mieru.vercel.app/

Uptime Kuma - Self-hosted monitoring tool
地址:https://github.com/louislam/uptime-kuma