感谢 JIeJaitt 佬的指路：【求助】如何榨干render免费的部署 - #8，来自 JIeJaitt
教程参考自：https://mari0er.club/post/monitor.html/
使用的开源项目：GitHub - imsyy/site-status: 📺 一个基于 UptimeRobot API 的在线状态面板 | 站点监测 | 状态检测 | An online status panel based on the UptimeRobot API | UptimeRobot, status, site
监控面板有很多种，我之前就分享过两个，今天这个是使用 Uptime Robot服务的。
原教程在部署过程中有一些坑，我踩完后把经验分享一下。
注册 Uptime Robot 账号
只需要邮箱验证即可
添加站点监控
- New Monitor
- 可以看到支持Http(s)、关键字、端口、Ping等监控方式，根据需求自行进行选择
获取API Keys
- 新站点没有找到入口，我们需要点击最上方的横幅，跳转到旧UI
- 旧站点：https://old.uptimerobot.com/
- 鼠标移到右上角账号头像处，选择下拉栏里的 My Settings
- 滑到最下方，找到 API Settings
Specific API针对单一的Monitor，Read-Only API就是针对整个账号。这里直接生成Read-Only Key就行。记下来，之后要用
fork面板项目并修改配置
- 听说这个二开面板更加好看。点击fork，到你的账号下
GitHub - imsyy/site-status: 📺 一个基于 UptimeRobot API 的在线状态面板 | 站点监测 | 状态检测 | An online status panel based on the UptimeRobot API | UptimeRobot, status, site - 编辑 .env 配置文件
VITE_API_KEY = 刚刚记下的Read-Only Key - 提交编辑
通过cloudflare worker部署面板
- 主页选择 Workers 和 Pages
- 创建应用
- 选择pages并连接之前fork的项目
- 按照下图 保存并部署，这里注意，构建输出目录需要更改为dist
修改自定义域
- 部署成功后就可以换自己的域名了
- 输入自己的域名加前缀，自动就会把CNAME添加到域名的DNS解析中
- 然后我又去DNS中把解析的小黄云给关了
代理uptimerobot
- 听过存在API跨域问题，所以需要用worker代理一下
- 创建一个worker脚本：uptimerobot
- 编辑代码：
const handleRequest = async ({ request }) => {
let url = new URL(request.url);
let response = await fetch('https://api.uptimerobot.com' + url.pathname, request);
response = new Response(response.body, response);
response.headers.set('Access-Control-Allow-Origin', '*');
response.headers.set('Access-Control-Allow-Methods', '*');
response.headers.set('Access-Control-Allow-Credentials', 'true');
response.headers.set('Access-Control-Allow-Headers', 'Content-Type,Access-Token');
response.headers.set('Access-Control-Expose-Headers', '*');
return response;
}
addEventListener('fetch', (event) => {
event.respondWith(handleRequest(event));
});
- 部署后应该可以直接用得到的dev域名作为代理url
- 但是我还是习惯性的去弄了一个dns解析 + worker路由
- 添加一条DNS A记录，前缀我写了uptimerobot，IP从 http://ip.flares.cloud/ 或者 https://stock.hostmonit.com/CloudFlareYes 选一个延迟低的
- 点击workers路由，添加路由，输入
uptimerobot. 域名/*，worker选刚刚创建的uptimerobot
配置代理
- 回到你之前fork的项目仓库，编辑.env文件
- VITE_GLOBAL_API = “https://uptimerobot.域名/v2/getMonitors” # 第三方反代
- 提交
- 这时你会发现在cf worker中的面板应用自动重新部署了
测试 API 和 代理url
API 是实时请求更新的，可以通过post请求看看返回值
curl -X POST https://api.uptimerobot.com/v2/getMonitors?api_key=你的Read-Only Key
