为服务器或网站部署一个状态监控页

前言

随着手中的吃灰 VPS 越来越多，想要了解它们每个机器的在线率如何变得愈加繁琐，但是如果通过第三方专业的网络服务状态监控来解决的话就方便省心多了。

准备工作

注册账号

首先去 UptimeRobot 官网 https://uptimerobot.com/ 注册一个免费账号，然后再控制台添加需要监控的项目类型，项目名称，项目 IP（或链接地址）。

创建官方状态监控页

需要监控的项目添加完成之后还可以设置一个官方的状态监控页。

然后会有一个唯一的地址，就是你的官方提供的状态监控页。也可以用自己的域名绑定官方的状态页来使用，毕竟，官方给的地址不容易记住。

使用第三方状态监控页

本文的重点就是讲如何使用第三方的状态监控页，毕竟官方的自定义的地方还是很有限的，大多为收费功能。下面介绍两款本人使用过的个人觉得比较 nice 的第三方开源项目监控页。

项目一

由 yb 大佬开源的项目，我 Fork 了一份，增加了部署使用说明：

https://github.com/XOS/UptimeStatus

部署说明

• 克隆代码

git clone https://github.com/XOS/UptimeStatus.git

• 安装依赖

cd UptimeStatus && npm i

• 构建项目

npm run build

• 修改 build/config.js 配置文件

// 配置
window.Config = {

  // 站点名
  SiteName: '服务状态',

  // 站点链接
  SiteUrl: '/',

  // UptimeRobot Api Keys
  // 支持 Monitor-Specific 和 Read-Only 两种 Api Key

  ApiKeys: [
    'ur9*****-4****8797***a1917******',
  ],

  // 是否显示监测站点的链接
  ShowLink: false,

  // 日志天数
  // 虽然免费版说仅保存60天日志，但测试好像API可以获取90天的
  // 不过时间不要设置太长，容易卡，接口请求也容易失败
  CountDays: 60,

  // 导航栏菜单
  Navi: [
    {
      text: '关于',
      url: 'https://about.nange.cn/'
    },  
    {
      text: '楠格',
      url: 'https://www.nange.cn/'
    },
    {
      text: 'GitHub',
      url: 'https://github.com/xos'
    }
  ]
};

登录 Dashboard –> My Settings –> 往下翻到 API Settings –> 选 Monitor-Specific API Keys（需选多个） 或 Read-Only API Key 其中一种，然后  Show/hide it 复制 API Keys。

• 将 build 目录设为网站根目录即可。

免编译部署

直接下载作者仓库编译好的文件解压，修改 config.js 配置文件，放入网站根目录即可。

页面效果

项目二

由 giuem 大佬开源的项目，我 Fork 了一份，且进行了一些小小的改动：

https://github.com/XOS/StatusPage

1. 前端改为中文显示；
2. 改变页面显示宽度；
3. 修改显示数据为最近 60 天（原版 45 天）；
4. 增加显示当前日期数据（原版只显示到前一天）；
5. 修改时区为东八区；
6. 其它布局微调。
7. 【已解决】Docker 环境时有一个时间显示 bug ，目前默认显示的的是 UTC 格林威治世界标准时间，而不是当前的时区的时间比如东八区，目前正在解决中。

安装部署

Docker 环境下部署使用

• 获取 Docker 文件

wget https://raw.githubusercontent.com/XOS/StatusPage/master/docker-compose.yml

• 修改配置文件 docker-compose.yml

version: "3"

services:
  status:
    image: nangle/status-page
    # build: .
    environment: 
      - PORT=3000
      - LOG_LEVEL=info
      - CRON_TIME=*/1 * * * *
      - UPTIME_ROBOT_API=ur94****-4d**687*****a1917******
      - UPTIME_ROBOT_NAME_PATTERN=%group|%index|%name
      - WEBSITE_TITLE=服务状态
      - WEBSITE_COPYRIGHT=楠格
    # To use config file for more flexible configure,
    # please uncomment next block
    # volumes: 
     #  - ./config:/app/config
    ports: 
      - 127.0.0.1:8082:3000

• 启动

docker-compose up -d

• Nginx 反代 8082 端口或直接访问 ip:8082 即可。

常规环境下部署使用

• 克隆代码

git clone https://github.com/XOS/StatusPage.git && cd StatusPage

• 安装依赖

npm i && yarn install && yarn cache clean

• 构建

yarn build

• 修改 config/default.yml

• 运行

node build/bootstrap

• Nginx 反代 3000 端口或直接访问 ip:3000 即可。

页面效果

也可直接访问 https://status.nange.cn/ 查看。

结束

Enjoy it !