建立自己的服务状态页

国庆最后两天使用 UptimeRobot 提供的 API 建立自己的公开服务状态页,结果不少人问我怎么做的……那就勉强写个辣鸡教程吧,你们凑合看╮(╯▽╰)╭

准备帐号

UptimeRobot 创建一个帐号,一个帐号可以添加 50 个免费监控项目,对于一般人来说都足够使用了。

创建好了之后添加监控项目,然后在 My Settings 里找到 Public Status Pages ,创建一个 For all the monitors 的 Pages (当然你愿意一个个选我也不介意),填写自定义 URL,然后把填写的域名 CNAME 到 stats.uptimerobot.com. ,完成!(雾,这样就可以用官方的页面的,但是对于我这种 HSTS Preload 用户来说显然不行)

准备文件

使用网站采集工具对 UptimeRobot 分配给你的 Standard URL (类似 https://stats.uptimerobot.com/Elw4jFLZ 这种)进行采集,自行修改各个样式表,js,进行本地化…… 好了好了我承认我已经给你们打包好了,别打我,哎呦……

修改下载好的文件中第 33 行 var pageID = 为 Standard URL 域名后面那一串 ID

var pageID = 'Elw4jFLZ'; //修改 Elw4jFLZ 为你自己的那一段 ID
var noPrefix = 'false' === 'true';
var pageNumber = parseInt('1', 10);
var sortType = parseInt('1', 10);
(function noop() {})(pageID, noPrefix, pageNumber, sortType);

同样的方法修改 index.php 中第 3 行,第 44 行,第 62 行(对其实第 44 行可以自动赋值的但是我懒不想改 23333)

设置 NGINX

向你的 NGINX  对应状态页的 conf 文件里加入以下内容

location / {
    try_files $uri $uri/ /index.php?uri=$uri&$args;
}
location ^~ /api/ {
        valid_referers *.lwl12.com; #防止别人盗用你的反代,把这里改成你自己的域名即可
        if ($invalid_referer) {
            return 403;
        }
        proxy_redirect off;
        proxy_set_header Host "stats.uptimerobot.com";
        proxy_set_header referer $http_referer;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://stats.uptimerobot.com;
    }

添加监控项

在 UptimeRobot 后台添加监控项时 F需要遵循一定格式,格式为:项目名/分组名/分组顺序 (如果不懂这都对应了啥就去我的监控站比比看,原始名称我魔改的监控页自动生成后的名称)

需要注意的是分组顺序从 0 (最前)开始

最后

然后解析域名到你设置好的服务器重启 NGINX 什么一些乱七八糟的事情不用我写了吧?

注意下,如果你只有一台服务器那就还是不要用这个方法了,毕竟如果状态页自己宕机了也挺尴尬的……

到这里你应该就可以拿你自己的状态页出去装逼了~ 首次添加监控项目的话整个页面需要 7 天的时间收集数据才能填♂满!

最后如果有什么问题请在评论区留言,虽然你留了我也不会回复你

那么,祝大家上班愉快~(被打),我也要去睡觉了=。=,困……

-EOF-

53 条评论

昵称
  1. Pingback: UptimeBot自定义页面 | Never 迷の小窝

  2. illn

    (index):1 XMLHttpRequest cannot load https://stats.uptimerobot.com/api/status-page/ywl9vU0Z2/1?sort=1. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://info.illn.in’ is therefore not allowed access.
    controllers.js:62 error: Object {data: null, status: -1, config: Object, statusText: “”}

  3. Chatwin

    我的状态页首页没问题,但是每个项目点击进去就是500错误不知道怎么回事,博主有遇到过吗,地址:https://status.actspeed.cn/

    1. liwanglin12

      没遇到过,这个可能要把错误输出打开然后再分析了 (╯°A°)╯= =

      1. Chatwin

        看了debug没看懂 我就重装了一遍就好了facial尴尬 麻烦博主了

      2. liwanglin12

        facial能用就行嘻嘻

  4. beautifultable

    还有index.php的62行需要修改为自己的ID。。。

    1. liwanglin12

      啧啧是我疏忽了抱歉

  5. hilaolu

    uptimerobot今天刚换了let’s的证书,proxy_pass https会定向到ip然后报错403,换成http就好了求还有其他方法吗

    1. liwanglin12

      不需要其他方案,就这样就行= =我正打算改文章呢

      1. hilaolu

        强迫症不用https浑身难受!

      2. liwanglin12

        那,没办法喽

      3. hilaolu

        Dalao顺便问一下Postman GET https://status.uptimerobot.com/api/status-page/Elw4jFLZ/1?sort=1 TimeoutChrome GET https://status.uptimerobot.com/api/status-page/Elw4jFLZ/1?sort=1 200我Postman header也设了,然而还是Timeout,Nginx也是,有趣。求解怎么回事

      4. liwanglin12

        不知道 = =

  6. 凯哥自媒体

    这次真是来对了,开森

  7. 小柒

    我凑,背景音乐,吓死我了

  8. 哆啦Z梦

    雾草,极乐净土

  9. 萌一库-某宅

    我凑,背景音乐,吓死我了

  10. Zohar

    能不能把播放器的自动播放关掉,好吓人┌( ಠ_ಠ)┘

    1. liwanglin12

      吼啊,晚上你提醒我一下

  11. 千千

    比原来的好看多了,哈哈,我也换上了

  12. qjj

    [11-Nov-2016 15:01:27 UTC] PHP Notice: Undefined index: uri in index.php on line 2[11-Nov-2016 15:01:27 UTC] PHP Notice: Undefined offset: 1 in index.php on line 3蜜汁报错,求解

    1. liwanglin12

      把默认首页改成htm……

  13. themebetter

    很不错呀。

  14. 2^n

    http://status.binarization.net/ 看看能坚持多久

  15. 呃呃呃

    雾,请问博主的变标题怎么弄的,我只会变标题,不会变icon啊

    1. liwanglin12

      请自行查阅博客的历史评论或者自己翻一翻网页的 js 文件哦~

      1. 呃呃呃

        js在哪里啊,我在head头没找到。。藏在什么地方啊

  16. Dandy

    音乐播放插件用的啥?

  17. 咚咚咚ゞゞ

    曾经自己写过一个项目监控 然而没多久就扔了

  18. 咚咚咚ゞゞ

    完成搞定一个

  19. Doeca

    Coxxs有美化版的。更加直观

    1. liwanglin12

      。。。🌚我以前就用的 Coxxs 的

  20. Zohar

    回家弄233(逼格比原来GitHub上的那个高好多233

    1. liwanglin12

      12x2h 技术支持🌝

  21. liwanglin12

    居然有 pingback 。。。但是延迟了这么久是什么鬼

  22. Pingback: {技巧}建立自己的服务状态页-转-萌一库

  23. 流觞·曲水

    可是我是前端nginx,后端Apache处理动态。加入以上到nginx配置文件,会报错。请问怎么解决呢?

    1. liwanglin12

      不太懂 Apache 要怎么反代。。。要不你查一下?或者错误提示发一下也行啊

      1. 流觞·曲水

        nginx: [emerg] duplicate location “/” in /usr/local/nginx/conf/vhost/status.ls12.me.conf:38nginx: configuration file /usr/local/nginx/conf/nginx.conf test failed

  24. 荔枝

    之前是不是就有一个状态页面,好像还有友站状态?

    1. liwanglin12

      友站状态撤了,所以才发了教程 233

  25. 呃呃呃

    啊。。。我用地虚拟主机。。。。

  26. CAISIDUO

    前排=w=

  27. 1

    呃。你自己托管页面自己反代,状态页还有啥意义,服务一挂连着状态页一起挂了。

    1. liwanglin12

      能问出这个问题你肯定没仔细看文章,重看一次吧

  28. 小歪

    前了个排

  29. 某宅

    我是沙发!!我来围观了,这很强势,我来一份

    1. 某宅

      LWL 我要原文转载+附上原文地址,可不可以

      1. liwanglin12

        显然可以

      2. 某宅