本文档将指导您如何通过 Cloudflare 的网页管理后台 (Dashboard) 部署 Excalidraw 后端服务。
该 Worker 使用 Cloudflare 的 Durable Objects 来持久化存储画布数据，为您提供一个高性能、可扩展的 Excalidraw 后端服务。
我们提供两种通过 Cloudflare Dashboard 部署的方法：
- 通过 Git 仓库部署 (推荐): 设置一次后，每当您更新代码到 Git 仓库时，Cloudflare 都会自动为您部署最新版本。这是实现 CI/CD 的最佳实践。
- 手动复制粘贴代码: 简单快速，适合一次性测试或不希望关联 Git 仓库的场景。每次更新都需要手动操作。
此方法将您的 GitHub 仓库与 Cloudflare 直接关联。
- 登录您的 GitHub 账户。
- 访问
excalidraw-complete项目仓库，并点击右上角的 Fork 按钮，将项目复刻到您自己的账户下。
- 登录到您的 Cloudflare Dashboard。
- 在左侧导航栏中，选择 Workers & Pages。
- 点击 Create application，然后切换到 Pages 标签页，并点击 Connect to Git。
- 选择您刚刚 Fork 的项目仓库，并点击 Begin setup。
- Project name: 为您的项目取一个名字。
- Production branch: 选择
main或者您 Fork 后的主分支。 - Build settings:
- Framework preset: 设置为
None。 - Build command: 留空。
- Build output directory: 留空。
- Root Directory: 点击
(Advanced)展开，设置为cloudflare-worker。 这一步至关重要，它告诉 Cloudflare 只部署该子目录下的 Worker。
- Framework preset: 设置为
- 点击 Save and Deploy。Cloudflare 会开始第一次部署。
首次部署完成后，我们需要为 Worker 添加必要的配置。
- 在项目页面，点击 Settings 标签页。
- 设置 API 密钥:
- 选择子菜单中的 Variables。
- 在 Secret Variables 部分，点击 Add secret variable。
- Variable name:
API_TOKEN - Value: 输入一个您自己创建的、足够复杂的安全密钥。请务必保存好这个值，前端配置时需要用到。
- 点击 Save。
为了让刚才的配置生效，需要触发一次新的部署。
- 返回到项目的 Deployments 标签页。
- 找到最新的那条部署记录，点击右侧的 ... 菜单，选择 Retry deployment。
部署成功后，在项目主页即可找到您的 Worker 访问 URL。
此方法无需关联 Git 仓库，但每次更新代码都需要手动操作。
- 首先，将本项目克隆到您的本地电脑，以便获取 Worker 的源代码。
git clone https://github.com/your-username/excalidraw-complete.git # 注意：请将 a-username/excalidraw-complete.git 替换为实际的项目仓库地址 - 在您的电脑上找到并打开
cloudflare-worker/index.js文件，将其中的所有代码复制到剪贴板。我们稍后会用到它。
- 登录到您的 Cloudflare Dashboard。
- 在左侧导航栏中，选择 Workers & Pages。
- 点击 Create application，然后选择 Create Worker。
- 为您的 Worker 指定一个唯一的名称（例如
my-excalidraw-backend），然后点击 Deploy。
- 创建成功后，您会进入 Worker 的管理页面。点击 Edit code。
- 在打开的代码编辑器中，删除所有的默认 "Hello World" 代码。
- 将您在 第一步 中从
index.js文件复制的代码，完整地粘贴到编辑器中。 - 点击编辑器右上角的 Save and Deploy 按钮。
- 返回到您的 Worker 管理页面 (如果当前在代码编辑器，可以点击左上角 Worker 名称返回)。
- 选择 Settings 标签页，然后点击子菜单中的 Variables。
- 在 Secret Variables 部分，点击 Add secret variable。
- 按如下方式填写：
- Variable name:
API_TOKEN - Value: 输入一个您自己创建的、足够复杂的安全密钥（例如，可以使用密码生成器创建一个长随机字符串）。请务必保存好这个值，前端配置时需要用到。
- Variable name:
- 点击 Save。
这是最关键的一步，它让您的 Worker 能够保存数据。
- 在 Worker 的 Settings 标签页，点击子菜单中的 Durable Objects。
- 点击 Add binding。
- 按如下方式创建第一个绑定：
- Binding name:
CANVAS_OBJECT - Durable Object class name:
CanvasObject
- Binding name:
- 再次点击 Add binding。
- 按如下方式创建第二个绑定：
- Binding name:
INDEX_OBJECT - Durable Object class name:
IndexObject
- Binding name:
- 完成后，页面上应该有两个 Durable Object 绑定。设置会自动保存。
设置完变量和存储后，建议返回代码编辑器，再次点击 Save and Deploy，以确保所有配置都已生效。
部署成功后，在 Worker 的主页面可以找到您的 Worker 的访问URL，格式为 https://<your-worker-name>.<your-subdomain>.workers.dev。
现在，将您部署好的后端服务配置到 Excalidraw 前端：
- 打开 Excalidraw 应用。
- 进入设置或数据源配置界面。
- 选择 "Cloudflare KV" 作为存储类型。
- API 地址: 填入您在第六步获取的 Worker URL。
- API 令牌: 填入您在第四步中设置的
API_TOKEN值。 - 保存配置。
恭喜！您的 Excalidraw 应用现在拥有了一个完全由您掌控、基于 Cloudflare 的强大后端。