我用 Cloudflare 免费撸了一个高颜值的网站监控系统

前言：作为一个“松鼠党”站长，手里总有一堆域名和吃灰的小鸡（服务器）。经常是网站挂了几天才发现，或者 SSL 证书过期了被浏览器拦截，甚至域名忘记续费被抢注…… 😭 市面上的 Uptime Robot 等服务，免费版限制多，频率低，而且 SSL/域名监控通常是收费功能。

于是，我利用 Cloudflare Workers + D1 + Pages 全家桶，手搓了一个 零成本、高颜值、功能全 的监控系统 —— Uptime Monitor。

✨ 预览效果

先看成品，颜值即正义！😎

📱 移动端 & 桌面端 (深色模式)

演示地址：https://uptime.nianshu2022.cn

🔔 钉钉告警 (Markdown 格式)

告警信息包含：状态码、耗时、失败原因，一目了然。

💻 管理后台 (Dashboard)

安全、简洁、好用。

🛠️ 为什么选择这个方案？

1. 💰 完全免费：利用 Cloudflare 强大的免费额度（Workers 每天 10万次请求，D1 数据库免费读写），对于个人监控几十个网站绰绰有余。
2. 🌍 全球节点：Cloudflare 的边缘网络天然适合做监控，网络连通性好。
3. 🔒 全能监控：
   • HTTP/HTTPS 通断检测 (支持自定义 Status Code 判断)
   • SSL 证书有效期检测 (每日自动检查，支持泛域名证书！)
   • 域名注册过期检测 (防止域名由于健忘被回收)
4. 🤖 灵活告警：目前接入了 钉钉群机器人，支持 Markdown 格式，不仅告诉你挂了，还告诉你为什么挂了（超时/500/证书过期）。
5. 🎨 现代化 UI：Vue 3 + TailwindCSS 打造，支持 Dark Mode，手机端适配完美，这不比 Uptime Robot 的默认页好看？

⚙️ 技术栈一览

• 后端 Runtime: Cloudflare Workers (基于 Hono 框架，轻量极速)
• 数据库: Cloudflare D1 (基于 SQLite 的边缘数据库，存储监控配置和日志)
• 前端托管: Cloudflare Pages (极速静态资源分发)
• 前端框架: Vue 3 (CDN 引入，无构建烦恼) + TailwindCSS

🚀 怎么部署？(保姆级教程)

项目已开源，欢迎 Star ⭐： 👉 GitHub: https://github.com/nianshu2022/Uptime-Monitor

第一步：准备工作

你需要一个 Cloudflare 账号，并在本地安装好 Node.js 和 Wrangler CLI。

第二步：克隆代码 & 初始化数据库

git clone https://github.com/nianshu2022/Uptime-Monitor.git
cd uptime

# 登录 Cloudflare
npx wrangler login

# 创建数据库
npx wrangler d1 create uptime-db
# (记下控制台返回的 database_id)

第三步：配置后端

修改 worker/wrangler.toml，填入你的 database_id。

然后初始化表结构：

cd worker
npx wrangler d1 execute uptime-db --remote --file=schema.sql
# 执行迁移脚本
npx wrangler d1 execute uptime-db --remote --file=migration_add_expiry.sql
npx wrangler d1 execute uptime-db --remote --file=migration_add_ua.sql

第四步：部署后端

你需要先去钉钉群设置一个机器人，获取 Access Token 和 Secret。

# 部署到 Cloudflare
npx wrangler deploy

(建议在 Cloudflare Dashboard 后台配置钉钉 Token 环境变量，更安全)

第五步：部署前端

修改 frontend/index.html 里的 API_BASE 为你的 Worker 地址（强烈建议绑定自定义域名，防墙）。

cd frontend
npx wrangler pages deploy . --project-name uptime-monitor

搞定！🎉

📝 写在最后

这个项目最初只是为了解决我自己的痛点，没想到做着做着功能越来越全。 如果你也有服务器、域名需要监控，或者想学习 Cloudflare Workers 开发，欢迎来玩！

如果有任何问题或建议，欢迎提 Issue 或 PR。 别忘了给个 Star ⭐️ 鼓励一下作者哦！

GitHub: https://github.com/nianshu2022/Uptime-Monitor

Blog: https://blog.nianshu2022.cn