在线状态页改造-Vercel
2023-04-19更新
目前我在node项目里加入了一个反向代理，已经可以做到完整云端部署了（设置好config后，一键部署到vercel，没有任何非官方外部接口引入）。
相关项目也已经放到github上了，虽然代码比较简陋，但功能上也算是基本完善了。
前言
最近我的一台小服务器挂了一段时间，但由于我的在线状态页是经过了一定程度的自定义改造，需要依赖于服务端和反向代理。因此服务器挂了以后，连在线状态页也无法访问了。
这个暴露出很大的问题，All in one, all in boom!
因此我觉得对原有的状态页进行改造是非常有必要的。
Old Version
我的在线状态页是由UptimeRobot提供的，最早的时候，它的Uptime Status Page是提供自定义域名绑定的，那时不需要任何操作，直接cname绑定即可。
后来，可能是为了降本增效吧，UptimeRobot取消了Status Page的自定义域名绑定功能。
从此，八仙过海，各显神通。有使用其他程序自己实现在线状态页的，也有利用Github Action的，还有使用UptimeRobot提供的api自行获取。而我的实现方式则是在原有提供的在线状态页面基础上，通过反向代理和伪静态恢复原有的状态页。
我将老版本的实现方式放到Github仓库的old分支中备份。
New Version
由于我自己的服务器在线率肯定没有公共服务好，因此经过一番挑选，我选择Vercel来实现在线状态页。
由于Vercel支持node.js的动态网站，于是我稍稍学习了一下node.js，然后踩了些坑，终于完成了基本网页脱离服务器的版本。（目前API接口依然需要反向代理，后续再更新，可能会使用Cloudflare Workers或者集成在Vercel里一起实现？）
同样，我也把这部分代码放到了Github仓库的main分支里。
学习
在学习使用Node.js建立反向代理的时候，我遇到了一些小问题，经查，相关文字给出了一些资料，但这些资料在时效性上有很大的问题。
例如一篇segmentfault上的教程（详见链接12），文中引用http-proxy-middleware的方法有误（const proxy = require('http-proxy-middleware');），在新版本中无法正常运行。在我查阅github上的官方文档（详见链接9）后，改用正确的引用方法（const { createProxyMiddleware } = require('http-proxy-middleware');），程序得以正常运行。
展望
截止目前，已经完成了全部的改造。我在node.js项目里加入了一个简易的反向代理，目前算是完全脱离我的自建服务，已经全部上云了。
未来或许会支持更多官方提供的静态模板？可能哪天闲来无事会再更新一下？毕竟目前这个小项目也已经算是基本完善了。（能用就行...）
据我观察，目前的其他同类项目，大部分都使用了自己（或公共）的反代接口，也有部分项目直接使用api.uptimetrobot.com。但访问可达性不够好。
因此，如果以后有空的话，可能会继续完善本项目。
使用Cloudflare Workers集成在同一个Vercel Project实现
链接
外部链接
- node渲染html模板的两种方法 - JunCode - 博客园
- 在 Express 中提供静态文件
- 使用 NodeJS 实现反向代理 - 腾讯云开发者社区-腾讯云
- Express 教程 4：路由和控制器 - 学习 Web 开发 | MDN
- Configuring Projects with vercel.json | Vercel Docs
- How to Use a Cloudflare Domain with Vercel
- 使用Cloudflare加速vercel | 瓦解的生活记事
- JS 将JSON数组转化为url参数_json转url参数_InterestAndFun的博客-CSDN博客
- chimurai/http-proxy-middleware: The one-liner node.js http-proxy middleware for connect, express, next.js and more
- Express 4.x - API Reference
- Express 4.x - API Reference
- node.js - 使用 express 轻松实现反向代理服务器 - hiyangguo - SegmentFault 思否