Monitor Frontend

Monitor 的前端展示项目（Vue 3 + Vite）。

前端通过 WebSocket 接收节点实时数据，通过 HTTP 接口获取补充信息，适合部署为静态站点。

• 前端配置文件：public/config.json
• 运行时会直接请求 /config.json
• public/config.json 会由 Vite 作为静态文件提供（开发环境）并原样拷贝到 dist/config.json（构建产物）

也就是说，部署时只需要改好 public/config.json（或构建后改 dist/config.json）即可。

编辑 public/config.json：

{
  "socket": "wss://your-api.example.com/ws",
  "apiURL": "https://your-api.example.com"
}

说明：

• socket：后端 WSS 地址（通常是 ws(s)://<host>/ws）
• apiURL：后端 API 地址

npm install
npm run dev

默认使用 public/config.json 中的配置。

npm run build

构建产物在 dist/。

可本地预览：

npm run preview

项目已提供 .cnb.yml，更推荐使用 CNB 的流水线直接部署到 EoPages（EdgeOne Pages）。

当前 .cnb.yml 示例中包含：

• 通过 imports 引入密钥配置
• 使用 edgeone pages deploy 执行发布

部署前请先按你自己的环境修改：

1. .cnb.yml 中的密钥导入地址（imports）
2. 发布命令中的站点名（例如 -n status-pages）
3. 发布命令使用的密钥变量（例如 ${CHINA_KEY}）
4. public/config.json 中的后端 API / WSS 地址

示例（以仓库现有写法为参考）：

main:
  push:
    - name: Deploy
      docker:
        image: node:20
      imports:
        - https://your-cnb-keys-repo/-/blob/main/ThirdParty/EdgeonePages.yml
      stages:
        - script: npx -y edgeone pages deploy -n your-pages-name -t ${YOUR_EDGEONE_TOKEN}

• 推荐优先使用 EOPages 部署静态前端页面
• 如使用其他静态托管平台（Nginx / CDN / Pages），只需确保能正确提供 dist/ 目录和 /config.json