PandaC's Blog

Appearance

Cloudflare R2 ​

拥抱Cloudflare R2，实现视频资源和文件资源的在线存储与在线展示

Cloudflare R2介绍 ​

核心优势： 零流量费 (Zero Egress Fees)。这是它打败阿里云 OSS、腾讯云 COS 的杀手锏。传统 OSS 最贵的是“下行流量费”，视频看的人多了，或者课件被下载多了，房子都要赔进去。但 Cloudflare R2 的流量是 免费的

画质与原件： 你上传什么文件，它就分发什么文件。没有任何二次压缩

费用：

  • 流量费： $0 (无论多少人看视频或下载 PPT，都不收流量费)
  • 存储费： 前 10GB 免费。超过后 $0.015 / GB（极其便宜，存 100GB 视频才 1.5 美元/月）
  • 请求次数： 有免费额度，个人博客很难用完

速度： 走 Cloudflare 的全球 CDN 节点，速度通常不错（国内访问可能受限于 CF 的连接状况，但比 GitHub 直连快）

适用场景（新增）：

  • 视频：Vlog、演示录屏（配合 ArtPlayer）
  • 通用文件：Word、PPT、Excel、PDF、Zip 压缩包、代码文件（配合 FileCard 组件提供下载）

准备PayPal账户-开通Cloudflare的前提 ​

我的疑问 ​

好像这个R2对象存储要先开通支付账户啊？我没有国外的支付卡，我只有国内银行卡和支付方式，怎么办呢？

解决办法 ​

尝试 PayPal（国内版）+ 银联卡

Cloudflare 是支持 PayPal 支付的。好消息是，中国区的 PayPal 账户是可以绑定国内银联卡（储蓄卡/信用卡）的

虽然不能保证 100% 成功（有时候 Cloudflare 的风控比较严），但这是成本最低的尝试方法，值得一试：

  1. 注册 PayPal： 去 PayPal 中国官网注册一个个人账户
  2. 绑定银联卡： 在钱包里绑定你的国内银行卡（由于会涉及到美元换汇，建议绑定一张余额充足的储蓄卡或者信用卡）
  3. 去 Cloudflare 绑定：
    • 在 Cloudflare 后台 -> Billing -> Payment Info
    • 选择 PayPal 作为支付方式
    • 跳转登录后，如果能扣款验证成功（通常是 $0 或 $1 的验证），那 R2 就能开了

注意：如果 Cloudflare 提示“需要添加信用卡来完成购买”，那就说明它识别出了你的 PayPal 资金来源不是国际信用卡，这一招就失效了

配置流程 ​

  1. 创建存储桶：

    • Cloudflare 面板 -> 左侧 R2 -> Create bucket (随便起名，如 my-blog-videos和my-blog-files)

  2. 上传资源（视频、文件）：

    A：直接在页面上点击 Upload，把你的高清视频传上去。例如上传一个名为我的大作.mp4的视频

    B：S3 客户端上传 (推荐，适合批量管理) R2 兼容 S3 协议，推荐下载 S3 Browser (Windows) 或 Cyberduck (Mac/Win) 软件。配置好 R2 的 Key 之后，就能像管理本地文件夹一样管理云端文件（新建文件夹、批量拖拽上传），管理大量 PPT 和代码包极其方便

  3. 开启公开访问 (Public Access)：

    • 进入 Bucket -> Settings -> Public Access
    • 点击 "Connect Domain"
    • 你可以分配一个二级域名（比如 video.你的域名.com，files.你的域名.com）或者直接用它提供的 r2.dev 子域名（但在部分网络环境受限，建议绑定自己的自定义域名）

  4. 获取链接：

    • 绑定好域名后，你的视频链接就是：https://video.你的域名.com/我的大作.mp4

    • 文件链接就是：https://files.你的域名.com/docs/复习提纲.docx

      获取域名详见：网站域名

  5. 在博客里使用：

    回到你的 Markdown 文章中，根据资源类型选择不同的组件：

    场景一：插入视频 使用 MyPlayer 组件（支持 HLS/MP4）：

    html
    <MyPlayer 
  url="https://files.你的域名.com/videos/vlog01.mp4" 
  title="我的大作" 
/>

    场景二：提供文件下载（新增） 使用 FileCard 组件（支持 Word/PPT/Excel/Zip/Code）：

    html
    <FileCard 
  name="计算机网络复习提纲.docx" 
  url="https://files.你的域名.com/docs/review.docx" 
  size="2.4MB" 
  type="word" 
/>

极其重要的一步：配置 R2 的 CORS (防翻车指南) ​

因为你的博客域名是 pandac-blog.com，而视频域名是 videos.pandac-blog.com还有文件域名是files.pandac-blog.com。 浏览器出于安全考虑，可能会阻止“跨域”播放视频（尤其是用 ArtPlayer 截图功能时，或者加载字幕时）

  • 视频播放需要 (HLS/截图)： 如果你在这个新桶里放了视频，并且用 ArtPlayer 播放，播放器会试图去读取视频的数据流（用来做缓冲、显示波形图、截图等）。如果没有 CORS，浏览器会直接拦截，导致视频黑屏或者截图失败。

  • JS 预加载/获取大小： 虽然 <a href="..."> 下载不需要 CORS，但如果我们以后的 FileCard 组件想要用 JavaScript 自动获取文件大小（显示 "2.4MB" 而不是让你手写），或者做一个“点击复制文件内容”的功能，这些都需要 CORS 许可。

  • 字体/SVG 图标： 如果你把网页用到的一些特殊字体或 SVG 图标放在 R2 里引用，没有 CORS 它们会直接加载失败。

必须去 Cloudflare 后台设置一下 R2 的 CORS 规则：

  1. 登录 Cloudflare -> R2 -> 点击你的存储桶 (Bucket)。
  2. 点击 Settings (设置) 选项卡。
  3. 往下拉找到 CORS Policy (CORS 策略)。
  4. 点击 Add/Edit CORS Policy，粘贴以下 JSON 代码：
json
[
  {
    "AllowedOrigins": [
      "http://localhost:5173",
      "https://pandac-blog.com",
      "https://www.pandac-blog.com",
      "https://my-blog-7iw.pages.dev"
    ],
    "AllowedMethods": [
      "GET",
      "HEAD"
    ],
    "AllowedHeaders": [
      "*"
    ],
    "ExposeHeaders": [],
    "MaxAgeSeconds": 3000
  }
]

解释：这段代码的意思是，允许“你的本地开发环境”和“你的正式博客域名”，去请求 R2 里的资源。

基于 VitePress 搭建 | 记录生活与代码

Copyright © 2025-present PandaC

PandaC