Excalidraw/cf-kv

Excalidraw Cloudflare Worker 部署指南 (Dashboard 版)

本文档将指导您如何通过 Cloudflare 的网页管理后台 (Dashboard) 部署 Excalidraw 后端服务。

该 Worker 使用 Cloudflare 的 Durable Objects 来持久化存储画布数据，为您提供一个高性能、可扩展的 Excalidraw 后端服务。

部署方法概述

我们提供两种通过 Cloudflare Dashboard 部署的方法：

1. 通过 Git 仓库部署 (推荐): 设置一次后，每当您更新代码到 Git 仓库时，Cloudflare 都会自动为您部署最新版本。这是实现 CI/CD 的最佳实践。
2. 手动复制粘贴代码: 简单快速，适合一次性测试或不希望关联 Git 仓库的场景。每次更新都需要手动操作。

---

方法一：通过 Git 仓库部署 (推荐)

此方法将您的 GitHub 仓库与 Cloudflare 直接关联。

第一步：Fork 仓库

1. 登录您的 GitHub 账户。
2. 访问 excalidraw-complete 项目仓库，并点击右上角的 Fork 按钮，将项目复刻到您自己的账户下。

第二步：在 Cloudflare 中创建并连接应用

1. 登录到您的 Cloudflare Dashboard。
2. 在左侧导航栏中，选择 Workers & Pages。
3. 点击 Create application，然后切换到 Pages 标签页，并点击 Connect to Git。
4. 选择您刚刚 Fork 的项目仓库，并点击 Begin setup。

第三步：配置构建与部署

1. Project name: 为您的项目取一个名字。
2. Production branch: 选择 main 或者您 Fork 后的主分支。
3. Build settings:
   • Framework preset: 设置为 None。
   • Build command: 留空。
   • Build output directory: 留空。
   • Root Directory: 点击 (Advanced) 展开，设置为 cloudflare-worker。 这一步至关重要，它告诉 Cloudflare 只部署该子目录下的 Worker。
4. 点击 Save and Deploy。Cloudflare 会开始第一次部署。

第四步：配置 Worker 的环境变量与存储

首次部署完成后，我们需要为 Worker 添加必要的配置。

1. 在项目页面，点击 Settings 标签页。
2. 设置 API 密钥:
   • 选择子菜单中的 Variables。
   • 在 Secret Variables 部分，点击 Add secret variable。
   • Variable name: API_TOKEN
   • Value: 输入一个您自己创建的、足够复杂的安全密钥。请务必保存好这个值，前端配置时需要用到。
   • 点击 Save。

第五步：重新部署以应用配置

为了让刚才的配置生效，需要触发一次新的部署。

1. 返回到项目的 Deployments 标签页。
2. 找到最新的那条部署记录，点击右侧的 ... 菜单，选择 Retry deployment。

部署成功后，在项目主页即可找到您的 Worker 访问 URL。

---

方法二：手动复制粘贴代码

此方法无需关联 Git 仓库，但每次更新代码都需要手动操作。

第一步：获取 Worker 代码

1. 首先，将本项目克隆到您的本地电脑，以便获取 Worker 的源代码。

   git clone https://github.com/your-username/excalidraw-complete.git
   # 注意：请将 a-username/excalidraw-complete.git 替换为实际的项目仓库地址
   

2. 在您的电脑上找到并打开 cloudflare-worker/index.js 文件，将其中的所有代码复制到剪贴板。我们稍后会用到它。

第二步：在 Cloudflare Dashboard 中创建 Worker

1. 登录到您的 Cloudflare Dashboard。
2. 在左侧导航栏中，选择 Workers & Pages。
3. 点击 Create application，然后选择 Create Worker。
4. 为您的 Worker 指定一个唯一的名称（例如 my-excalidraw-backend），然后点击 Deploy。

第三步：粘贴并部署代码

1. 创建成功后，您会进入 Worker 的管理页面。点击 Edit code。
2. 在打开的代码编辑器中，删除所有的默认 "Hello World" 代码。
3. 将您在 第一步 中从 index.js 文件复制的代码，完整地粘贴到编辑器中。
4. 点击编辑器右上角的 Save and Deploy 按钮。

第四步：设置 API 密钥 (Secret Variable)

1. 返回到您的 Worker 管理页面 (如果当前在代码编辑器，可以点击左上角 Worker 名称返回)。
2. 选择 Settings 标签页，然后点击子菜单中的 Variables。
3. 在 Secret Variables 部分，点击 Add secret variable。
4. 按如下方式填写：
   • Variable name: API_TOKEN
   • Value: 输入一个您自己创建的、足够复杂的安全密钥（例如，可以使用密码生成器创建一个长随机字符串）。请务必保存好这个值，前端配置时需要用到。
5. 点击 Save。

第五步：配置持久化存储 (Durable Objects)

这是最关键的一步，它让您的 Worker 能够保存数据。

1. 在 Worker 的 Settings 标签页，点击子菜单中的 Durable Objects。
2. 点击 Add binding。
3. 按如下方式创建第一个绑定：
   • Binding name: CANVAS_OBJECT
   • Durable Object class name: CanvasObject
4. 再次点击 Add binding。
5. 按如下方式创建第二个绑定：
   • Binding name: INDEX_OBJECT
   • Durable Object class name: IndexObject
6. 完成后，页面上应该有两个 Durable Object 绑定。设置会自动保存。

第六步：最终确认

设置完变量和存储后，建议返回代码编辑器，再次点击 Save and Deploy，以确保所有配置都已生效。

部署成功后，在 Worker 的主页面可以找到您的 Worker 的访问URL，格式为 https://<your-worker-name>.<your-subdomain>.workers.dev。

---

配置 Excalidraw 前端

现在，将您部署好的后端服务配置到 Excalidraw 前端：

1. 打开 Excalidraw 应用。
2. 进入设置或数据源配置界面。
3. 选择 "Cloudflare KV" 作为存储类型。
4. API 地址: 填入您在第六步获取的 Worker URL。
5. API 令牌: 填入您在第四步中设置的 API_TOKEN 值。
6. 保存配置。

恭喜！您的 Excalidraw 应用现在拥有了一个完全由您掌控、基于 Cloudflare 的强大后端。