折腾笔记

基于 Cloudflare 搭建支持拖拽上传的云端原型中枢（进阶篇）

借助 Cloudflare（Pages + Workers + R2 + KV），将 HTMLhub 升级为多端同步的云端原型资产中枢。

#Cloudflare #Workers #R2存储 #AI工具 #原型设计 #开源项目 #HTMLhub #架构设计

服务器月租打到 0 元：基于 Cloudflare 搭建支持拖拽上传的云端原型中枢（进阶篇）

作者 ：野生宝藏箱
前置文章 ：《别让 AI 原型在下载夹吃灰了！手把手教你 3 分钟零成本打造专属在线原型工坊（基础篇）》
开源地址 ：https://github.com/zaneven/HTMLhub
核心标签 ：Cloudflare / Workers / R2 / AI原型 / 无服务器架构
一句话简介 ：免除云主机租金，利用 Cloudflare 基础组件，搭建支持多端拖拽上传与密码保护的在线原型资产中枢。

00. 序幕：从本地静态收纳到云端协同

在基础篇中，我们通过开源的 HTMLhub，在本地搭建了纯静态的 AI 原型管理库。

纯静态模式适合单机管理与本地聚合展示，但在多设备与团队协同场景下存在明显局限：

  • 用手机或平板临时查看时，必须依赖已完成静态构建的页面；
  • 换了设备，或者团队其他成员想要上传新原型，都需要重复走一遍“拉取代码、放置文件、运行扫描脚本、打包重新部署”的流程；
  • 缺乏直观的在线上传通道，团队成员之间往往退回到互发 ZIP 压缩包的状态，遇到手机端甚至无法正常解压预览。

如果能像网盘一样直接在网页端拖拽上传，并保持手机端实时同步，原型的流转效率会大幅提升。

本文是进阶篇，介绍如何利用 Cloudflare 的无服务器架构，将 HTMLhub 升级为支持密码保护与在线拖拽上传的云端协同平台。

01. 为什么选择 Cloudflare 无服务器方案？

搭建常规的文件上传与管理后台，通常需要以下成本：

  • 租赁云主机（按月产生固定费用）；
  • 搭建 Node 或 Python 运行时，配置 Nginx 反向代理；
  • 维护数据库并挂载对象存储；
  • 承担对象存储的外网下行流量账单。

改用 Cloudflare 的无服务器组合，可以避开这些运维开销与流量顾虑：

组件对应职责免费额度范围
Cloudflare Pages托管前端界面，全球 CDN 分发不限请求数与流量，永久免费
Cloudflare Workers边缘计算 API，处理鉴权与上传逻辑每日 100,000 次请求，无冷启动开销
Cloudflare R2存放 HTML、CSS、JS 与图片等静态资产每月 10 GB 存储空间，免收数据传出流量费
Cloudflare KV边缘分布式缓存，存储项目索引数据每日 100,000 次读取

这套组合消除了常驻服务器租金，R2 的免出口流量费机制也避免了突发访问带来的带宽账单，适合作为轻量级原型中枢的基础设施。

02. 架构设计：轻量实用的云端机制

在 HTMLhub 的云端扩展设计中，主要遵循了三项工程原则：

  1. 单密码安全认证
    对于团队内部或个人原型库，常规的用户注册、短信验证码和多角色权限体系维护成本过高。HTMLhub 采用单管理员密码机制，密码通过加密环境变量保存在 Workers 密钥库中，无需建用户表，通过命令行即可秒级轮换。

  2. 整站目录与多文件拖拽
    AI 生成的原型常常不仅是单个 HTML 文件，往往包含引用的相对路径 CSS、JS 以及多张切图。HTMLhub 支持单文件选择、多文件组合以及直接拖入整个文件夹。上传时自动保持相对路径层级，并默认将 index.html 识别为主入口。

  3. 双通道混排共存
    配置云端 API 后，系统会自动聚合两类数据源：

    • 本地静态项目：标记为 本地静态 (只读)，提供安全保护与只读文件树，避免在线误删核心本地文件；
    • 云端项目：标记为 云端 R2，支持在线追加文件、覆盖新版本与在线删除。

03. 落地步骤：10 分钟完成全功能部署

部署过程无需配置服务器系统环境，按照以下四个步骤操作即可完成。

准备工作

  1. 注册并登录 Cloudflare 账号；
  2. 本地具备 Node.js 开发环境。

第一步：安装 Wrangler 命令行并登录

在本地终端执行：

npm install -g wrangler
wrangler login

终端会自动拉起浏览器授权窗口，点击确认完成凭证绑定。

第二步：创建云端存储与缓存资源

在终端中依次执行以下两条命令：

1. 创建 R2 对象存储桶（存放原型资产）

wrangler r2 bucket create htmlhub-files

2. 创建 KV 缓存命名空间（存放项目索引）

wrangler kv namespace create FILE_INDEX

执行后终端会输出类似配置块：

[[kv_namespaces]]
binding = "FILE_INDEX"
id = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"

记下该 id 字符串，打开项目目录下的 workers/wrangler.toml 文件，将其填入对应字段：

[[kv_namespaces]]
binding = "FILE_INDEX"
id = "你的KV_NAMESPACE_ID"

第三步：配置管理密码并部署后端 Worker

进入项目的 workers 目录：

cd workers

1. 设置管理员密码

执行以下命令，终端会提示输入密码（该密码用于登录管理后台）：

npx wrangler secret put ADMIN_PASSWORD

密码通过加密保存在 Cloudflare 密钥库中，不会进入代码仓库。

2. 部署后端服务

npx wrangler deploy

部署完成后，终端会输出对应的 API 地址，形如：
https://htmlhub-api.<你的账号前缀>.workers.dev

第四步：前端绑定 API 并发布至 Cloudflare Pages

返回项目根目录：

cd ..

1. 本地联调验证

复制环境变量模板：

cp .env.example .env

编辑 .env 文件，填入第三步获得的 Worker API 地址：

VITE_API_URL=https://htmlhub-api.<你的账号前缀>.workers.dev

执行 npm run dev 启动本地服务，页面右上角将出现登录按钮。输入设定的管理密码后，即可测试上传功能。

HTMLhub 单密码登录界面 ▲ 图：HTMLhub 单密码认证界面

2. 部署至 Cloudflare Pages

  1. 将前端代码推送至 GitHub；
  2. 在 Cloudflare 控制台进入 Workers & Pages -> Create application -> Pages -> Connect to Git；
  3. 选择对应的 HTMLhub 仓库，构建参数配置如下：
    • Framework preset：Vue
    • Build command：npm run build
    • Build output directory：dist
  4. 在 Environment variables 中添加一条变量：
    • 变量名：VITE_API_URL
    • 变量值：https://htmlhub-api.<你的账号前缀>.workers.dev
  5. 点击 Save and Deploy 完成发布。

部署完成后即可获得全球 CDN 访问地址（例如 https://your-hub.pages.dev），支持随时绑定自定义域名。

04. 实测效果：多端原型管理与协同

配置完成后，任何设备均可直接参与协同：

  1. 浏览器直接拖拽上传
    点击右上角 上传项目，支持拖拽单个或多个文件，也可切换至“整站目录”模式拖入完整文件夹。系统会自动解析目录结构并寻找 index.html。

HTMLhub 拖拽上传交互界面 ▲ 图：拖拽上传交互区域

  1. 多端直达，消除压缩包
    直接向协作者分享对应项目链接，对方在手机或电脑浏览器中打开即可查看交互效果，并能在手机、平板与桌面三种视口比例间快速切换。

Studio 移动端手机视口交互预览 ▲ 图：Studio 移动端手机视口真实渲染预览

  1. 版本迭代与维护
    修改原型后重新上传同名项目即可实现版本覆盖；废弃项目可在后台直接删除，云端 R2 文件与 KV 索引将联动清理。

05. 结语

使用大语言模型生成页面代码已经成为常态，如何规范地收纳、在线预览与协同分享这些原型，成为新的工程痛点。

通过 HTMLhub 与 Cloudflare 的无服务器架构组合：

  • 免去云主机租金与流量开销；
  • 完成了从本地单机浏览到云端协同中枢的过渡；
  • 避免了原型零散分布与频繁解压文件的低效沟通。

相关代码已开源，欢迎体验与交流：
项目仓库：https://github.com/zaneven/HTMLhub