房子搭建好了（博客的架子搭建成功了），现在决定住的舒服不舒服的是水电，网络，煤气等。D1，R2，KV 就是用来保存和传输数据，在赛博世界里，数据就是水，文件就是粮。这一篇我主要讲这些产品如何运用在我的博客中
梳理需要存储的内容
我的博客主要存储内容包括以下几个方面：
- 相册：这里主要用作图片展示，对图片要求比较高，原图支持HDR
- 文章配图：
- 风景，游记内容：这样的文章图片要用原图，无压缩的比较好
- 技术文章：主要用来展示，阐述一些原理，让人理解，没有必要用原图
- 文章内容：文章内容全是文字，虽然看着文章长，但是存储的内容体积好几篇文章都抵不上一张图片
- 标签：比如文章类型，文章标题，这些比较碎的内容
接下来用cloudflare对应的产品进行搭配
图片内容存储——R2（媒体内容，大文件内容存储）
| 存储内容 | 为什么选 R2？ | 暴躁实战秘籍 |
|---|---|---|
| 相册原图 (支持HDR) | HDR 原图体积巨大，动辄几十 MB。存传统服务器，光是外链流量费就能让我破产。 | 0 出口流量费 (No Egress Fees)。这意味着无论多少人来看我的 HDR 大图，我都不用付一分钱流量费。我只需要付极低的存储费（前 10GB 免费）。 |
| 风景/游记文章配图 (无压缩) | 既然是游记，图片质量决定了阅读体验，绝不能压缩。 | 同上。利用 R2 的高性能全球 CDN，原图加载速度极快，体验拉满。 |
| 技术文章配图 (展示原理) | 这类图片不需要太高清晰度，只要能看清原理解释即可。 | 虽然不追求高质量，但它们数量多、碎片化。统一扔 R2，管理方便，且不占用数据库空间。我通常会在上传前用工具简单压一下体积。 |
额，这里我要说一嘴：之前用过阿里云的对象存储和腾讯的对象存储，但是访问的人多了，流量费用不够了，如果遇到恶意刷你流量，估计几天一套房就没了，如果你账户钱够的话，0出口流量费
自带图片处理
- 传统服务器和图床：一张图片创建三张，缩略图，小图，中图，原图，需要空间开销
- Cloudflare R2：可以搭配cloudflare images，传入参数，返回对应大小图片，无需额外空间开销
文章存储——KV（键值对数据库）
文章存储，其实特别单一，就是一篇文本，和一个外部的编号，别人读取整个编号 KV 数据库中里面找到这个编号，扔给你一整篇文章
| 存储内容 | 为什么选 KV？ | 暴躁实战秘籍（性能与成本） |
|---|---|---|
| 文章正文 (Markdown/HTML) | KV 单个 Value 支持 25MB，远超 D1 的单行建议大小。 | 突破限制：长篇大论、万字技术指南、带大量 Base64 的文档，通通塞进去，完全不用担心数据库查询变慢。 |
| 分类/标签元数据缓存 | 首页和侧边栏每次都要加载这些“碎内容”。 | 秒开体验：KV 数据分发在全球 300+ 边缘节点。用户点开文章，正文是从离他最近的节点直接吐出来的，响应速度是毫秒级。 |
| 高频配置 (Site Config) | 博客标题、社交链接、SEO 全局设置。 | 减少 D1 负担：这些配置读多写少。放在 KV 里，每天 10 万次免费读取 额度，个人博客根本用不完，稳稳地白嫖。 |
标签、分类——D1（关系型数据库）
如果说 R2 是大仓库，KV 是高速书架，那么 D1 就是握着所有钥匙的房东。你找他要任何东西，他都会查表后立马告诉你：“去 A 栋 3 单元 201 号找。”
再举列子，我要创建一个新的相册，也就是开一个储物柜，我要给管理员D1说，然后管理员D1记下我的电话，姓名，住址，身份证号码，储物清单，当我要从储物柜里面拿出这个相册，管理员不需要知道相册内容是什么，直接给我相册。如果每个人存放的详细内容他都要知道，那么他脑袋也快爆了
数据存储关系
- D1 (SQL)：擅长关系逻辑。处理分类、标签检索、时间排序非常高效。
- KV (NoSQL)：擅长极速读取。避开了 D1 对单行数据长度的敏感限制，让长文加载更快。
- R2 (Object)：擅长大容量存储。解决了数据库无法高效处理二进制文件的问题，且免除出口流量费。
Hono框架
Hono框架是我用过最简单的，感觉比 express 还好用，特别是搭配Cloudflare Workers特别爽，里面主要遇到的问题就是 CORS（ross-Origin Resource Sharing，跨源资源共享），他是浏览器的保护机制，同源策略：
https://developer.mozilla.org/zh-CN/docs/Web/Security/Defenses/Same-origin_policy
（这里请查看MDN文档，说的更详细）
一行代码解决
typescript▼
import { cors } from 'hono/cors'
const app = new Hono()
//所有域名
app.use('/api/*', cors()) // 允许所有来源访问，或者指定你的博客域名
//指定域名
app.use('/api/*', cors({
origin: 'https://lixiang.page', // 明确指定你的域名
allowMethods: ['GET', 'POST'],
allowHeaders: ['Content-Type'],
}))
文档参考
以下是Cloudflare的相关官方文档
R2：https://developers.cloudflare.com/r2/
KV：https://developers.cloudflare.com/kv/
D1：https://developers.cloudflare.com/d1/
Images:https://developers.cloudflare.com/images/transform-images/
以上的几个免费产品就能构建一个简单的全栈应用了，都是用Cloudflare的全家桶，他们有免费额度，不用每个月关心各种账单，拥有全球访问CDN