CloudPaste - 基于 Cloudflare Workers 的现代文本分享平台

CloudPaste

CloudPaste 是一个现代化的在线文本分享平台，基于 Cloudflare Workers 构建，提供 Markdown 编辑和实时预览功能。

项目结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
CloudPaste/
├── public/                # 静态资源目录
│   ├── index.html        # 主页面
│   ├── share.html        # 分享页面
│   ├── styles.css        # 样式文件
│   ├── app.js           # 主要应用逻辑
│   └── sw.js            # Service Worker
├── src/                  # 源代码目录
│   └── index.js         # Worker 入口文件
├── server/               # 服务端代码
│   ├── src/
│   │   ├── app.js       # 服务器应用
│   │   ├── routes/      # 路由处理
│   │   ├── models/      # 数据模型
│   │   └── utils/       # 工具函数
│   └── package.json     # 服务端依赖
├── components/           # 前端组件
├── wrangler.toml        # Cloudflare Workers 配置
└── package.json         # 项目依赖配置

开发心得

技术选型考虑

  1. 为什么选择 Cloudflare Workers

    • 零冷启动时间，响应速度快
    • 全球边缘网络分布，用户访问延迟低
    • 免费额度充足，适合个人项目
    • KV 存储和 R2 存储完美集成

  2. 纯原生开发的优势

    • 不依赖重型框架，加载速度快
    • 便于理解和维护
    • 减少第三方依赖
    • 更好的性能优化空间

开发过程中的经验

  1. 性能优化实践

    • 使用 Service Worker 实现离线功能
    • 实现智能的分块加载策略
    • 合理使用浏览器缓存
    • 采用 WebAssembly 优化大文本处理

  2. 安全性考虑

    • 实现 XSS 防护
    • 添加 CSRF 令牌
    • 敏感数据加密存储
    • 实现请求频率限制

  3. 用户体验改进

    • 添加友好的错误提示
    • 实现平滑的加载动画
    • 优化移动端适配
    • 支持快捷键操作

遇到的挑战和解决方案

  1. 大文本处理

    • 问题：大文本编辑卡顿
    • 解决：实现虚拟滚动和分块渲染

  2. 跨域资源访问

    • 问题：多源资源访问限制
    • 解决：合理配置 CORS 策略

  3. 数据持久化

    • 问题：Workers KV 写入限制
    • 解决：实现智能缓存策略

未来改进计划

  1. 功能扩展

    • 添加实时协作功能
    • 支持更多文件格式
    • 集成 AI 辅助写作

  2. 性能优化

    • 引入 Edge 数据库
    • 优化资源加载策略
    • 实现更智能的缓存

  3. 用户体验

    • 添加更多自定义主题
    • 优化移动端编辑体验
    • 提供更多快捷操作

使用说明

环境要求

  • Node.js >= 16
  • npm >= 7
  • Wrangler CLI (Cloudflare Workers 命令行工具)

本地开发

  1. 克隆项目并安装依赖：

    1
    2
    3
    git clone <repository-url>
    cd CloudPaste
    npm install

  2. 安装 Wrangler CLI：

    1
    npm install -g wrangler

  3. 登录到 Cloudflare：

    1
    wrangler login

  4. 本地开发运行：

    1
    npm run dev

部署方式

方式一：一键部署

使用 Cloudflare Workers 的一键部署按钮进行部署。

方式二：手动部署

  1. 构建项目：

    1
    npm run build

  2. 部署到 Cloudflare Workers：

    1
    wrangler deploy

主要功能

  1. Markdown 编辑

    • 支持完整的 Markdown 语法
    • 实时预览功能
    • 代码块语法高亮

  2. 主题系统

    • 自动跟随系统主题
    • 支持手动切换明暗主题
    • 平滑过渡动画

  3. 分享功能

    • 生成分享链接
    • 二维码分享
    • 访问次数限制
    • 内容过期时间设置

  4. 导出功能

    • PDF 导出
    • PNG 图片导出
    • 纯文本导出

  5. 数据安全

    • 自动保存
    • 云端同步
    • 数据加密存储

配置说明

主要配置项在 wrangler.toml 文件中：

1
2
3
4
5
6
7
8
9
name = "cloudpaste"
main = "src/index.js"
compatibility_date = "2023-01-01"

[vars]
ENVIRONMENT = "production"

[[kv_namespaces]]
binding = "PASTE_STORE"

可根据需要修改相关配置项，包括：

  • 环境变量设置
  • KV 存储配置
  • 自定义域名
  • 资源限制等

注意事项

  1. 确保有足够的 Cloudflare Workers 配额
  2. 定期备份重要数据
  3. 遵守相关法律法规和服务条款
  4. 建议定期更新依赖包以修复潜在安全问题