服务器月租打到 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 的云端扩展设计中，主要遵循了三项工程原则：

单密码安全认证
对于团队内部或个人原型库，常规的用户注册、短信验证码和多角色权限体系维护成本过高。HTMLhub 采用单管理员密码机制，密码通过加密环境变量保存在 Workers 密钥库中，无需建用户表，通过命令行即可秒级轮换。
整站目录与多文件拖拽
AI 生成的原型常常不仅是单个 HTML 文件，往往包含引用的相对路径 CSS、JS 以及多张切图。HTMLhub 支持单文件选择、多文件组合以及直接拖入整个文件夹。上传时自动保持相对路径层级，并默认将 index.html 识别为主入口。
双通道混排共存
配置云端 API 后，系统会自动聚合两类数据源：
- 本地静态项目：标记为 本地静态 (只读)，提供安全保护与只读文件树，避免在线误删核心本地文件；
- 云端项目：标记为 云端 R2，支持在线追加文件、覆盖新版本与在线删除。

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

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

准备工作

注册并登录 Cloudflare 账号；
本地具备 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

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

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

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

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

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

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

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

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

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

05. 结语

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

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

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

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