cloudflare r2进行cdn加速

cloudflare r2进行cdn加速

当我们声明了自定义域名时,实际上,当我们访问资源时,也是会通过cf的代理转发,所以也是经过dns解析的,而cf的dns解析过程中加入了cdn处理,因此不需要额外的配置

CF DNS 常见记录类型

R2 记录类型

R2 是 Cloudflare 特有的 DNS 记录类型,专门用于连接 R2 对象存储服务。

特点:

bash 复制代码
Type: R2
Name: data.tianran.org  # 你的域名
Content: public         # R2存储桶名称
Proxy status: Proxied   # 启用CDN代理

作用:

  • 直接将域名指向 R2 存储桶
  • 自动启用 CDN 加速
  • 无需手动配置复杂的存储桶 URL

CNAME 记录类型

CNAME(Canonical Name)是标准的 DNS 记录类型,用于创建域名别名。

特点:

bash 复制代码
Type: CNAME
Name: cdn                    # 子域名
Content: 37789669-2af8-4...  # 目标域名或服务地址
Proxy status: Proxied        # 启用CDN代理

作用:

  • 将一个域名指向另一个域名
  • 常用于 CDN、负载均衡等服务
  • 更灵活的域名映射

实际应用对比

使用 R2 记录:

javascript 复制代码
// 直接访问 R2 存储的文件
const imageUrl = 'https://data.tianran.org/images/photo.jpg';

使用 CNAME 记录:

javascript 复制代码
// 通过 CNAME 别名访问
const cdnUrl = 'https://cdn.tianran.org/assets/style.css';

在你的配置中:

从截图可以看到:

  1. R2 记录data.tianran.org 直接连接到名为 public 的 R2 存储桶
  2. CNAME 记录cdnblog 等都是域名别名,指向不同的服务

代码使用示例:

html 复制代码
<!-- 使用 R2 记录访问存储文件 -->
<img src="https://data.tianran.org/uploads/avatar.png" alt="Avatar">

<!-- 使用 CNAME 记录访问 CDN 资源 -->
<link rel="stylesheet" href="https://cdn.tianran.org/css/main.css">

性能对比:

javascript 复制代码
// R2 记录 - 直接访问存储
fetch('https://data.tianran.org/api/data.json')
  .then(response => response.json())
  .then(data => console.log('R2数据:', data));

// CNAME 记录 - 通过别名访问
fetch('https://cdn.tianran.org/resources/config.json')
  .then(response => response.json())
  .then(data => console.log('CDN数据:', data));

总结

  • R2 记录是 Cloudflare 为 R2 存储服务专门设计的,使用更简单
  • CNAME 记录是通用的 DNS 别名机制,使用更灵活
  • 两者都可以启用 Proxied 状态来享受 Cloudflare 的 CDN 加速
相关推荐
Lsx_6 小时前
案例+图解带你遨游 Canvas 2D绘图 Fabric.js🔥🔥(5W+字)
前端·javascript·canvas
m0_471199636 小时前
【场景】如何快速接手一个前端项目
前端·vue.js·react.js
榴莲CC7 小时前
抗干扰LED数显屏驱动VK1624 数码管显示芯片 3线串行接口
前端
Tigger7 小时前
用 Vue 3 做了一套年会抽奖工具,顺便踩了些坑
前端·javascript·vue.js
天天扭码7 小时前
一文搞懂——React 19到底更新了什么
前端·react.js·前端框架
weixin_462446237 小时前
【原创】使用langchain与MCP 与 Chrome DevTools 打造可调用浏览器工具的 Chat Agent
前端·langchain·chrome devtools
OpenTiny社区7 小时前
OpenTiny 2025年度贡献者榜单正式公布~
前端·javascript·vue.js
OEC小胖胖7 小时前
08|Commit 阶段:副作用如何被组织、执行与约束
前端·react.js·前端框架·react·开源库
奋斗的小青年!!7 小时前
Flutter跨平台开发OpenHarmony应用:个人中心实现
开发语言·前端·flutter·harmonyos·鸿蒙
kkce7 小时前
域名CDN检测意义
服务器·前端·网络