mirror of
https://github.com/Dvorinka/excalidraw-full.git
synced 2026-06-03 22:02:57 +00:00
fix: convert cf-kv and excalidraw-libraries from submodules to regular files
- Remove stale cloudflare-worker submodule entry from .gitmodules - Remove .git dirs from cf-kv and excalidraw-libraries so Git tracks them as regular files - Fixes 'No url found for submodule path cf-kv' CI error
This commit is contained in:
Tomas Dvorak
+137
@@ -0,0 +1,137 @@
|
||||
# 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](https://dash.cloudflare.com/)。
|
||||
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 的源代码。
|
||||
```bash
|
||||
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](https://dash.cloudflare.com/)。
|
||||
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 的强大后端。
|
||||
Reference in New Issue
Block a user