Uptime-Status网站监测项目部署

项目地址：

https://github.com/git80123/Uptime-Status

部署准备：

获取 UptimeRobot API Key

vercel部署

  • 点击上方黑色 "Deploy" 按钮
  • 连接到GitHub，选择项目
  • 填写项目名称，点击Create
  • 使用默认配置 VITE_UPTIMEROBOT_API_URL = "/api/status"

在vercel中添加环境变量：

UptimeRobot API Key
VITE_UPTIMEROBOT_API_KEY = "ur2290572-af4663a4e3f83be26119abbe"

UptimeRobot API URL
除腾讯云 EdgeOne Pages 、vercel 、cloudflare pages 外
其它部署方式需要自行搭建 API 代理
代理地址 https://api.uptimerobot.com/v2/getMonitors
VITE_UPTIMEROBOT_API_URL = "/api/status"

站点名称
VITE_APP_TITLE = “梦爱吃鱼”

添加域名

需已托管到CF的域名，

添加监控网站

登录https://dashboard.uptimerobot.com/monitors添加自己已部署好的站点即可

其他部署方式：

环境要求
Node.js >= 16.16.0
NPM >= 8.15.0 或 PNPM >= 8.0.0

  1. 腾讯云 EdgeOne Pages

点击上方蓝色 "Deploy" 按钮
连接到GitHub，选择项目
框架预设选择Vue，点击开始部署
使用默认配置 VITE_UPTIMEROBOT_API_URL = "/api/status"

  1. Cloudflare Pages

点击上方橙色 "Deploy" 按钮
找到计算(worker) 部分
点击创建，选择Pages，连接到GitHub，选择项目，点击开始创建
框架预设选择Vue，点击保持并部署
使用默认配置 VITE_UPTIMEROBOT_API_URL = "/api/status"

  1. 其他平台

自行搭建 API 代理
在 .env 文件中设置 VITE_UPTIMEROBOT_API_URL 为你的 API 代理地址

快速开始

  1. 克隆项目

https://github.com/JLinmr/uptime-status.git

1
2
git clone https://github.com/JLinmr/uptime-status.git
cd uptime-status

  1. 安装依赖

1
2
3
pnpm install
# 或
npm install

  1. 配置环境变量

在 .env 文件中修改以下配置：

1
2
3
4
5
6
7
8
9
10
11
# UptimeRobot API Key
VITE_UPTIMEROBOT_API_KEY = "ur2290572-af4663a4e3f83be26119abbe"

# UptimeRobot API URL 
# 除腾讯云 EdgeOne Pages 、vercel 、cloudflare pages 外 
## 其它部署方式需要自行搭建 API 代理 
## 代理地址 https://api.uptimerobot.com/v2/getMonitors
VITE_UPTIMEROBOT_API_URL = "/api/status"

# 站点名称
VITE_APP_TITLE = "梦爱吃鱼"

  1. 开发调试

1
2
3
4
5
pnpm dev
# 或
npm run dev

# 开发环境需要将 VITE_UPTIMEROBOT_API_URL 设置为 "https://api.uptimerobot.com/v2/getMonitors"

  1. 构建部署

1
2
3
pnpm build
# 或
npm run build

构建的文件在 dist 目录下，将 dist 目录部署到服务器即可。

感谢梦爱吃鱼