前言

在日常运维或开发中，及时掌握网站健康状态至关重要。本篇文章分享一个基于 UptimeRobot API 开源的站点监控面板，从项目特点、部署方式到实践经验，帮助你快速上手并集成到生产环境。

项目简介

本项目采用 PHP + Material Design 前端框架，结合 UptimeRobot API 实现：

• 实时监控站点可用性（HTTP、Ping、TCP、端口、关键词）
• 多站点批量管理
• 可视化数据统计与图表展示
• 优雅加载动画与响应式设计
• 支持环境变量配置，兼容 Vercel 一键部署

功能亮点

1. 多种监控方式

   • HTTP(s)、Ping、TCP、端口、关键词，覆盖大多数场景

2. 数据可视化

   • 使用 Chart.js 绘制可用率和响应时间曲线，直观展示历史趋势
     

3. 灵活配置

   • 环境变量：UPTIMEROBOT_API_KEY、SITE_NAME
   • api/config.php：可自定义 count_days、show_link、导航菜单等

4. Vercel 一键部署

   • 点击"Deploy with Vercel"按钮，填写 API Key 即可上线，无需运维配置

5. 日志与加载优化

   • 加载动画提升用户体验
     

部署前准备

• 首先，去官网 UptimeRobot 注册 注册一个账号，使用邮箱即可完成注册。

• 注册完成之后登录，然后点击Dashboard，进入仪表盘。

• 点击右上方 New Monitor，开始设置监控。

有四种监控方式，分别为Http(s)、Ping、Port、Keyword，在这里我选择Http(s)来监控我的网站，选择Ping来监控我的服务器。Port一般用于VPS监控。

• 填写监控种类、监控站点以及监控频率，注意勾选提醒邮箱。

部署指南

一键部署（推荐）

Deploy with Vercel

1. 点击页面中的 Deploy with Vercel 按钮
2. 在 Vercel 控制台中设置环境变量：
   • UPTIMEROBOT_API_KEY：你的 UptimeRobot API Key
   • SITE_NAME：站点名称（可选，默认 "Uptime Monitor"）
3. 等待 Vercel 构建并自动分配域名，即可访问

手动部署

1. 克隆项目：

   git clone https://github.com/miloce/uptime-monitor.git
   cd uptime-monitor
   

2. 设置环境变量 或 修改 api/config.php 中的 api_keys 和 site_name
3. 启动本地服务器：

   php -S localhost:8000 -t api
   

4. 浏览器访问 http://localhost:8000

结语

该项目已在 GitHub 开源，欢迎 Fork、Star 与 Issue 反馈。希望本文能帮助你快速搭建可视化、易用的监控面板，为网站稳定运行保驾护航！

• 仓库地址：https://github.com/miloce/uptime-monitor
• 建议与反馈：请打开 Issues 或在评论区留言

开源项目，欢迎使用与贡献