不限流量!Cloudflare R2对象存储如何使用

对象存储相信很多人都有所耳闻,例如腾讯云 COS、阿里云 OSS、七牛云 KODO 等。那么,为什么我们还要使用 Cloudflare R2 呢?答案在于它拥有独特的优势:不限访问流量。

对于对象存储来说,流量费用是一项不小的支出。Cloudflare 直接免除流量费用,堪称慈善大佛。不过,我们也不要过度薅羊毛。前几天,某网友在 X 上发布帖子,称自己因为一个月消耗了 1PB 流量,差点被封号。

一个月 1PB 流量,1.43 亿请求数,平均每天 50TB 流量。1PB 什么概念?来看看 1PB 流量在阿里云要多少大洋。

差不多到 43W,太恐怖了!慈善公司也不能这么玩呀。后面作者作出解释,是由于某知名成人社区用来当官方图床了,咳,看来类似网站的需求量很大嘛。

上面提到了流量费也仅仅是 CDN 的费用,实际其他对象存储服务还会有 CDN 回源的流量费和存储容量费,按 1PB 来算也是一笔巨款。那么,Cloudflare R2 是怎么收费的?来看看下图:

Cloudflare R2 主要靠存储容量收费,10G 以内是免费的,对于写写博客做个图床完全是够用的。就算是收费也不贵,100G 差不多也就 10 大洋多点。A 类操作和 B 类操作是指一些读写操作,应该没有多少网站能超过这个数。总的来说,的确够实惠。

那要怎么使用呢?首先你得有个 Cloudflare 账号,怎么注册就不说了,相信不会有什么难度。直接来看看创建一个存储桶:

  1. 登录后,切换到 R2 页面;
  2. 点击创建存储桶;
  3. 填写一个名称,然后创建就完成了。

默认情况下,没有配置域名是不可用链接访问资源的,可以在设置里面启用 r2.dev 访问。

然后在对象文件详情里面就能看到访问链接了。

如果你有自己的域名,并且由 Cloudflare 管理,还可以使用自定义域名。

作为程序员,当然要考虑怎么用代码实现上传、读取、删除等操作。官方提供了 2 种操作方式,包括 Workers API 和 S3 SDK。

Workers API

Cloudflare Workers 是一个服务器托管的执行环境,可以在全球分布的 Cloudflare 数据中心中运行 JavaScript 代码。

创建项目

运行下面的指令创建项目,按照提示操作即可。

sh 复制代码
npm create cloudflare@latest

配置

新建项目下面已经包含配置模板,只要配置帐户 ID 和存储桶名称即可。

账户 ID 可以在页面右上角找到。

代码编写

ts 复制代码
export default {
  async fetch(request: Request, env: Env) {
    const url = new URL(request.url)
    const key = url.pathname.slice(1)

    switch (request.method) {
      case 'PUT':
        await env.MY_BUCKET.put(key, request.body)
        return new Response(`Put ${key} successfully!`)
      // 省略其他操作
    }
  },
}

代码编写完成之后,使用npm run deploy部署。部署成功,通过域名加文件名称作路径即可上传。

S3

R2 实现了 AWS S3 API,也就是可以直接使用 AWS S3 对象存储服务的 SDK。通过 S3 API 可以直接调用操作,在调用之前先要创建 API 令牌。

在账户 ID 下面找到管理 R2 API 令牌,进入创建 API 令牌。

创建完成之后,保留下这些参数。

然后可以使用 Nodejs 进行调用上传。

js 复制代码
import { S3Client, PutObjectCommand } from '@aws-sdk/client-s3'

const S3 = new S3Client({
  region: 'auto',
  endpoint: `https://${ACCOUNT_ID}.r2.cloudflarestorage.com`,
  credentials: {
    accessKeyId: ACCESS_KEY_ID,
    secretAccessKey: SECRET_ACCESS_KEY,
  },
})

const input = {
  Body: 'file content',
  Bucket: 'web',
  Key: '1.png',
}

const command = new PutObjectCommand(input)
const response = await S3.send(command)

上传调用也很简单。这里就不详细介绍每个要点,有需要的可以自行查阅文档。

相关推荐
Mr_Mao1 小时前
Naive Ultra:中后台 Naive UI 增强组件库
前端
前端小趴菜053 小时前
React-React.memo-props比较机制
前端·javascript·react.js
摸鱼仙人~4 小时前
styled-components:现代React样式解决方案
前端·react.js·前端框架
sasaraku.4 小时前
serviceWorker缓存资源
前端
RadiumAg5 小时前
记一道有趣的面试题
前端·javascript
yangzhi_emo6 小时前
ES6笔记2
开发语言·前端·javascript
yanlele6 小时前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
中微子7 小时前
React状态管理最佳实践
前端
烛阴7 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子7 小时前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端