全球主机交流论坛

标题: 【开源】来了来了，你们要的漂亮的网站监控面板 [打印本页]

作者: Mr. 时间: 2020-3-15 02:31
标题: 【开源】来了来了，你们要的漂亮的网站监控面板
本帖最后由 Mr. 于 2020-3-25 01:55 编辑

最新版教程看 https://www.gebi.eu.org/thread-658354-1-1.html 这个贴！！！

没正儿八经的在 GitHub 上发过开源项目，折腾了一天，都没水论坛。。

上个帖子发了之后，没想到求源码的 MJJ 这么多，受宠若惊，
感谢各位 MJJ 的支持和捧场，MJJ 最可爱了

这两天做了一点改进：
- 支持 Read-Only Api Key 了，也就是一个 key 包含了多个站点的那种，减少请求数，缺点是你账号下的所有网站都会被显示出来；
- 当然，单个网站的 Monitor-Specific Api Key 依旧支持；
- 完善了每天状态的显示方式，改成 tooltip 模式了；

开源地址：https://github.com/yb/uptime-status
各位有 GitHub 账号的 MJJ 欢迎来一波 Star，让我感受一下 Star 是什么样的

代码同步演示站：https://status.org.cn/

------------------------------------------

食用方法：
1. 下载或 clone 代码；
2. 第一次下载之后先执行 npm i 安装依赖；
3. 改 src/config.js 中的 apikeys；
4. 执行 npm run build 打包；
5. 把 build 目录下的静态文件随便找个地方扔就完事了；

------------------------------------------

最后我想吐槽，为啥 UptimeRobot 没有 aff 呢，不然靠 mjj 帮我点一波我也能升级到1分钟1次的收费版呀。。。。

后续如果有更新，会同步更新本贴。

作者: naryun 时间: 2020-3-15 02:31
路过围观

--< 我们一直在一起，所以最后也想在你身旁。 —— 火影忍者 >--

作者: luceos 时间: 2020-3-15 02:32
多谢分享，大佬应该放个图比较直观

作者: biu 时间: 2020-3-15 02:32
我也来了

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

luceos 发表于 2020-3-15 02:32
多谢分享，大佬应该放个图比较直观

演示站直接看不是更直观吗

作者: leonead 时间: 2020-3-15 02:34
必须支持一波~！

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

作者: 有JJ的男人 时间: 2020-3-15 02:37

大佬牛逼收藏备用之

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

作者: kxzd 时间: 2020-3-15 02:39
666

世纪互联 rclone 使用教程：

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

作者: lenchanlhz 时间: 2020-3-15 02:39
路过，支持一下！

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

我日人发表于 2020-3-15 02:37
不错，怎么不写个安装说明？

补上了，因为之前帖子里另一位大佬说 npm 谁不会，所以就没写，懂的都懂。。。

作者: 大侠饶命 时间: 2020-3-15 02:40
菜鸡表示大佬有安装指导吗哈哈哈

作者: Mr. 时间: 2020-3-15 02:42

h20 发表于 2020-3-15 02:36
这个貌似只有可用性检测？

UptimeRobot 负责检测，这个代码只是一个 status 展示页

作者: luceos 时间: 2020-3-15 02:42

Mr. 发表于 2020-3-15 02:32
演示站直接看不是更直观吗

不错不错，如果能做成支持worker就爽了

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

luceos 发表于 2020-3-15 02:42
不错不错，如果能做成支持worker就爽了

什么 worker，cf 的 worker 还是啥？

作者: naryun 时间: 2020-3-15 02:44
本帖最后由 naryun 于 2020-3-15 02:50 编辑

。

作者: luceos 时间: 2020-3-15 02:47

Mr. 发表于 2020-3-15 02:43
什么 worker，cf 的 worker 还是啥？

是啊，CF的worker版本，现在百度云加速也支持

作者: 表弟 时间: 2020-3-15 02:47
还是有点看不懂，求详细安装教程，看着好高端的样子。

作者: 哀素衣 时间: 2020-3-15 02:53
大佬牛批

作者: Mr. 时间: 2020-3-15 02:54

luceos 发表于 2020-3-15 02:47
是啊，CF的worker版本，现在百度云加速也支持

这… 就是个纯静态的站啊… 连阿里云 oss 或者七牛又拍云都可以放的…

作者: Mr. 时间: 2020-3-15 02:55

表弟发表于 2020-3-15 02:47
还是有点看不懂，求详细安装教程，看着好高端的样子。

这个如果会 vue / react 应该一看就懂了，明天我打包一个不需要编译的版本吧…… 被上次另一位 mjj 忽悠了，他说 webpack 大家都会…

作者: gmm 时间: 2020-3-15 03:00
话说我学了 nodejs 还写了自用框架, 现在基本全忘了信不信
支持楼主出个编译版
这个好玩呢

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

gmm 发表于 2020-3-15 03:00
话说我学了 nodejs 还写了自用框架, 现在基本全忘了信不信
支持楼主出个编译版
这个好玩呢 ...

太真实了… 现在前端的东西，隔一年不玩都不认识了…

作者: 小钟哥 时间: 2020-3-15 04:05
来个演示更完美

作者: 翠花 时间: 2020-3-15 04:05
膜拜大佬！

作者: sky21022 时间: 2020-3-15 05:04
不错，用的上就好

作者: 告辞 时间: 2020-3-15 06:48
star已送上

作者: 某猫猫 时间: 2020-3-15 08:03
哇，终于来了

作者: Reves 时间: 2020-3-15 08:03
感谢分享，已star

作者: wope 时间: 2020-3-15 08:07
战略mark 感谢分享！

作者: sdcool 时间: 2020-3-15 08:24
V2EX 怎么这么吊，，他不是挂的CF吗？

作者: 花落无声 时间: 2020-3-15 08:55
看起来不错！

作者: Mr. 时间: 2020-3-15 09:12

小钟哥发表于 2020-3-15 04:05
来个演示更完美

帖子都不看的嘛？

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

sdcool 发表于 2020-3-15 08:24
V2EX 怎么这么吊，，他不是挂的CF吗？

UptimeRobot 的监测服务器在国外呀，国外CF还是挺稳的…

作者: hjvn2211445 时间: 2020-3-15 09:16
pinguzo有1分钟的监控 https://cp.pinguzo.com/status_pages?subdomain=pinguzo.lezi.me

作者: 新网络 时间: 2020-3-15 09:20
提示: 作者被禁止或删除内容自动屏蔽

作者: camboo 时间: 2020-3-15 09:55
前排支持

作者: GAted0 时间: 2020-3-15 09:56
感谢大佬

作者: dazeng 时间: 2020-3-15 10:05
支持技术帝

作者: 提皮tp 时间: 2020-3-15 10:11
谢谢大佬，这个就真的很有用了
上一个基于uptimerobot api的状态面板已经好久没更新了

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

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

作者: suaxi 时间: 2020-3-15 10:18
收藏了，大佬牛批！

作者: lyhiving 时间: 2020-3-15 10:22
国外检测很容易的，只要是国内检测……强不强，稳不稳

作者: 高板惠乃果 时间: 2020-3-15 10:26
能直接把我们站加上去就更好，了

作者: sky21022 时间: 2020-3-15 10:26
有空研究研究看看

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

作者: jj1314 时间: 2020-3-15 10:58
我这移动线路，你的演示站一直转圈圈

作者: 宝创 时间: 2020-3-15 11:02
有空试试，有点帅气

作者: hanada 时间: 2020-3-15 11:23
啊终于来了，中午就去编译部署一圈

作者: stille 时间: 2020-3-15 11:23
我记得uptimerobot的官方stats页面被墙了..只用api不会墙么

作者: 全球VPS大学 时间: 2020-3-15 11:25

为啥很少有PHP版本的

作者: 某斑竹草泥马 时间: 2020-3-15 11:29
提示: 作者被禁止或删除内容自动屏蔽

作者: 姬长信 时间: 2020-3-15 11:37
大佬要不要出一个宝塔配置nodejs 的教程

作者: liming 时间: 2020-3-15 11:39
谢谢楼主分享

作者: huaxing0211 时间: 2020-3-15 12:09
star+1

zsbd

作者: 蓝浩 时间: 2020-3-15 12:12
还要打包，好麻烦。。。懒人咋办？

作者: huaxing0211 时间: 2020-3-15 12:15
编译各种错误，不折腾了，坐等编译好的……

作者: dole 时间: 2020-3-15 12:39
支持支持 Star献上

作者: hanada 时间: 2020-3-15 12:40

stille 发表于 2020-3-15 11:23
我记得uptimerobot的官方stats页面被墙了..只用api不会墙么

api是走cloudflare的，不过为了速度我还是反代了他的api接口

作者: hanada 时间: 2020-3-15 12:44
。。。。编译之后用你原本的api正常，用read-only api 就报错了

作者: nilvae 时间: 2020-3-15 12:50
楼主能不能把安装命令详细点这样看的一脸喵逼

作者: hanada 时间: 2020-3-15 12:57

nilvae 发表于 2020-3-15 12:50
楼主能不能把安装命令详细点这样看的一脸喵逼

git clone下来之后，npm i，然后npm run build，build之后把build文件夹的内容拿出来就行。src/config.json里面就是你的api

作者: 蝼蚁般的存在 时间: 2020-3-15 13:05
必须点赞。

作者: Mr. 时间: 2020-3-15 13:12

hanada 发表于 2020-3-15 12:44
。。。。编译之后用你原本的api正常，用read-only api 就报错了

你改别的地方了吧，我开发的时候全程 read-only api key 的，要不把你的 key 私信我一下

作者: dalu 时间: 2020-3-15 13:14
666
--< 明明只是活着，哀伤却无处不在… >--

作者: 全球VPS大学 时间: 2020-3-15 13:33
用宝塔怎么安装呢

作者: 西北老汉 时间: 2020-3-15 13:59
大佬牛逼
收藏夹+1

作者: Redbeanw 时间: 2020-3-15 14:04
好活！支持开源

作者: tssz 时间: 2020-3-15 14:09
谢谢大佬，我的监控搭好了。
签名后面加jk即可预览

作者: arnolam 时间: 2020-3-15 14:19
留個言標記一下，用再拿

作者: 纳米科技 时间: 2020-3-15 14:27
star star

作者: kxzd 时间: 2020-3-15 14:43

tssz 发表于 2020-3-15 14:09
谢谢大佬，我的监控搭好了。
签名后面加jk即可预览

编译完的共享一下啊

作者: haozi 时间: 2020-3-15 15:11
收藏了，改天试试

作者: 初阳 时间: 2020-3-15 15:14
已经star

作者: cem 时间: 2020-3-15 15:15
我喜欢这个UI 已部署

作者: praming 时间: 2020-3-15 15:18
厉害了大兄弟，已star

作者: 1016797313 时间: 2020-3-15 15:19
感谢大佬哈哈，支持一下

作者: tssz 时间: 2020-3-15 15:24

kxzd 发表于 2020-3-15 14:43
编译完的共享一下啊

我就是照着教程来，编译不懂

作者: kxzd 时间: 2020-3-15 15:34

tssz 发表于 2020-3-15 15:24
我就是照着教程来，编译不懂

弄完public文件夹打包发下吧

作者: tssz 时间: 2020-3-15 15:43

kxzd 发表于 2020-3-15 15:34
弄完public文件夹打包发下吧

这个好像是我监控的网站啊，

你如果要想的话，把你的API给我，我给你弄一下。

作者: netsky 时间: 2020-3-15 15:45
大佬安装说明来一份

作者: Face 时间: 2020-3-15 15:46

不错不错

作者: 落雪长风 时间: 2020-3-15 15:48
火线留名。。。以便备用。

作者: kxzd 时间: 2020-3-15 17:03

tssz 发表于 2020-3-15 15:43
这个好像是我监控的网站啊，

你如果要想的话，把你的API给我，我给你弄一下。 ...

我直接把静态的里面改成我的api就完了

作者: flyqie 时间: 2020-3-15 17:19
大佬NB！真的挺漂亮的

作者: 2han9wen71an 时间: 2020-3-16 14:56
安装说明 --< 你消失了我都不会消失 >--

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

2han9wen71an 发表于 2020-3-16 14:56
安装说明 --< 你消失了我都不会消失 >--

见新帖 https://www.gebi.eu.org/thread-658354-1-1.html

作者: Mint 时间: 2020-3-18 18:00
本帖最后由 Mint 于 2020-3-18 18:21 编辑

好康！！有点 statuspage.io 的内味了，但是因为会漏monitor的地址，我还是会考虑使用另一个 giuem/uptimerobot-page，也许docker打包个nginx进去，可以防止api 请求直接漏出来？

当然纯前端还是有好处，直接丢到 GitHub pages 也能跑

作者: Mint 时间: 2020-3-18 18:03

h20 发表于 2020-3-15 02:36
这个貌似只有可用性检测？

api只能拿到 up 在线率，延迟看不到，只有官方面板才有

作者: 002 时间: 2020-3-18 18:49
要是能把这个功能再开发一下.应该可以做个友情连接页面了.
50个URL 对于站点来说.应该不会有这多友情连接吧.
刚才在 github 提交了一个意见,,看下.这个可以考虑下个版本没 ?

作者: Mr. 时间: 2020-3-18 19:02

Mint 发表于 2020-3-18 18:00
好康！！有点 statuspage.io 的内味了，但是因为会漏monitor的地址，我还是会考虑使用另一个 giuem/uptime ...

确实也有考虑过做个后端的 api 封装，不过因为超出了这个页面最初设计的目的，最近就没动工。
毕竟 api key 泄露的问题应该是 uptime robot 考虑，而且展示页面的场合需求不一样，可能有些人会介意，有些人不会介意吧。
后面会增加自定义 api 地址的配置，心情好的话再开一个 repo 单独放后端封装的 api，这样就完美了~

作者: Mint 时间: 2020-3-18 20:02

Mr. 发表于 2020-3-18 19:02
确实也有考虑过做个后端的 api 封装，不过因为超出了这个页面最初设计的目的，最近就没动工。
毕竟 api k ...

我都想把你的样式搬到另一个面板了，泄漏 api key 倒没什么，重要的是监控的端点地址会泄漏。如果只监控网站什么的，网站可能套了cdn。如果直接监控源站ip的，那么ip会暴露，mjj应该都不希望被ddcc吧。

因为是纯前端，在用户访问网页的时候渲染数据，必然会暴露api请求，这是没办法的事，但是好处是部署方便，不用像我一样，自从免费樱花docker倒闭后，我的 status page 就挂了，至今还没找到好用的免费docker托管。

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