感谢 JIeJaitt 佬的指路：【求助】如何榨干 render 免费的部署 - #8，来自 JIeJaitt 27
教程参考自：https://mari0er.club/post/monitor.html/ 14
使用的开源项目：GitHub - imsyy/site-status: 📺 一个基于 UptimeRobot API 的在线状态面板 | 站点监测 | 状态检测 | An online status panel based on the UptimeRobot API | UptimeRobot, status, site 69

监控面板有很多种，我之前就分享过两个，今天这个是使用 Uptime Robot 服务的。
原教程在部署过程中有一些坑，我踩完后把经验分享一下。

注册 Uptime Robot 账号

只需要邮箱验证即可

添加站点监控

• New Monitor
• 可以看到支持 Http (s)、关键字、端口、Ping 等监控方式，根据需求自行进行选择
  
  

  image911×1107 58.6 KB

获取 API Keys

• 新站点没有找到入口，我们需要点击最上方的横幅，跳转到旧 UI
  
  

  image787×36 5.99 KB
• 旧站点：https://old.uptimerobot.com/ 6
• 鼠标移到右上角账号头像处，选择下拉栏里的 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 69
• 编辑 .env 配置文件
  VITE_API_KEY = 刚刚记下的 Read-Only Key
• 提交编辑

通过 cloudflare worker 部署面板

• 主页选择 Workers 和 Pages
• 创建应用
  
• 选择 pages 并连接之前 fork 的项目
  
  

  image874×805 28.2 KB
• 按照下图 保存并部署，这里注意，构建输出目录需要更改为 dist
  
  

  image932×1210 34.3 KB

修改自定义域

• 部署成功后就可以换自己的域名了
  
  

  image965×290 11.9 KB
• 输入自己的域名加前缀，自动就会把 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/ 19 或者 https://stock.hostmonit.com/CloudFlareYes 9 选一个延迟低的
• 点击 workers 路由，添加路由，输入 uptimerobot. 域名/* ，worker 选刚刚创建的 uptimerobot

配置代理

• 回到你之前 fork 的项目仓库，编辑.env 文件
• VITE_GLOBAL_API = “https://uptimerobot. 域名 /v2/getMonitors 4” # 第三方反代
• 提交
• 这时你会发现在 cf worker 中的面板应用自动重新部署了
  
  

  image913×489 19.4 KB

测试 API 和 代理 url

API 是实时请求更新的，可以通过 post 请求看看返回值

curl -X POST  https://api.uptimerobot.com/v2/getMonitors?api_key=你的Read-Only Key

这里你也可以把 https://api.uptimerobot.com 换成你之前的代理域名测试一下 9