CloudPaste - 在线剪贴板 📋

基于 Cloudflare 的在线剪贴板和文件分享服务，支持 Markdown 编辑和文件上传

📸 展示 • ✨ 特点 • 🚀 部署教程 • 🔧 技术栈 • 💻 开发 • 📄 许可证

📸 展示

✨ 特点

📝 Markdown 编辑与分享

强大的编辑器：集成 Vditor，支持 GitHub 风格的 Markdown、数学公式、流程图、思维导图等
安全分享：内容可设置访问密码保护
灵活时效：支持设置内容过期时间
访问控制：可限制最大查看次数
个性化：自定义分享链接及备注
支持文本Raw直链：类似gihub的Raw直链，用于yaml配置文件来启动的服务
多格式导出：支持 PDF、Markdown、HTML、PNG图片、Word文档导出
便捷分享：一键复制分享链接和生成二维码
自动保存：支持自动保存草稿功能

📤 文件上传与管理

多存储支持：兼容多种 S3 存储服务 (Cloudflare R2、Backblaze B2、AWS S3 等)
存储配置：可视化界面配置多个存储空间，灵活切换默认存储源
高效上传：通过预签名 URL 直接上传至 S3 存储，多文件上传
实时反馈：上传进度实时显示
自定义限制：单次上传限制和最大容量限制
元数据管理：文件备注、密码、过期时间、访问限制
数据分析：文件访问统计与趋势分析
服务器直传：支持调接口进行文件上传、下载等操作

🛠 便捷的文件/文本操作

统一管理：支持文件/文本创建、删除和属性修改
在线预览：常见文档、图片和媒体文件的在线预览与直链生成
分享工具：生成短链接和二维码，便于跨平台分享
批量管理：文件/文本批量操作与显示

🔐 轻量权限管理

管理员权限控制

系统管理：全局系统设置配置
内容审核：所有用户内容的管理
存储管理：S3 存储服务的添加、编辑与删除
权限分配：API 密钥的创建与权限管理
数据分析：完整的统计数据访问

API 密钥权限控制

文本权限：创建/编辑/删除文本内容
文件权限：上传/管理/删除文件
存储权限：可选择特定的存储配置
读写分离：可设置只读或读写权限
时效控制：自定义有效期（从小时到月）
安全机制：自动失效与手动撤销功能

💫 系统功能

适配性强：响应式设计，适配移动设备和桌面
多语言：中/英文双语界面支持
视觉模式：明亮/暗黑主题切换
安全认证：基于 JWT 的管理员认证系统
离线体验：PWA 支持，可离线使用和安装到桌面

🚀 部署教程

前期准备

在开始部署前，请确保您已准备以下内容：

Cloudflare 账号（必需）
如使用 R2：开通 Cloudflare R2 服务并创建存储桶（需绑定支付方式）
如使用 Vercel：注册 Vercel 账号
其他 S3 存储服务的配置信息：
- S3_ACCESS_KEY_ID
- S3_SECRET_ACCESS_KEY
- S3_BUCKET_NAME
- S3_ENDPOINT

👉 查看完整部署教程

📑 目录

Action 自动部署
- 后端自动部署
- 前端自动部署
手动部署
- 后端手动部署
- 前端手动部署

Action 自动部署:

使用 GitHub Actions 可以实现代码推送后自动部署应用。

配置 GitHub 仓库

Fork 或克隆仓库 https://github.com/ling-drag0n/CloudPaste
进入您的 GitHub 仓库设置
转到 Settings → Secrets and variables → Actions → New Repository secrets
添加以下 Secrets：

Secret 名称	必需	用途
`CLOUDFLARE_API_TOKEN`	✅	Cloudflare API 令牌（需要 Workers、D1 和 Pages 权限）
`CLOUDFLARE_ACCOUNT_ID`	✅	Cloudflare 账户 ID
`ENCRYPTION_SECRET`	❌	用于加密敏感数据的密钥（如不提供，将自动生成）

获取 Cloudflare API 令牌

访问 Cloudflare Dashboard
创建新的 API 令牌
选择"编辑 Cloudflare Workers"模板，并添加 D1 数据库编辑权限

后端自动部署

Fork 仓库，填好密钥，然后运行工作流!!! 每当 backend 目录中的文件有更改并推送到 main 或 master 分支时，会自动触发部署。工作流程如下：

自动创建 D1 数据库（如果不存在）
用 schema.sql 初始化数据库（创建表和初始数据）
设置 ENCRYPTION_SECRET 环境变量（从 GitHub Secrets 获取或自动生成）
自动部署 Worker 到 Cloudflare
建议设置自定义域名代替 Cloudflare 原本提供的域名(否则国内无法访问)

⚠️ 记住你的后端域名

前端自动部署

Cloudflare Pages(推荐)

Fork 仓库，填好密钥，然后运行工作流每当 frontend 目录中的文件有更改并推送到 main 或 master 分支时，会自动触发部署。部署后需在 Cloudflare Pages 控制面板设置环境变量：

登录 Cloudflare Dashboard
导航到 Pages → 您的项目（如 "cloudpaste-frontend"）
点击 "Settings" → "Environment variables"
添加环境变量：
- 名称：VITE_BACKEND_URL
- 值：刚刚部署的后端 Worker URL（如 https://cloudpaste-backend.your-username.workers.dev），末尾不带"/", 同时建议使用自定义的 worker 后端域名。
- 一定要完整的填写后端域名,"https://xxxx.com" 格式
重要步骤：随后要再次运行一遍前端的工作流，以便完成后端域名加载！！！

务必严格按照步骤操作，否则会出现后端域名加载失败

Vercel

Vercel 建议使用以下方式部署：

Fork 后导入 GitHub 项目
配置部署参数：

Framework Preset（框架预设）: Vite
Build Command（构建命令）: npm run build
Output Directory（输出目录）: dist
Install Command（安装命令）: npm install

在下面配置环境变量：输入：VITE_BACKEND_URL 和你的后端域名
点击 "Deploy" 按钮进行部署

☝️ 以上二选一即可

手动部署:

后端手动部署

克隆仓库

git clone https://github.com/ling-drag0n/CloudPaste.git
cd CloudPaste/backend

安装依赖
```
npm install
```
登录 Cloudflare
```
npx wrangler login
```
创建 D1 数据库
```
npx wrangler d1 create cloudpaste-db
```
记下输出的数据库 ID。

修改 wrangler.toml 配置

[[d1_databases]]
binding = "DB"
database_name = "cloudpaste-db"
database_id = "您的数据库ID"

部署 Worker
```
npx wrangler deploy
```
记下输出的 URL，这是您的后端 API 地址。
初始化数据库（自动）访问您的 Worker URL 触发初始化：
```
https://cloudpaste-backend.your-username.workers.dev
```

⚠️ 安全提示：请在系统初始化后立即修改默认管理员密码（用户名: admin, 密码: admin123）。

前端手动部署

Cloudflare Pages

准备前端代码
```
cd CloudPaste/frontend
npm install
```

配置环境变量创建或修改 .env.production 文件：

VITE_BACKEND_URL=https://cloudpaste-backend.your-username.workers.dev
VITE_APP_ENV=production
VITE_ENABLE_DEVTOOLS=false

构建前端项目
```
npm run build
```
部署到 Cloudflare Pages

方法一：通过 Wrangler CLI
```
npx wrangler pages deploy dist --project-name=cloudpaste-frontend
```
方法二：通过 Cloudflare Dashboard
1. 登录 Cloudflare Dashboard
2. 选择 "Pages"
3. 点击 "Create a project" → "Direct Upload"
4. 上传 dist 目录内的文件
5. 设置项目名称（如 "cloudpaste-frontend"）
6. 点击 "Save and Deploy"

Vercel

准备前端代码
```
cd CloudPaste/frontend
npm install
```
安装并登录 Vercel CLI
```
npm install -g vercel
vercel login
```
配置环境变量，与 Cloudflare Pages 相同
构建并部署
```
vercel --prod
```
根据提示配置项目。

👉 Docker部署教程

📑 目录

Docker 命令行部署
- 后端 Docker 部署
- 前端 Docker 部署
Docker Compose 一键部署

Docker 命令行部署:

后端 Docker 部署

CloudPaste 后端支持通过官方 Docker 镜像快速部署。

创建数据存储目录
```
mkdir -p sql_data
```

运行后端容器

docker run -d --name cloudpaste-backend \
  -p 8787:8787 \
  -v $(pwd)/sql_data:/data \
  -e ENCRYPTION_SECRET=您的加密密钥 \
  -e NODE_ENV=production \
  -e RUNTIME_ENV=docker \
  dragon730/cloudpaste-backend:latest

记下部署的 URL（如 http://your-server-ip:8787），后续前端部署需要用到。

⚠️ 安全提示：请务必自定义 ENCRYPTION_SECRET 并保存好，此密钥用于加密敏感数据。

前端 Docker 部署

前端使用 Nginx 提供服务，并在启动时配置后端 API 地址。

docker run -d --name cloudpaste-frontend \
  -p 80:80 \
  -e BACKEND_URL=http://your-server-ip:8787 \
  dragon730/cloudpaste-frontend:latest

⚠️ 注意：BACKEND_URL 必须包含完整 URL（包括协议 http:// 或 https://） ⚠️ 安全提示：请在系统初始化后立即修改默认管理员密码（用户名: admin, 密码: admin123）。

Docker 镜像更新

当项目发布新版本时，您可以按以下步骤更新 Docker 部署：

拉取最新镜像

docker pull dragon730/cloudpaste-backend:latest
docker pull dragon730/cloudpaste-frontend:latest

停止并移除旧容器

docker stop cloudpaste-backend cloudpaste-frontend
docker rm cloudpaste-backend cloudpaste-frontend

使用上述相同的运行命令启动新容器（保留数据目录和配置）

Docker-Compose 一键部署:

使用 Docker Compose 可以一键部署前后端服务，是最简单推荐的方式。

创建 docker-compose.yml 文件

version: "3.8"

services:
   frontend:
      image: dragon730/cloudpaste-frontend:latest
      environment:
         - BACKEND_URL=https://xxx.com # 填写后端服务地址
      ports:
         - "8080:80" #"127.0.0.1:8080:80"
      depends_on:
         - backend # 依赖backend服务
      networks:
         - cloudpaste-network
      restart: unless-stopped

   backend:
      image: dragon730/cloudpaste-backend:latest
      environment:
         - NODE_ENV=production
         - RUNTIME_ENV=docker
         - PORT=8787
         - ENCRYPTION_SECRET=自定义密钥 # 请修改为您自己的安全密钥
      volumes:
         - ./sql_data:/data # 数据持久化
      ports:
         - "8787:8787" #"127.0.0.1:8787:8787"
      networks:
         - cloudpaste-network
      restart: unless-stopped

networks:
   cloudpaste-network:
      driver: bridge

启动服务

docker-compose up -d

⚠️ 安全提示：请在系统初始化后立即修改默认管理员密码（用户名: admin, 密码: admin123）。

访问服务

前端: http://your-server-ip:80 后端: http://your-server-ip:8787

Docker Compose 更新

当需要更新到新版本时：

拉取最新镜像
```
docker-compose pull
```
使用新镜像重新创建容器（保留数据卷）
```
docker-compose up -d --force-recreate
```

💡 提示：如果遇到配置变更，可能需要备份数据后修改 docker-compose.yml 文件

Nginx 反代示例

server {
    listen 443 ssl;
    server_name paste.yourdomain.com;  # 替换为您的域名

    # SSL 证书配置
    ssl_certificate     /path/to/cert.pem;  # 替换为证书路径
    ssl_certificate_key /path/to/key.pem;   # 替换为密钥路径

    # 前端代理配置
    location / {
        proxy_pass http://localhost:80;  # Docker前端服务地址
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }

    # 后端API代理配置
    location /api/ {
        proxy_pass http://localhost:8787;  # Docker后端服务地址
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;

        # WebSocket支持 (如果需要)
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}

⚠️ 安全提示：建议配置 HTTPS 和反向代理（如 Nginx）以提升安全性。

👉 S3相关跨域配置教程

R2 API 相关获取及跨域配置

登录 Cloudflare Dashboard
点击 R2 存储，创建一个存储桶。
创建 API 令牌
创建后把全部数据都保存好，后续要用
配置跨域规则，点击对应存储桶，点击设置，编辑 CORS 策略，如下所示：

[
   {
      "AllowedOrigins": ["http://localhost:3000", "https://根据自己的前端域名来替代"],
      "AllowedMethods": ["GET", "PUT", "POST", "DELETE", "HEAD"],
      "AllowedHeaders": ["*"],
      "ExposeHeaders": ["ETag"],
      "MaxAgeSeconds": 3600
   }
]

B2 API 相关获取及跨域配置

若没有 B2 账号，可以先注册一个，然后创建一个存储桶。
点击侧边栏的 Application Key，点击 Create Key，然后如图所示。
配置 B2 的跨域，B2 跨域配置比较麻烦，需注意
可以先尝试一下 1 或 2，去到上传页面看看是否能上传，F12 打开控制台若显示跨域错误，则使用 3。要一劳永逸就直接使用 3。

关于 3 的配置由于面板无法配置，只能手动配置，需下载 B2 CLI对应工具。具体可以参考："https://docs.cloudreve.org/use/policy/s3#backblaze-b2 " 。

下载后，在对应下载目录 cmd，在命令行输入以下命令：

b2.exe account authorize   //进行账号登录，根据提示填入之前的 keyID 和 applicationKey
b2.exe bucket get <bucketName> //你可以执行获取bucket信息，<bucketName>换成桶名字

这里由于我是 windows 配置所以在对应 cli 的 exe 文件夹中 cmd 输入，python 的 cli 也同理：

b2.exe bucket update <bucketName> allPrivate --cors-rules "[{\"corsRuleName\":\"CloudPaste\",\"allowedOrigins\":[\"*\"],\"allowedHeaders\":[\"*\"],\"allowedOperations\":[\"b2_upload_file\",\"b2_download_file_by_name\",\"b2_download_file_by_id\",\"s3_head\",\"s3_get\",\"s3_put\",\"s3_post\",\"s3_delete\"],\"exposeHeaders\":[\"Etag\",\"content-length\",\"content-type\",\"x-bz-content-sha1\"],\"maxAgeSeconds\":3600}]"

其中换成你的存储桶名字，关于允许跨域的域名 allowedOrigins 可以根据个人配置，这里是允许所有。

已完成跨域配置

🔧 技术栈

前端

框架: Vue.js 3 + Vite
样式: TailwindCSS
编辑器: Vditor
国际化: Vue-i18n
图表: Chart.js + Vue-chartjs

后端

运行时: Cloudflare Workers
框架: Hono
数据库: Cloudflare D1 (SQLite)
存储: 多 S3 兼容服务 (支持 R2, B2, AWS S3)
认证: JWT 令牌 + API 密钥

💻 开发

API 文档

服务器文件直传 API 文档 - 服务器文件直传接口详细说明

本地开发设置

克隆项目仓库

git clone https://github.com/ling-drag0n/cloudpaste.git
cd cloudpaste

后端设置

cd backend
npm install
# 初始化 D1 数据库
wrangler d1 create cloudpaste-db
wrangler d1 execute cloudpaste-db --file=./schema.sql

前端设置
```
cd frontend
npm install
```
配置环境变量
- 在 backend 目录下，创建 wrangler.toml 文件设置开发环境变量
- 在 frontend 目录下，配置 .env.development 文件设置前端环境变量

启动开发服务器

# 后端
cd backend
npm run dev

# 前端 (另一个终端)
cd frontend
npm run dev

项目结构

CloudPaste/
├── frontend/                # 前端 Vue.js 应用
│   ├── src/                 # 源代码
│   │   ├── components/      # Vue 组件
│   │   ├── api/             # API 客户端和服务
│   │   ├── i18n/            # 国际化资源文件
│   │   ├── utils/           # 工具函数
│   │   └── assets/          # 静态资源
│   └── ...
└── backend/                 # Cloudflare Workers 后端
    ├── worker.js            # 主要 Worker 文件
    ├── schema.sql           # D1 数据库模式
    └── ...

自定义 Docker 构建

如果您希望自定义 Docker 镜像或进行开发调试，可以按照以下步骤手动构建：

构建后端镜像

# 在项目根目录执行
docker build -t cloudpaste-backend:custom -f docker/backend/Dockerfile .

# 运行自定义构建的镜像
docker run -d --name cloudpaste-backend \
  -p 8787:8787 \
  -v $(pwd)/sql_data:/data \
  -e ENCRYPTION_SECRET=开发测试密钥 \
  cloudpaste-backend:custom

构建前端镜像

# 在项目根目录执行
docker build -t cloudpaste-frontend:custom -f docker/frontend/Dockerfile .

# 运行自定义构建的镜像
docker run -d --name cloudpaste-frontend \
  -p 80:80 \
  -e BACKEND_URL=http://localhost:8787 \
  cloudpaste-frontend:custom

开发环境 Docker Compose

创建 docker-compose.dev.yml 文件：

version: "3.8"

services:
  frontend:
    build:
      context: .
      dockerfile: docker/frontend/Dockerfile
    environment:
      - BACKEND_URL=http://backend:8787
    ports:
      - "80:80"
    depends_on:
      - backend

  backend:
    build:
      context: .
      dockerfile: docker/backend/Dockerfile
    environment:
      - NODE_ENV=development
      - RUNTIME_ENV=docker
      - PORT=8787
      - ENCRYPTION_SECRET=dev_secret_key
    volumes:
      - ./sql_data:/data
    ports:
      - "8787:8787"

启动开发环境：

docker-compose -f docker-compose.yml up --build

📄 许可证

Apache License 2.0

本项目使用 Apache License 2.0 许可证 - 详情请参阅 LICENSE 文件。

Star History

如果觉得项目不错希望您能给个免费的 star✨✨，非常感谢！

Name		Name	Last commit message	Last commit date
Latest commit History 68 Commits
.github/workflows		.github/workflows
.idea		.idea
backend		backend
docker		docker
frontend		frontend
images		images
.gitignore		.gitignore
Api-doc.md		Api-doc.md
Api-s3_direct.md		Api-s3_direct.md
LICENSE		LICENSE
README.md		README.md
README_EN.md		README_EN.md
docker-compose.yml		docker-compose.yml

License

ling-drag0n/CloudPaste

Folders and files

Latest commit

History

Repository files navigation

CloudPaste - 在线剪贴板 📋

基于 Cloudflare 的在线剪贴板和文件分享服务，支持 Markdown 编辑和文件上传

📸 展示

✨ 特点

📝 Markdown 编辑与分享

📤 文件上传与管理

🛠 便捷的文件/文本操作

🔐 轻量权限管理

管理员权限控制

API 密钥权限控制

💫 系统功能

🚀 部署教程

前期准备

📑 目录

Action 自动部署:

配置 GitHub 仓库

获取 Cloudflare API 令牌

后端自动部署

前端自动部署

Cloudflare Pages(推荐)

Vercel

手动部署:

后端手动部署

前端手动部署

Cloudflare Pages

Vercel

📑 目录

Docker 命令行部署:

后端 Docker 部署

前端 Docker 部署

Docker 镜像更新

Docker-Compose 一键部署:

Docker Compose 更新

Nginx 反代示例

R2 API 相关获取及跨域配置

B2 API 相关获取及跨域配置

更多 S3 相关配置待续......

🔧 技术栈

前端

后端

💻 开发

API 文档

本地开发设置

项目结构

自定义 Docker 构建

📄 许可证

Star History

About

Topics

Resources

License

Stars

Watchers

Forks

Releases 3

Packages 0

Contributors 4

Languages

Packages