基于uptime-status搭建自己的网站状态页

前言

InsectMk的在线状态最近出现问题了，看了下，是接口代理的问题，代理地址 -> https://cors.status.org.cn/uptimerobot/v2/getMonitors

但是看uptime-status这个项目已经两年没有维护了，看来得自己搞了。

下面就是我的替换步骤啦！

项目

首先毛遂自荐一下，推荐使用insectmk/uptime-status，因为原项目已经停止维护了。

只需要修改配置文件config.js即可：

SiteName: 要显示的网站名称
ApiUrl: API接口地址，默认https://api.uptimerobot.com/v2/getMonitors
ApiCatchTime: 缓存时间，单位（ms），默认1分钟
ApiKeys: 从 UptimeRobot 获取的 API Key，支持 Monitor-Specific API Keys 和 Read-Only API Key
CountDays: 要显示的日志天数，建议 60 或 90，显示效果比较好
ShowLink: 是否显示站点链接
Navi: 导航栏的菜单列表

其他的参考我的另一篇文章：使用uptime-status搭建网站监控页面

Worker

其实到这一步已经能用了，但是能用自己的代理更好。

到cloudflare控制台，找到Workers 和 Pages菜单，点击创建-> 创建Workers创建一个Workers。

在编辑页面为Worker取一个名字，我取名为uptimerobot，在worker.js中写入以下代码：

/**
 * Cloudflare Worker acting as a proxy for api.uptimerobot.com
 */

export default {
  async fetch(request, env, ctx) {
    // 构建新的请求URL，指向Uptime Robot的API
    const originalUrl = new URL(request.url);
    const apiEndpoint = 'https://api.uptimerobot.com/v2/getMonitors';

    // 创建一个新的URL对象，指向Uptime Robot的API
    const url = new URL(apiEndpoint);

    // 将原始请求的查询参数复制到新的URL对象
    originalUrl.searchParams.forEach((value, key) => {
      url.searchParams.append(key, value);
    });

    // 重写请求以指向Uptime Robot的API
    const rewrittenRequest = new Request(url.toString(), {
      method: request.method,
      headers: request.headers,
      body: request.body,
      redirect: 'follow'
    });

    // 发送请求到Uptime Robot的API
    const response = await fetch(rewrittenRequest);

    // 转发响应回客户端
    return response;
  },
};