UpTimeFlare搭建服务器监控

type

status

date

slug

summary

项目介绍

类似于UpTimeRobot，这个项目允许你使用Cloudflare和Github搭建一个属于你自己的状态监控页面。下面是作者给出的效果展示图：

搭建教程

材料准备

一个活人（看到的都有吧）

一台可以进行操作的设备（推荐Windows、MacOS和Linux Desktop）

一个Github账户（没用的去https://github.com注册）

一个Cloudflare账户（没有的去https://www.cloudflare.com注册）

一个域名（可选，建议托管在Cloudflare）

前期准备

首先我们先复制一份这个项目仓库，点击项目页面右上角的Use this template然后点击Create a new repository(不建议直接Fork，建议作为私有仓库使用)。然后在创建仓库页面设置一个仓库名，比如就叫UpTimeFlare，将Public改为Private，然后点击Create repository，于是就完成了最简单的第一步。这一步比较简单，就不给出操作截图了。

随后我们需要一个Cloudflare账户，注册的过程就跳过了。登录好了之后访问Cloudflare API Token申请页面创建一个令牌，点击使用模板中的编辑Cloudflare Workers，点击。

接着如下图，就修改这两个参数，然后点击继续以显示摘要，然后点击创建令牌。

然后点击Copy复制API令牌，下面的步骤里要用。

接着我们回到我们刚刚复制的那个仓库，依次点击Settings - Secrets and variables - Actions，点击New repository secrets创建一个新的密钥，Name设置为CLOUDFLARE_API_TOKEN，Secret就设置成你刚刚复制的API令牌。

修改配置

然后我们就要开始设置状态监控了。回到仓库的Code界面，全程我们只需要修改一个配置文件，就是uptime.config.ts，我们点击这个文件，点击右上角的笔Edit this file，起初的配置文件是完整版本的，有些功能我们不需要，可以删除，比如下面这个（位于配置文件的第61到74行）：

typescript

如果没有需要我们可以直接删掉，如果需要可以参照原仓库中的Wiki进行配置，为了节省时间，我把一个精简版本的配置文件放在下面，可以删掉原来的所有内容，复制一下我的，然后自行调试：

typescript

在上面的代码里，下面的内容可以反复堆叠，达到多个监控的效果，但是id一定要不唯一，以防止冲突，其他的按要求自行调整，每个监控的设置还有更多进阶配置，可以参照作者的Wiki来设置，这里不过多赘述了。

typescript

接着我们保存文件，不出意外进入Actions页面，就会发现有一个Action在运行了，但是不出意外，肯定会报错，不要慌张，我们如果发现报错发生在Build Page并且报错内容和下面一眼，请往后看：

shell

我们发现是项目pages目录下的index.tsx文件报错了，我们先不急着打开这个文件，继续看报错，报错说tooltip不存在，其实在最开始设置监控的配置文件里有两个可选的配置分别是tooltip和statusPageLink，作者的本意是可以不填写的，但是定义的时候没有实现，导致了错误，作者目前已经承认这个是一个Bug（参照原项目的Issues），但是目前还没有被修复，但是我给出了两种解决办法，读者可以自行斟酌，选择合适的方法。