树萌
编程技术

本站基本建成网络监控面板 cf-vps-monitor

1745 字 约 4 分钟 更新于 2026年2月20日

项目名称：cf-vps-monitor 项目作者：kadidalax kadidalax/cf-vps-monitorGitHub 仓库VPS 监控面板 (Cloudflare Worker + D1 版) - 部署指南这是一个部署在 Cloudflare Workers 上的简单 VPS 监控面板，使用 Cloudflare D1 数据库存储数据。本指南将引导你通过 Cloudflare 网页控制面板完成部署，无需使用命令行工具。

部署步骤（摘自github）

先决条件
一个 Cloudflare 账户。
部署步骤

  1. 创建 D1 数据库
    你需要一个 D1 数据库来存储面板数据（服务器列表、API 密钥、监控数据等）。
    登录 Cloudflare 控制面板。
    在左侧菜单中，找到并点击 存储和数据库。
    在下拉菜单中，选择 D1 SQL 数据库。
    点击 创建数据库。
    为数据库命名（例如 vps-monitor-db），然后点击 创建。

  2. 创建并配置 Worker
    接下来，创建 Worker 并将代码部署上去。
    在左侧菜单中，点击 计算(Workers)，选择 Workers & Pages。
    在概览页面，点击 创建。
    选择 Start with Hello World!点击开始使用。
    为你的 Worker 命名（例如 vps-monitor-worker），确保名称可用。
    点击 部署。
    部署完成后，点击 编辑代码 进入 Worker 编辑器。
    删除编辑器中现有的所有代码。
    打开本仓库的 worker.js 文件，复制其全部内容。
    将复制的代码粘贴到 Cloudflare Worker 编辑器中。
    点击编辑器右上角的 部署 按钮。

  3. 添加环境变量
    在 设置 → 变量和机密 中添加以下环境变量，以增加安全性：
    可选变量名：USERNAME，类型：密钥， 值：任意随机字符串
    可选变量名：PASSWORD，类型：密钥， 值：任意随机字符串
    变量名：JWT_SECRET，类型：密钥， 值：任意30位左右的随机字符串
    添加完保存并部署

  4. 绑定 D1 数据库到 Worker
    Worker 需要访问你之前创建的 D1 数据库。
    在 Worker 的管理页面（编辑代码页面上方有 Worker 名称，点击它可以返回管理页面），选择 绑定 标签页。
    选择D1数据库。
    在 变量名称 处输入 DB (必须大写)。
    在 D1 数据库 下拉菜单中，选择你之前创建的数据库 (例如 vps-monitor-db)。
    点击 部署。
    重要！初始化数据库： 复制你的Worker URL到浏览器，后面加上/api/init-db，如vps-monitor.abo-vendor289.workers.dev/api/init-db，打开此链接后会看到 {"success":true,"message":"数据库初始化完成"} 即表明数据库已准备完毕。

  5. 设置触发频率（检测网站用）
    在 Worker 的管理页面选择 设置 标签页。
    在设置页面中，选择 触发事件 子菜单。
    点击添加，选择Cron触发器。
    选择计划，执行 Worker 的频率选择小时，下面的框填入1（即每整点检测一次网站）。
    点击添加。

  6. 访问面板
    部署和绑定完成后，你的监控面板应该可以通过 Worker 的 URL 访问了。
    在设置页面你会看到一个 .workers.dev 的 URL，例如 vps-monitor.abo-vendor289.workers.dev。
    在浏览器中打开这个 URL，你应该能看到监控面板的前端界面。
    使用面板

  7. 初始登录
    访问你的 Worker URL。
    点击页面右上角的 登录 或直接访问 /login 路径 (例如 https://vps-monitor.abo-vendor289.workers.dev/login)。
    使用环境变量凭证或默认凭据登录：
    默认用户名: admin
    默认密码: monitor2025!
    登录后，立即修改密码！立即修改密码！立即修改密码！！！

  8. 添加服务器
    登录后台后，你应该会看到管理界面。
    找到添加服务器的选项。
    输入服务器的名称和可选的描述。
    点击 保存。
    面板会自动生成一个唯一的 服务器 ID 和 API 密钥，后台可以随时查看，部署 Agent 时需要用到。

  9. 部署 Agent (探针)
    Agent 是一个需要在你的 VPS 上运行的脚本，用于收集状态信息并发送回面板。
    有两种方式安装Agent脚本：
    第一种是直接从后台复制带有参数的命令一键安装（推荐）
    第二种是：下载脚本并运行：

    wget -O cf-vps-monitor.sh https://raw.githubusercontent.com/kadidalax/cf-vps-monitor/main/cf-vps-monitor.sh && chmod +x cf-vps-monitor.sh && ./cf-vps-monitor.sh

或者下载脚本并运行：

curl -O https://raw.githubusercontent.com/kadidalax/cf-vps-monitor/main/cf-vps-monitor.sh && chmod +x cf-vps-monitor.sh && ./cf-vps-monitor.sh

安装需要 服务器ID API密钥 和你的 worker网址
可以在后台点击 查看密钥 来获取上述三个参数
按照提示输入安装完成后，Agent 会开始定期向你的面板发送数据。你应该能在面板上看到对应服务器的状态更新。
4. Agent 管理
安装脚本本身也提供了如管理功能：安装服务、卸载服务、查看状态、查看日志、停止服务、重启服务、修改配置等
5. 添加检测网站
登录后台后，你应该会看到管理界面。
点击添加监控网站。
输入网站名称（可选）和网站URL 如(https://example.com)。
点击保存。
6. 配置Telegram 通知
BotFather创建bot并获取Bot Token。
@userinfobot获取自己的ID。
将上述两项分别填入。
启用通知，点击保存Telegram设置后会受到一条测试通知，说明配置正确。
7. 配置自定义背景和透明度
找一张好看的背景图。
上传到图床，得到该图的链接（如：https://i.111666.best/image/QbF51RYyzcHFTBnOhICxdY.jpg ）
将此链接填入背景图片URL框，并勾选 启用自定义背景。
调整 面透明度 滑块。
点击 保存背景设置

部署成功以后就可以在work里面编辑代码来修改前端页面，通过网络与性能测试，原带的几个诸如：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css"
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"

严重的影响了网站（国内）的打开速度，于是乎我就开始了CDN的寻找与替换。
一开始本来是想上传到自己的OSS上面套CDN，bootstrap.min.css和bootstrap.bundle.min.js替换的都很顺利，打开速度也加快不少，不过到了bootstrap-icons.css竟然里面还包含了fonts文件如.woff此类的，于是我wget了这几类文件并在本地修改，结果发现由于缓存和上传等多方面的原因，图标无法正确显示。首先我检测了源站R2的css发现上传依旧是：

@font-face {
  font-display: block;
  font-family: "bootstrap-icons";
  src: url("./fonts/bootstrap-icons.woff2?2820a3852bdb9a5832199cc61cec4e65") format("woff2"),
url("./fonts/bootstrap-icons.woff?2820a3852bdb9a5832199cc61cec4e65") format("woff");}

本地看却是：

@font-face {
  font-display: block;
  font-family: "bootstrap-icons";
  src: url("https://oss.treemoe.cn/side/fonts/bootstrap-icons.woff2") format("woff2"),
url("https://oss.treemoe.cn/side/fonts/bootstrap-icons.woff") format("woff");}

后面就开始清除cloudeflare的源站CDN发现无法引用字体文件，改成网络直达和本地目录结构均是，最后还是选择使用国内的bootstrap-icons.css,链接如下：https://cdn.staticfile.org/bootstrap-icons/1.11.3/font/bootstrap-icons.css
至此，这个监控面板才落下帷幕。

摘要

大家可点按网页下方的网站探针直达页面。
哦对了，关于cf路由的优选，我直接套用2x.nz即二叉树树的优选，最近不知道为什么总是喜欢看他。

部署完成
部署完成

本文由 tree 发布于 2026年2月12日，采用 CC BY-NC-SA 4.0 许可，转载请注明出处。

评论

评论加载中…