R2/S3 管理面板 - Nth2Miss博客

Nth2Miss

公告

欢迎来到我的博客！这是一则示例公告。

了解更多

774 字

4 分钟

R2/S3 管理面板

2026-02-03

使用指南

工具

/

网站

一个基于 Cloudflare Pages + Hono 构建的轻量级 R2/S3 兼容对象存储管理面板。

无需服务器，免费部署，支持 Cloudflare R2, AWS S3, Aliyun OSS, MinIO 等任意 S3 兼容存储。

演示截图 • 功能特性 • 部署指南 • 本地开发

📸 演示截图#

网格视图	列表视图

设置面板

✨ 功能特性#

⚡️ 极速部署：基于 Cloudflare Pages Functions，利用全球边缘节点加速，无需购买 VPS。
🔐 安全访问：内置 HTTP Basic Auth 认证，保护你的文件管理入口。
🗂 文件管理：
- 支持 列表 / 网格 视图切换。
- 支持 文件夹模拟 (S3 Prefix)。
- 支持 批量上传 (拖拽) 与批量删除。
🖼 智能压缩：
- 前端自动压缩：上传时可自动将图片转换为 WebP 格式。 节省带宽：支持设置压缩质量开关，极大节省存储费用。
🎥 媒体预览：
- CDN预览：缩略图将通过自定义域名加载，更快的预览图片。
- 视频：支持 mp4/mov/mkv 等格式在线播放 (强制 Inline 模式)。
- 音频：支持 mp3/wav 等格式在线试听。
- 图片：支持缩略图预览。
🔗 双链模式：同时显示 Worker 代理链接 和 自定义 CDN 域名链接，方便分发。
☁️ S3 兼容：完美支持 R2，也可挂载 AWS S3、阿里云 OSS、腾讯云 COS、MinIO 等。

🚀 部署指南#

1. Fork 项目仓库#

Nth2Miss

/

s3-manager

Waiting for api.github.com...

00K

0K

Waiting...

点击右上角的 Fork 按钮，将本项目克隆到你的 GitHub 账号下。

2. 创建 Cloudflare Pages 项目#

登录 Cloudflare Dashboard。
进入计算和AI -> Workers & Pages -> 创建应用程序 -> Pages -> 导入现有 Git 存储库。
选择你刚才 Fork 的仓库。

3. 构建配置#

在 Build settings 中填写：

框架预设: 无
构建命令: npm install
构建输出目录: public

4. 设置环境变量 (Environment Variables)#

在项目创建时可以添加变量，如果项目已经创建，则在pages -> 设置 -> 构建 -> 变量与机密 中添加以下变量：

变量名	说明	示例值
`AUTH_USER`	管理后台登录用户名	`admin`
`AUTH_PASSWORD`	管理后台登录密码	`password`
`S3_ENDPOINT`	S3 接口地址 (带 https)	`https://<ID>.r2.cloudflarestorage.com`
`S3_BUCKET_NAME`	存储桶名称	`my-bucket`
`S3_ACCESS_KEY_ID`	Access Key	`AKI...`
`S3_SECRET_ACCESS_KEY`	Secret Key	`abc...`
`S3_REGION`	区域 (R2 填 auto)	`auto`
`S3_PUBLIC_DOMAIN`	(可选) 绑定的 CDN 域名	`https://cdn.example.com`

🛠 本地开发#

如果你想在本地进行修改和调试：

克隆项目

1
git clone [https://github.com/Nth2Miss/s3-manager.git](https://github.com/Nth2Miss/s3-manager.git)
2
cd s3-manager

安装依赖
```
1
npm install
```

配置本地环境 在根目录创建 .dev.vars 文件（不要提交到 GitHub），填入上述环境变量：

1
AUTH_USER=admin
2
AUTH_PASSWORD=password
3
S3_ENDPOINT=[https://xxx.r2.cloudflarestorage.com](https://xxx.r2.cloudflarestorage.com)
4
S3_BUCKET_NAME=test-bucket
5
S3_ACCESS_KEY_ID=xxx
6
S3_SECRET_ACCESS_KEY=xxx
7
S3_REGION=auto

启动本地服务器
```
1
npx wrangler pages dev public
```
访问 http://localhost:8788 即可。

📝 使用说明#

路径上传：在上传框的路径输入栏填写 folder/subfolder/，文件会自动归档到该目录下。
WebP 开关：点击右上角齿轮图标，可以开启或关闭“图片自动压缩”功能，并调整压缩质量（0.1 - 1.0）。
自定义域名：在设置中填入你的 R2/S3 绑定域名，列表中的“CDN 链接”会自动更新，无需重新部署代码。

🤝 技术栈#

Frontend: Native HTML5/JS, Tailwind CSS (CDN), Lucide Icons
Backend: Cloudflare Pages Functions, Hono, aws4fetch

📄 License#

MIT License

Lovely Keqing!