纯前端 Demo
EdgeChat 提供一个与生产环境完全隔离的纯前端演示站:
https://edgechat-demo.gdz66601.workers.dev
演示构建继续使用正式项目的 Vue 页面、路由、状态管理、聊天组合式函数和实时消息协议,只把运行时数据源替换为浏览器内存中的模拟后端。用户可以浏览聊天前台、个人设置、管理后台、登录和邀请注册页面,也可以体验消息发送、群组管理、用户管理、邀请链接和 Telegram 消息回流。
隔离边界
| 项目 | 生产环境 | Demo |
|---|---|---|
| 前端页面与业务状态 | 正式 Vue 代码 | 复用同一套代码 |
| API 与 WebSocket | Cloudflare Worker、Durable Objects | 浏览器内存模拟 |
| 数据 | D1、KV、R2 | 页面刷新后重置 |
| Worker | cfchat | edgechat-demo |
| 静态构建目录 | frontend/dist | frontend/demo-dist |
| Wrangler 配置 | wrangler.toml | wrangler.demo.toml |
wrangler.demo.toml 只声明 Workers Static Assets,不绑定 D1、KV、R2、Durable Objects 或 Cron,因此 demo 部署不会创建、迁移或复用生产数据资源。
本地运行
bash
npm install
npm run dev:demo默认地址为 http://127.0.0.1:5174。正式前端仍使用 npm run dev:frontend 和原来的端口,两者互不覆盖。
构建与手动部署
bash
npm run build:demo
npm run deploy:demo非交互部署前需要在当前终端设置 demo 账户的 Cloudflare 环境变量:
powershell
$env:CLOUDFLARE_ACCOUNT_ID = "demo-account-id"
$env:CLOUDFLARE_API_TOKEN = "demo-api-token"
npm run deploy:demo这些凭据只通过环境变量传递,不写入源码或 Wrangler 配置。
GitHub Actions
.github/workflows/deploy-demo.yml 是独立的手动工作流,只在 GitHub Actions 页面触发 workflow_dispatch。仓库需要另行配置:
DEMO_CLOUDFLARE_ACCOUNT_IDDEMO_CLOUDFLARE_API_TOKEN
工作流会运行测试、构建 frontend/demo-dist,再部署 edgechat-demo。它不调用生产资源确认、D1 迁移、管理员初始化或加密 Secret 脚本,也不会读取生产使用的 CLOUDFLARE_ACCOUNT_ID 与 CLOUDFLARE_API_TOKEN。
