全球主机交流论坛

标题: 【更新1.3.0】漂亮的网站监控面板更新了！又有新功能了！ [打印本页]

作者: Mr. 时间: 2020-3-15 15:49
标题: 【更新1.3.0】漂亮的网站监控面板更新了！又有新功能了！
本帖最后由 Mr. 于 2020-3-25 01:55 编辑

v1.3.0 更新：
- 拆分配置文件到 config.js；
- 新增“日志天数”配置；
- 新增“是否显示链接”配置（由 @FXIT 提出）；

更新食用说明：
不需要改 index.html 了，压缩包中多了个 config.js 改里面的就行了。

上次被 @hanada 大佬忽悠说 webpack 大家都会，所以昨天匆匆忙忙就直接把项目扔 github 上了，你们找他找他

说正事，目前已经在 GitHub 上放出编译好的文件，什么环境都不需要！
不需要PHP！不需要nodejs！不需要宝塔！只需要一个支持html的纯静态空间都可以！
包括又拍云！OSS！七牛！啥都行！什么 worker 什么乱七八糟的都可以！

最简单的食用方式：
1. 下载最新版 https://github.com/yb/uptime-status/releases/latest
2. 解压缩压缩包；
3. 打开 config.js 文件；修改你的 apikey 和其它配置（已经做了注释，去掉了代码压缩）
4. 完事！

在线演示：https://status.org.cn

顺便说一下 1.2.0 的更新：
1. 修复了 @hanada 大佬发现一个 bug；
2. 把网站标题、网站地址、导航栏菜单，全部做了可配置化！真正零编译定制！具体的打开 index.html 看注释就明白了！

最后！
这个代码是依赖 UptimeRobot 的！你需要先注册个 UptimeRobot！拿到 apikey！免费的！
所以不要再问我检测线路的问题了！不是我这个代码检测！是 UptimeRobot 去检测的！

作者: work 时间: 2020-3-15 15:50
感谢分享，马上试试~

作者: mlc 时间: 2020-3-15 15:50
前排支持一下

作者: yorkchou 时间: 2020-3-15 15:51
支持一下，以前一直在用这个：https://github.com/nerdbaggy/StatusPage，也是用的uptimerobot的api，不过LZ这个显然好看许多

作者: h20 时间: 2020-3-15 15:51
提示: 作者被禁止或删除内容自动屏蔽

作者: BJY678 时间: 2020-3-15 15:51
前排支持

zsbd |

作者: robot 时间: 2020-3-15 15:51
hanada大佬出来挨打

作者: rru 时间: 2020-3-15 15:52
演示站一直在转圈圈是的问题还是你的问题

作者: Mr. 时间: 2020-3-15 15:53

rru 发表于 2020-3-15 15:52
演示站一直在转圈圈是的问题还是你的问题

是 UptimeRobot 的问题，它家接口有概率返回不带跨域标识的 header，然后就一直转圈圈了，刷新一下就好。
后续版本会加入自动重连。

作者: hasamol7468 时间: 2020-3-15 15:54

过来抄个界面哈哈我前端贼辣鸡

作者: citywar 时间: 2020-3-15 15:57
都在玩这个，监控国外那些JJ库存的源码推荐个

作者: cem 时间: 2020-3-15 15:57
搞个编译完丢上去了~

作者: 小黑 时间: 2020-3-15 15:58
火钳刘明一下

作者: Mr. 时间: 2020-3-15 16:00

citywar 发表于 2020-3-15 15:57
都在玩这个，监控国外那些JJ库存的源码推荐个

这个我还真有写一个。。。监控 vpshared 的虚拟主机库存。。。

作者: b66667777 时间: 2020-3-15 16:03
帮顶支持

作者: 蝼蚁般的存在 时间: 2020-3-15 16:05
搭了一个编译一个没编译表示支持！

作者: luceos 时间: 2020-3-15 16:06
效率挺高啊，支持

作者: BleShi 时间: 2020-3-15 16:06
谢谢楼主分享！

作者: wolfewong 时间: 2020-3-15 16:11
路过支持一下

作者: Reves 时间: 2020-3-15 16:13
感谢分享，正在试

作者: zxzf 时间: 2020-3-15 16:20
本帖最后由 zxzf 于 2020-3-15 16:22 编辑

楼主效率高啊，搞了个域名 status.ac.cn

目前用的是编译的，试下不用编译的

作者: 大侠饶命 时间: 2020-3-15 16:22
确实很效率再来捧一波哈哈哈

作者: Wyane 时间: 2020-3-15 16:29
支持大佬，效率真高

-- 低价年抛域名5元起，看签名获取更多详情

作者: Mr. 时间: 2020-3-15 16:32

zxzf 发表于 2020-3-15 16:20
楼主效率高啊，搞了个域名 status.ac.cn
目前用的是编译的，试下不用编译的 ...

看到 mjj 不会用，心里急啊，赶紧改改改

作者: OXO 时间: 2020-3-15 16:53
提示: 作者被禁止或删除内容自动屏蔽

作者: 我日人 时间: 2020-3-15 16:58
提示: 作者被禁止或删除内容自动屏蔽

作者: stat 时间: 2020-3-15 16:58
支持一下，又可以监控了

作者: 风为裳 时间: 2020-3-15 17:14
感谢分享，虽然不知道是什么，等下去试试看

作者: hanada 时间: 2020-3-15 17:15

robot 发表于 2020-3-15 15:51
hanada大佬出来挨打

我昨天说的是npm编译确实很简单啊，就三个命令。然后也还说了最好加个release啊

作者: Mr. 时间: 2020-3-15 17:32

我日人发表于 2020-3-15 16:58
不是，这不就是修改uptime-status-1.2.0%uptime-status-1.2.0\public目录下的index.html单文件，把在https: ...

今天放出来的才改成这样的，之前是要改 src/config.js 然后 build，估计很多 mjj 没接触过 webpack 所以就懵了

作者: Zeros 时间: 2020-3-15 18:07
lz牛批

作者: Bresh 时间: 2020-3-15 18:19
很好用感谢楼主

作者: FXIT 时间: 2020-3-15 18:55
有没有支持udp端口监测的...紫薯不顶

作者: Mr. 时间: 2020-3-15 18:59

FXIT 发表于 2020-3-15 18:55
有没有支持udp端口监测的...紫薯不顶

UptimeRobot 支持端口检测，不过我没用过，可能也跟我这个面板会不兼容。
你可以试试，如果不兼容，把你的 api key 私信给我，我来更新兼容。

作者: FXIT 时间: 2020-3-15 19:02

Mr. 发表于 2020-3-15 18:59
UptimeRobot 支持端口检测，不过我没用过，可能也跟我这个面板会不兼容。
你可以试试，如果不兼容，把你 ...

对。。我刚刚在官网加了udp端口，好像是检测不了的...报红色...
有没有类似能支持监测udp的平台...

作者: 刘飞儿 时间: 2020-3-15 19:06
谢谢大佬，上午偷偷摸摸已经部署了，忘记来回帖，现在来补上

作者: FXIT 时间: 2020-3-15 19:43
建议加入是否显示网站链接跳转按钮的配置。

作者: kxzd 时间: 2020-3-15 19:47
mark

世纪互联 rclone 使用教程：

https://www.lilynana.eu.org/thread-643457-1-1.html

作者: Mr. 时间: 2020-3-15 19:48

FXIT 发表于 2020-3-15 19:43
建议加入是否显示网站链接跳转按钮的配置。

好，正好准备加入“日志天数”的配置

作者: wop 时间: 2020-3-15 19:57

work 发表于 2020-3-15 15:50
感谢分享，马上试试~

大哥交出头像番号

作者: 一叶甘棠 时间: 2020-3-15 20:05
支持大佬

作者: FXIT 时间: 2020-3-15 20:06

Mr. 发表于 2020-3-15 19:48
好，正好准备加入“日志天数”的配置

大佬很给力

还可以加个分类显示的...

作者: 高攀不起 时间: 2020-3-15 20:15
感谢大佬分享！！

作者: zytlhc 时间: 2020-3-15 21:00
演示站呢？

作者: daniu 时间: 2020-3-15 21:04
马克一下。漂亮的网站监控面板

作者: Mr. 时间: 2020-3-15 21:10

zytlhc 发表于 2020-3-15 21:00
演示站呢？

我签名就是

作者: Mr. 时间: 2020-3-15 21:58

FXIT 发表于 2020-3-15 20:06
大佬很给力
还可以加个分类显示的...

更新好了，见主贴说明；

作者: nilvae 时间: 2020-3-15 22:28

Mr. 发表于 2020-3-15 21:58
更新好了，见主贴说明；

index.html里好像没啥东西。都在JS里的。JS里的KEY怎么是4个。我看UPTIME网站上就一个KEY啊？

作者: Mr. 时间: 2020-3-15 22:34

nilvae 发表于 2020-3-15 22:28
index.html里好像没啥东西。都在JS里的。JS里的KEY怎么是4个。我看UPTIME网站上就一个KEY啊？ ...

更新说明不是写了改在 config.js 了嘛…
官网的 mySettings 里有三种 key 模式，你仔细看后两个不同说明
另外是 UptimeRobot 我怕你上错站了…

作者: thoughcn 时间: 2020-3-15 22:43
很不错，感谢大佬。已经部署了一个。

作者: StudyLong 时间: 2020-3-15 22:45
66666

作者: lenchanlhz 时间: 2020-3-15 22:56
挺好的啊！

作者: hanada 时间: 2020-3-15 23:01

Mr. 发表于 2020-3-15 15:53
是 UptimeRobot 的问题，它家接口有概率返回不带跨域标识的 header，然后就一直转圈圈了，刷新一下就好。 ...

我直接在服务器上反向代理他的api，所以请求的也是站点自己的url，就没有跨域问题了23333

作者: 榄菊蚊香 时间: 2020-3-15 23:03

有没有安装教程？？？？？

作者: Mr. 时间: 2020-3-15 23:03

hanada 发表于 2020-3-15 23:01
我直接在服务器上反向代理他的api，所以请求的也是站点自己的url，就没有跨域问题了23333 ...

是的，我考虑在下个版本中增加 API 域名配置，方便设置自己的反代。不知道有没有这个需求。

作者: Mr. 时间: 2020-3-15 23:04

榄菊蚊香发表于 2020-3-15 23:03
有没有安装教程？？？？？

我寻思这主贴也写得很清楚了啊……

作者: hanada 时间: 2020-3-15 23:04

榄菊蚊香发表于 2020-3-15 23:03
有没有安装教程？？？？？

把包下载下来，然后打开index.html，把apikey换成你自己的，再把文字之类的内容改一下，就直接能用了，纯html+css+js，所以不需要任何运行环境，丢进你服务器的web目录就可以用了

作者: Mr. 时间: 2020-3-15 23:06

hanada 发表于 2020-3-15 23:04
把包下载下来，然后打开index.html，把apikey换成你自己的，再把文字之类的内容改一下，就直接能用了，纯 ...

已经更新了啦，不用弄 index.html 了，增加了一个 config.js 直接改那个更直观

作者: hanada 时间: 2020-3-15 23:07

Mr. 发表于 2020-3-15 23:03
是的，我考虑在下个版本中增加 API 域名配置，方便设置自己的反代。不知道有没有这个需求。 ...

反正uptimerobot的api是cloudflare的，正常情况下也不会挂，看他们的需求呗。我的nginx反代是这样的
location /v2 {
proxy_pass https://api.uptimerobot.com;
proxy_set_header Host $proxy_host;
proxy_http_version 1.1;
proxy_ssl_name $proxy_host;
proxy_ssl_server_name on;
}

作者: Mr. 时间: 2020-3-15 23:31

hanada 发表于 2020-3-15 23:07
反正uptimerobot的api是cloudflare的，正常情况下也不会挂，看他们的需求呗。我的nginx反代是这样的
loca ...

既然它家 api 是在 cloudflare 的那可以用 cf worker 反代啊，我之前反代了 cf 自家的 api 加了个跨域 header，可以参考一下

const handleRequest = async (request) => {
const url = new URL(request.url);
const response = await fetch('https://api.cloudflare.com/client/v4' + url.pathname, {
method: request.method,
headers: request.headers
});
const headers = new Headers(response.headers);
headers.append('Access-Control-Allow-Origin', '*');
return new Response(response.body, {
status: response.status,
statusText: response.statusText,
headers: headers
});
}
addEventListener('fetch', event => {
event.respondWith(handleRequest(event.request));
});

复制代码

作者: icefog 时间: 2020-3-15 23:33
提示: 作者被禁止或删除内容自动屏蔽

作者: UOvZ 时间: 2020-3-15 23:34
本帖最后由 UOvZ 于 2020-3-15 23:35 编辑

卧槽，，，这特吗的，为什么要写
// 是否显示监测站点的链接
ShowLink: false,
别人打开这个js文件，然后复制你的key，然后打开此选项岂不是就看到了监控设备的IP地址？然后DD一波、、、完美，，，，，。。。。。直接把这项删除或者单独把key藏起来啊。

怎样才能把key藏起来呢？

作者: 榄菊蚊香 时间: 2020-3-15 23:34

Mr. 发表于 2020-3-15 23:06
已经更新了啦，不用弄 index.html 了，增加了一个 config.js 直接改那个更直观

我设置运行运行目录为public 什么都没有改，，空白。。页面

作者: Mr. 时间: 2020-3-15 23:36

榄菊蚊香发表于 2020-3-15 23:34
我设置运行运行目录为public 什么都没有改，，空白。。页面

那是当然… 如果下载了源码就要编译，运行目录是编译后的 build，不想自己编译的话就直接下载 release 包就好了，没有什么 public 目录，看帖要仔细啊。。。

作者: 榄菊蚊香 时间: 2020-3-15 23:37

hanada 发表于 2020-3-15 23:04
把包下载下来，然后打开index.html，把apikey换成你自己的，再把文字之类的内容改一下，就直接能用了，纯 ...

他这个API有几个。选哪个啊The main API key is u886436d978a6b1069 (Copy to Clipboard) 这个？

作者: Mr. 时间: 2020-3-15 23:39

UOvZ 发表于 2020-3-15 23:34
卧槽，，，这特吗的，为什么要写
// 是否显示监测站点的链接
ShowLink: false,

首先呢，UptimeRobot 的 api 默认就有返回站点 url，即便是我不写，请求里也有。
其次呢，MJJ 们想自己部署的原因就是自己看，看自己的站，一般只有自己知道在哪里能看。
最后呢，加链接按钮是为了方便自己打开网站。

作者: 榄菊蚊香 时间: 2020-3-15 23:40

Mr. 发表于 2020-3-15 23:39
首先呢，UptimeRobot 的 api 默认就有返回站点 url，即便是我不写，请求里也有。
其次呢，MJJ 们想自己部 ...

谢了。我下的源代码。。。

作者: weixiangnan 时间: 2020-3-15 23:41
插

作者: UOvZ 时间: 2020-3-15 23:41

Mr. 发表于 2020-3-15 23:39
首先呢，UptimeRobot 的 api 默认就有返回站点 url，即便是我不写，请求里也有。
其次呢，MJJ 们想自己部 ...

本想开放给用户看的，还是算了，自己看好了。

作者: Mr. 时间: 2020-3-15 23:43

UOvZ 发表于 2020-3-15 23:41
本想开放给用户看的，还是算了，自己看好了。

你可以反代官方的 api，把 url 去掉，甚至可以把 key 放到后端去，前端不暴露 key。
不过这样监控的数值毫无可信度，怎么假在线率都可以了。

作者: Mr. 时间: 2020-3-15 23:46

榄菊蚊香发表于 2020-3-15 23:37
他这个API有几个。选哪个啊The main API key is ***** (Copy to Clipboard) 这个？ ...

大佬你快编辑掉你的帖子，main api key 可以操控你整个账户，你要用下面两种 read-only 的 api key

作者: 榄菊蚊香 时间: 2020-3-15 23:49

Mr. 发表于 2020-3-15 23:46
大佬你快编辑掉你的帖子，main api key 可以操控你整个账户，你要用下面两种 read-only 的 api key ...

没那么傻。我中间删掉一段了。控制不来的。。谢啦

作者: huangtao728 时间: 2020-3-16 00:23
搭建好了，支持一波！

作者: 半半 时间: 2020-3-16 00:24
给大佬支持一波

作者: M78探索者 时间: 2020-3-16 00:30
谢谢分享，支持一下

作者: yangyzp 时间: 2020-3-16 01:22
可以检查被墙吗？就是国内tcping国外的机器

作者: 人是我 时间: 2020-3-16 01:49
提示: 作者被禁止或删除内容自动屏蔽

作者: 爱安利的芋头 时间: 2020-3-16 01:58
提示: 作者被禁止或删除内容自动屏蔽

作者: zh000323 时间: 2020-3-16 02:09
感谢大佬的分享

作者: 花落无声 时间: 2020-3-16 03:14
不错，支持下！

作者: 王大佬 时间: 2020-3-16 06:49
提示: 作者被禁止或删除内容自动屏蔽

作者: 王大佬 时间: 2020-3-16 06:51
提示: 作者被禁止或删除内容自动屏蔽

作者: honey 时间: 2020-3-16 06:56
这个就牛皮了哥

作者: thinkxen 时间: 2020-3-16 07:28
感谢分享，正在试

作者: 告辞 时间: 2020-3-16 07:34
菜鸡需要的是docker一键，cf worker一键

作者: cnly1987 时间: 2020-3-16 07:59
不错，我clone下来，用antd美化美化。
uptimerobot 有添加网址的接口没。再加个登录添加网址？？

作者: hanada 时间: 2020-3-16 08:12

cnly1987 发表于 2020-3-16 07:59
不错，我clone下来，用antd美化美化。
uptimerobot 有添加网址的接口没。再加个登录添加网址？？ ...

有，用main key就可以添加新监控，不过如果你用main key的话就不能把key数据放前端了，不然的话谁都能修改你的监控了

作者: 姬长信 时间: 2020-3-16 08:25

UOvZ 发表于 2020-3-15 23:34
卧槽，，，这特吗的，为什么要写
// 是否显示监测站点的链接
ShowLink: false,

官方的免费版隐藏的

作者: 无限啸傲 时间: 2020-3-16 08:28
挺好看的..支持

作者: Shtahal 时间: 2020-3-16 08:58
不懂就问这个会占用服务器大量资源吗

作者: Mr. 时间: 2020-3-16 09:04

Shtahal 发表于 2020-3-16 08:58
不懂就问这个会占用服务器大量资源吗

不至于吧… 相当于5分钟访问一次网站啊…

作者: 快乐风男 时间: 2020-3-16 10:13
大佬，我提个建议，能否去掉名字后面的链接，一点开就会暴露机器的IP地址
如果自己知道还好，可能会方便，但是如果不小心别人知道了或是公开状态页面的话，暴露IP地址是个很危险的事情。。。

作者: Mr. 时间: 2020-3-16 10:14

快乐风男发表于 2020-3-16 10:13
大佬，我提个建议，能否去掉名字后面的链接，一点开就会暴露机器的IP地址
如果自己知道还好，可能会方便， ...

看一楼主帖更新说明，1.3.0 已经加入了可选配置

作者: 快乐风男 时间: 2020-3-16 10:20

Mr. 发表于 2020-3-16 10:14
看一楼主帖更新说明，1.3.0 已经加入了可选配置

忘记这个了，抱歉

作者: Mr. 时间: 2020-3-16 10:27

快乐风男发表于 2020-3-16 10:20
忘记这个了，抱歉

不过意义不大，UptimeRobot 的接口就是会暴露服务器地址的，你自己设置不显示链接，别人也可以通过看网络请求，看到服务器地址

作者: soilderjames 时间: 2020-3-16 10:35
mark一下

作者: 行尸走肉 时间: 2020-3-16 10:42
大佬能不能折腾一下部署到heroku上

作者: mikj521 时间: 2020-3-16 10:50
不错点赞

作者: Mr. 时间: 2020-3-16 11:15

行尸走肉发表于 2020-3-16 10:42
大佬能不能折腾一下部署到heroku上

为啥不能部署到heroku… 下载release的静态文件直接扔heroku上呀，
或者fork源码让heroku自己部署，我的演示站就在zeit上的，跟heroku差不多玩法

作者: Yrh 时间: 2020-3-16 11:17
大佬nbnbnb

欢迎光临全球主机交流论坛 (https://lilynana.eu.org/)