琐碎笔记

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

佩佩 · 11月25日 · 2020年 · · · · · · 9639次查看

前言

随着手中的吃灰 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://www.vmgirls.com/'
    },  
    {
      text: '楠格',
      url: 'https://www.nange.cn/'
    },
    {
      text: 'GitHub',
      url: 'https://github.com/xos'
    }
  ]
};

API Keys 获取:

登录 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 环境下部署使用
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 !


本文作者:佩佩
原文链接:https://www.nange.cn/uptime-status-page.html
版权声明:若无特殊注明,文章均为本站【楠格】原创,并以《知识共享署名-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》协议进行许可,转载时请以超链接形式标明文章原始出处和作者信息,否则谢绝转载!

15 条回应
  1. 旺旺旺 Chrome 88.0.4324.104 Windows 102021-3-8 · 11:25

    大佬,项目二我按照步骤运行完node build/bootstrap之后,反代页面显示正常。但如果关闭终端就502了是怎么回事

    • 佩佩 未知神秘浏览器 未知神秘操作系统 2021-3-9 · 3:08

      请自行谷歌 nodejs 后台运行 相关教程。

  2. Jack Chrome 87.0.4280.101 Android 10 | HD1900 2021-2-2 · 8:22

    麻烦说下config/default.yml配置具体怎么改

  3. Jack Chrome 88.0.4324.104 Windows 102021-2-1 · 15:46

    项目2常规部署没有用啊

    • 佩佩 Chrome 90.0.4400.10 Mac OS X 11_2_02021-2-1 · 23:24

      请严格按照本文和项目说明文档部署。

  4. Firefox 85.0 Windows 102021-1-31 · 7:14

    大佬,分组是怎么设置的,我uptimerobot面板内名称设置一样可以分组,但分组内站点不显示名称

    • 佩佩 Chrome 90.0.4400.10 Mac OS X 11_2_02021-1-31 · 18:09

      用的那个项目的源码?

      • Firefox 85.0 Windows 102021-1-31 · 20:05

        使用的项目二

        • 佩佩 Chrome 90.0.4400.10 Mac OS X 11_2_02021-1-31 · 20:59

          节点命名格式:组名/索引序号/真实节点名(就是要显示的节点名),索引序列号建议用三位数字表示,前前一位数字表示组的序号,最后两位数字表示组内节点的序号。如:
          境内节点/000/北京,
          境内节点/001/上海,
          境外节点/100/洛杉矶,
          境外节点/101/香港

          • Firefox 85.0 Windows 102021-1-31 · 21:57

            已搞定,非常感谢
            docker环境,主页信息可以通过docker-compose.yml这个配置文件自定义吗

            • 佩佩 Chrome 90.0.4400.10 Mac OS X 11_2_02021-1-31 · 23:35

              可以呀

              • Firefox 85.0 Windows 102021-1-31 · 23:38

                好的,辛苦说下,怎么在docker-compose.yml这个配置文件内 自定义主页,GitHub地址,谢谢

                • 佩佩 Chrome 90.0.4400.10 Mac OS X 11_2_02021-2-1 · 0:01

                  1.取消注释docker-compose.yml第 17 和 18 行:

                      # volumes: 
                      #   - ./config:/app/config

                  2.下载项目中的config文件夹,修改default.yml 相关配置即可。
                  3.注意,docker-compose.ymlconfig文件夹要在同一目录下。
                  4.对了,docker 环境时自定义配置文件加载有优先级,如:custom-environment-variables.yaml>production.yml>default.yml,更多疑问可自行查看项目部署说明。

                  • Firefox 85.0 Windows 102021-2-1 · 0:03

                    好的,明白了,感谢

  5. Chrome 61.0.3163.128 Linux 2021-1-10 · 19:40

    牛批