近期有为博客添加网站状态监测页面的想法，可以监测友链的存活状态等

但是根据搜到的，可以使用UptimeRobot进行监测。但是其中的一些操作，比如调整监测页面链接需要进行包月付费

本着能省则省的原则，便想着不如着手实现一下主动监测。

这篇文章算是一个小项目总结与功能说明吧。

当前开发进度

定时查询 https://github.com/luoy-oss/luo9-link-monitoring

API https://github.com/luoy-oss/blog-link-monitoring

数据展示 https://github.com/luoy-oss/butterfly-link-monitoring

项目大概框架如下

定时任务 → API → MongoDB

luo9_bot中的定时查询插件，向部署的api进行主动式网站存活请求监测，并将状态数据存入MongoDB数据库中


博客页面 → API → 展示数据

博客监测页面，向部署的api获取网站历史存活数据，并进行展示

以上，你需要完成

  • fork我的仓库
  • 向vercel部署
  • 构建MongoDB数据库并进行Connect
  • 构建主动请求代码（此项可能需要服务器）
  • 向博客添加监测页面

api部署-向vercel部署

这里偷懒，使用了以往的fork和部署样例图片，请注意名称要为你fork的仓库名称

即：blog-link-monitoring

先将 luoy-oss/blog-link-monitoring: 主动式网站链接状态监测 Fork 到自己的Github

fork

登录 Vercel 后，点击Add New.. => Project

vercel

选择导入的项目，当然如果仓库不是很多的话可以直接看到最近创建的仓库，点击 import导入

choose

然后点击Deploy 进行部署

deploy

直接点击 Add Domain

domain

添加你想要的域名，例如此处我要添加的域名为 blog-links-monitoring.drluo.top

add-domain

添加后出现提示，要求添加一条CNAME记录，指向cname.vercel-dns.com

cname1

按照提示添加一条CNAME记录：

cname3

为了提升访问速度也可以使用加速节点 vercel.cdn.yt-blog.top 或者 vercel.cdn.cyfan.top

cname3

关于加速节点的介绍可参考文章 推一下 Vercel 加速节点

添加解析记录后页面会自动刷新，等待片刻校验即可通过

verify

检验通过后可直接点击域名进行预览，出现以下内容代表你已经完成了api的部署：

blog-link-monitoring.drluo.top1

构建MongoDB数据库并进行Connect

新建你的数据库项目，默认不需要进行调整，项目拥有者就是你自己

项目创建完成后，创建新的集群用于存储数据表

选择Free的集群就够我们用啦，其中集群的名称可以按你想要的来，集群服务器建议选用aws，服务器位置根据你的api部署位置酌情选择

我这里使用vercel部署，但是挂了国内cdn转发，所以选用的HongKong

集群创建完成后，会提醒你创建用户用于连接集群，你可以选择在这里直接进行创建（输入用户名和密码后点击Create Database User），或者直接点击Close，按照下方教程创建

点击左侧的Database Access，点击右上方绿色按钮ADD NEW DATABASE USER，输入相应的用户名和密码，并赋予用户Atlas admin权限后，点击Add User完成创建

请牢记用户名密码，不然忘掉了还要回来再改，会麻烦的

由于vercel部署的api服务器地址会变化。点击左侧Network Access，点击右上方绿色按钮ADD IP ADDRESS，输入0.0.0.0/0允许所有ip连接。

如果你是自己服务器进行的部署，有固定ip的前提下，可以键入你自己的ip。

完成相应的数据库用户和ip开放操作后，可以进行集群连接操作。

点击左侧的Clusters，连接Connect刚才创建的集群

调整Driver为Node.js，并复制下方的code

完成上方操作后。你应该有了类似如下格式的code：

1
mongodb+srv://<db_username>:<db_password>@link-monitoring.b86hqbc.mongodb.net/?retryWrites=true&w=majority&appName=link-monitoring

现在，你需要将其中的**<db_username>替换为刚才创建的用户名，我这里是new-user**

将其中的**<db_password>替换为刚才创建的用户名对应的密码，这里是userpasswd**


code中的格式为xxx.mongodb.net/?xxxx

此时默认为test数据表，如果你想指定数据表（不存在会自动创建）请参考下方样例：

1
2
3
xxx.mongodb.net/表名称?xxxx
比如指定表名称为monitoring（不存在会自动创建）
xxx.mongodb.net/monitoring?xxxx

最后的code为：

1
mongodb+srv://new-user:userpasswd@link-monitoring.b86hqbc.mongodb.net/monitoring?retryWrites=true&w=majority&appName=link-monitoring

此时你可以向vercel或你的服务器中配置相应的环境变量（注意是大写字母i，不是小写的L）MONGODB_URI

以上，你已经完成了相应的数据库创建及连接操作。

构建主动请求代码

建议直接使用已完成的主动请求插件（基于luo9_bot）：

luoy-oss/luo9-link-monitoring: 主动式网站状态监测-定时监测插件

如果你想自己实现，实现思路为：

  • 向部署完成的api_url的/api/batch-monitor进行网络状态批量监测

  • 或向/api/monitor进行单个url的状态监测

向博客添加监测页面

本页面基于butterfly主题生成，其余主题直接使用可能或出现未经验证的问题。

1
git clone https://github.com/luoy-oss/butterfly-link-monitoring.git

将获取到的文件一并复制到butterfly主题下：

/theme/butterfly/

文件存在路径为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
butterfly
│
├─layout
│  └─monitoring.pug
│  │
│  └─includes
│    └─monitoring-layout.pug
│
└─source
    ├─css
    │ └─monitoring.css
    │
    └─js
      └─monitoring.js

在主题配置文件中添加monitoring页面：

友链监测: /monitoring || fas fa-link

1
2
3
4
5
menu:
  首页: / || fas fa-home
  友链: /links/ || fas fa-link
  音乐: /music/ || fas fa-music
  友链监测: /monitoring || fas fa-link

hexo三连

1
hexo cl & hexo g & hexo d

访问你的博客监测页面

例如我的博客主页url为：https://www.drluo.top

相应的监测页面为：https://www.drluo.top/monitoring

以上，你完成了主动式网站状态监测的部署。

最后

有什么不懂的，欢迎加群询问哦！

洛の小窝