1494 字
7 分钟

CattoPic - 基于 Cloudflare 的自建图床

图床是内容创作者绑不开的话题。第三方服务或有审查顾虑,或有跑路风险,或受制于访问速度。自建图床虽然门槛稍高,却能在数据主权和使用体验之间找到平衡。CattoPic 是一个构建在 Cloudflare 生态上的图床方案,值得一试。相比之前的ImageFlow有什么好处呢?答案是扩展性更好吧,虽然没有了服务器做后端压缩,好在能利于整个cloudflare的生态。

Serverless版本项目地址:

Yuri-NagaSaki
/
CattoPic
Waiting for api.github.com...
00K
0K
0K
Waiting...

Go 版本项目地址:

Yuri-NagaSaki
/
ImageFlow
Waiting for api.github.com...
00K
0K
0K
Waiting...

CattoPic 是什么#

CattoPic 是一个自托管的图片托管服务,提供图片上传、管理和对外服务的完整功能。它的特点在于完全依托 Cloudflare 的免费服务构建后端,前端则可部署在 Vercel。

Gemini_Generated_Image

NOTE

本项目后端需要使用worker的计费计划Queues模块,请提前了解相关计费规则。

核心功能包括:

  • 多格式图片上传,支持 JPEG、PNG、GIF、WebP、AVIF
  • 上传后自动转换为 WebP 和 AVIF 格式,节省存储和带宽
  • 标签系统,便于图片分类管理
  • 图片过期时间设置,支持临时图片
  • 公开的随机图片 API,可用于博客背景或其他场景
  • 横竖屏自动识别,API 可按方向筛选

技术架构#

CattoPic 的技术选型颇为现代:

前端

  • Next.js 16 配合 React 19
  • Tailwind CSS 处理样式

后端

  • Cloudflare Workers 作为计算层,使用 Hono 框架构建 API
  • Cloudflare D1 作为数据库,存储图片元数据和配置
  • Cloudflare R2 作为对象存储,存放图片文件
  • Cloudflare KV 用于缓存
  • Cloudflare Queues 处理异步任务(需付费才能使用)
  • Cron Triggers 定时清理过期图片

整套后端服务运行在 Cloudflare 的边缘网络上,响应速度和稳定性都有保障。

部署指南#

部署 CattoPic 需要两个步骤:配置 Cloudflare 后端服务,以及部署前端应用。

前置准备#

  • 一个 Cloudflare 账号
  • 一个 Vercel 账号(用于前端部署)
  • 本地安装 Node.js 和 pnpm
  • 安装 Wrangler CLI:pnpm add -g wrangler

后端部署#

首先登录 Wrangler:

Terminal window
wrangler login

创建所需的 Cloudflare 资源:

Terminal window
# 创建 R2 存储桶
wrangler r2 bucket create cattopic-r2 --location=apac
# 创建 D1 数据库
wrangler d1 create CattoPic-D1 --location=apac
# 创建 KV 命名空间
wrangler kv namespace create CACHE_KV
# 创建消息队列
wrangler queues create cattopic-delete-queue

记录上述命令返回的 ID,更新 worker/wrangler.toml 配置文件:

name = 'cattopic-worker'
main = 'src/index.ts'
compatibility_date = '2025-12-10'
compatibility_flags = ['nodejs_compat']
[vars]
ENVIRONMENT = 'production'
R2_PUBLIC_URL = 'https://your-r2-domain.com' # 你的 R2 公开访问域名
[images]
binding = "IMAGES"
[[r2_buckets]]
binding = 'R2_BUCKET'
bucket_name = 'cattopic-r2' # 你创建的 R2 bucket 名称
[[d1_databases]]
binding = 'DB'
database_name = 'CattoPic-D1'
database_id = 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx' # 替换为你的 D1 database_id
[[kv_namespaces]]
binding = "CACHE_KV"
id = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" # 替换为你的 KV namespace id
[[queues.producers]]
queue = "cattopic-delete-queue"
binding = "DELETE_QUEUE"
[[queues.consumers]]
queue = "cattopic-delete-queue"
max_batch_size = 10
max_batch_timeout = 5
[triggers]
crons = ['0 * * * *'] # 每小时清理过期图片

初始化数据库:

Terminal window
cd worker
wrangler d1 execute CattoPic-D1 --remote --file=schema.sql

部署 Worker:

Terminal window
wrangler deploy

部署完成后会得到一个 Worker URL,形如 https://cattopic-worker.your-account.workers.dev

创建 API 密钥#

通过 D1 控制台或 Wrangler 执行 SQL 创建 API 密钥:

pnpm wrangler d1 execute CattoPic-D1 --remote --command "
INSERT INTO api_keys (key, created_at) VALUES ('your-api-key-here', datetime('now'));
"

前端部署#

Fork 项目仓库到你的 GitHub 账号,在 Vercel 中导入该项目。

配置环境变量:

NEXT_PUBLIC_API_URL=你的Worker地址
NEXT_PUBLIC_REMOTE_PATTERNS=你的R2公开访问域名,你的Worker地址

部署完成后访问前端地址,使用 API 密钥登录即可开始使用。

更详细的文档见项目readme。

项目预览#

image-20251211150620562

image-20251211150513765

image-20251211143535339

image-20251211143623432

image-20251211143652532

image-20251211143734939

image-20251211143804592

R2 公开访问配置#

R2 存储桶需要配置公开访问才能让图片被外部访问。在 Cloudflare 控制台进入 R2 设置,绑定自定义域名或启用公开访问,记录得到的公开 URL。

主要优势#

成本优势

Cloudflare 的免费额度相当慷慨:

  • Workers:每天 10 万次请求
  • D1:5GB 存储,500 万行读取
  • R2:10GB 存储,100 万次 A 类操作,1000 万次 B 类操作
  • KV:每天 10 万次读取

对于个人博客或中小站点,这些额度足够日常使用。

性能优势

借助 Cloudflare 的全球边缘网络,图片访问延迟低。自动格式转换功能会生成 WebP 和 AVIF 版本,现代浏览器可获得更小的文件体积和更快的加载速度。

数据自主

图片存储在你自己的 R2 存储桶中,数据完全由你掌控。不必担心第三方服务商的内容审查或服务终止。

功能完备

管理后台支持拖拽上传、粘贴上传、批量操作。标签系统和过期时间功能让图片管理更加灵活。随机图片 API 是一个实用的附加功能。

当前限制#

CattoPic 目前存在一些使用限制,在部署前需要了解:

文件大小限制

前端上传组件限制单个文件不超过 20MB。我在后端写死了这一数值,因为cloudflare无法处理10mb以上的图片转换,同时过大的图片也会导致超时。后续可能考虑看看有没有其他方案改进。我也会时刻关注worker的更新进度。

GIF 处理

GIF 文件会保留原格式存储,不会转换为 WebP 或 AVIF。这是考虑到动态图片转换的复杂性做出的选择。

总结#

CattoPic 提供了一个基于 Cloudflare 生态的图床方案。它利用 Cloudflare 的免费服务层构建了一套功能完整的图片托管系统,适合对数据主权有要求、希望控制成本的用户。部署过程需要一定的技术基础,但文档较为完善。20MB 的上传限制对于网页图片来说通常够用,如有需要也可以通过修改代码调整。

如果你正在寻找一个可控、低成本、性能不错的图床方案,CattoPic 值得考虑。

CattoPic - 基于 Cloudflare 的自建图床
https://catcat.blog/2025/12/cattopic-self-hosted-image-hosting.html
作者
猫猫博客
发布于
2025-12-11
许可协议
CC BY-NC-SA 4.0