skip to content
久木笔记

图床部署教程（Cloudflare R2 + Worker + Pages）

/ 3 min read

图床

项目地址：

https://github.com/sindricn/ImageHost-R2

🎬 视频教程

bilibili

油管

🚧 一、Cloudflare 后端配置

  1. 开通 Cloudflare R2

登录 Cloudflare 控制台：https://dash.cloudflare.com

进入左侧「R2 对象存储」

点击「订阅」（需添加付款方式，免费额度够个人使用）

创建存储桶：

自定义名称（如：img）

地区选择靠近用户的区域（推荐默认）

创建完成

  1. 创建 Worker

进入「Workers & Pages」页面

选择「创建应用」→「默认 Worker」→ 输入名称

点击「部署应用」生成初始 Worker

在编辑页面粘贴项目中的 worker.js 代码，替换默认内容

点击「保存并部署」

  1. 绑定 R2 存储桶到 Worker

Worker 页面 → 「设置」→「绑定」→ 添加绑定资源

类型选择「R2 存储桶」

名称（环境变量名称）设置为：R2_BUCKET

存储桶选择刚刚创建的 R2 存储

点击部署，完成绑定

  1. 添加可选变量（如清单路径）

Worker 设置 → 「变量和机密」

添加变量：

变量名：LIST_PATH

变量值：如 /list（默认也是 /list）

  1. 添加自定义域名（可选）

Worker 设置 → 「域和路由」

点击「添加自定义域名」

绑定你已有的域名（如 img.nbvil.com）

若未配置，将使用默认的 xxx.workers.dev 子域名

前端需填写该地址为上传接口地址

💻 二、部署前端页面

📦 项目地址

GitHub: https://github.com/sindricn/ImageHost-R2

方法一：Fork 自动部署（推荐）

Fork 本项目到自己的 GitHub 仓库

修改 public/config.js：

window.IMG_BED_CONFIG = {
  apiBaseUrl: "https://你的-worker域名.workers.dev", // 或自定义域名
  maxFiles: 5
}

打开 Cloudflare 控制台 → 「Workers & Pages」→ 创建 Pages 应用

绑定刚才 Fork 的仓库 → 保持默认配置 → 启动部署

可选：设置自定义域名，绑定前端访问入口（如 imgview.nbvil.com）

方法二：手动上传部署

下载项目压缩包或 Clone 本仓库

修改 public/config.js 文件

在 GitHub 创建私有仓库上传项目文件

使用 Cloudflare Pages 绑定该仓库进行部署

📂 访问说明

图床首页：https://page 域名/

图片访问地址：上传成功后返回链接，如：

https:// Worker 域名/图片名

图片列表页面（LIST_PATH 默认 /list）：

https:// Worker 域名/list

转载自：Sindri