Skip to content

纯前端 Demo

EdgeChat 提供一个与生产环境完全隔离的纯前端演示站:

https://edgechat-demo.gdz66601.workers.dev

演示构建继续使用正式项目的 Vue 页面、路由、状态管理、聊天组合式函数和实时消息协议,只把运行时数据源替换为浏览器内存中的模拟后端。用户可以浏览聊天前台、个人设置、管理后台、登录和邀请注册页面,也可以体验消息发送、群组管理、用户管理、邀请链接和 Telegram 消息回流。

隔离边界

项目生产环境Demo
前端页面与业务状态正式 Vue 代码复用同一套代码
API 与 WebSocketCloudflare Worker、Durable Objects浏览器内存模拟
数据D1、KV、R2页面刷新后重置
Workercfchatedgechat-demo
静态构建目录frontend/distfrontend/demo-dist
Wrangler 配置wrangler.tomlwrangler.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_ID
  • DEMO_CLOUDFLARE_API_TOKEN

工作流会运行测试、构建 frontend/demo-dist,再部署 edgechat-demo。它不调用生产资源确认、D1 迁移、管理员初始化或加密 Secret 脚本,也不会读取生产使用的 CLOUDFLARE_ACCOUNT_IDCLOUDFLARE_API_TOKEN