Uptime Kuma 监控面板美化方案：Kuma Mieru 部署与实战指南

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

什么是 Kuma Mieru ？

Kuma Mieru 是一款基于 Next.js 16、TypeScript 和 Recharts 构建的第三方 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 进行快捷安装

# 新建文件夹
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 创建管理员账号完成登录之后，需要添加监控项

还是以老苏的博客为例

• 显示名称：老苏博客
• URL：https://laosu.tech

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

切换到状态页面

添加新的状态页

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

从下拉框中选择监控项

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

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

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

第二步：部署 Kuma Mieru

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

docker cli 安装

还是用 docker cli 进行快捷安装

# 运行容器
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

更多开源监控工具和运维实践，欢迎访问云栈社区交流探讨。