password
type
status
date
slug
summary
tags
category
Property
Dec 8, 2022 01:45 AM
URL
icon
Backblaze B2 在大厂的对象存储里算是非常便宜的了,而且个人用户会有免费的10G的空间,个人使用足够了。由于 B2 与 CloudFlare 合作,所以套上 CloudFlare 后并不会消耗流量,所以拿来做图床是个不错的选择,下面介绍下步骤。
条件
- 已注册 Cloudflare 和 Backblaze B2 的账号
- 需要有一个域名,并通过 Cloudflare 管理,假设你的域名叫 example.com
创建一个 Bucket
登录到 Backblaze,点击 Create a Bucket 按钮为你的图床创建一个 Backblaze:
![notion image](https://cdn.hashnode.com/res/hashnode/image/upload/v1669703929337/siEL6Zyp8.png?auto=compress,format&format=webp&t=44b99a55-64f6-4279-b625-c65d4f2c38b6)
注意 bucket 的名字必须是全球唯一的。 然后点击 Upload/Download 按钮,这个时候就可以上传一个文件试试。
![notion image](https://cdn.hashnode.com/res/hashnode/image/upload/v1669703960052/cpUDfQRyy.png?auto=compress,format&format=webp&t=b83bbdd4-ee8e-46de-a153-7b1f433c364a)
在下面的步骤中,我们需要用自己的域名来代替文件的地址,例如:files.example.com/smiley.png 来替代 f004.backblazeb2.com/file/metadaddy-public/..
为图床添加DNS解析
在 Cloudflare 中新增一条 DNS 解析,比如创建了 files.example.com, 解析结果为:f004.backblazeb2.com
![notion image](https://cdn.hashnode.com/res/hashnode/image/upload/v1669703988790/JDYnQf-Jb.png?auto=compress,format&format=webp&t=cafa1989-8924-45c3-a4ef-c64de55406cd)
但是这个时候如果直接用我们域名(files.example.com/file/metadaddy-public/smi..)访问的话,会有522错误
![notion image](https://cdn.hashnode.com/res/hashnode/image/upload/v1669704009392/m1KBlZizl.png?auto=compress,format&format=webp&t=bbec842e-5c3e-49ef-8845-5e0d2d9d543a)
这是因为默认情况下,Cloudflare 是通过普通的 HTTP 访问上游服务器,而不是 HTTPS。Backblaze 只支持安全的 HTTPS 连接,所以 HTTP 请求失败。要解决这个问题,需要在 Cloudflare 仪表板的 SSL/TLS 部分,将加密模式从 "灵活"改为 “完全(严格)”,这样 Cloudflare 就会通过 HTTPS 连接到 Backblaze,并需要CA签发的证书。
![notion image](https://cdn.hashnode.com/res/hashnode/image/upload/v1669704024545/BoOzFYtzC.png?auto=compress,format&format=webp&t=b392b558-80ad-4163-bda8-9a47e7913f90)
这个时候在通过地址 files.example.com/file/metadaddy-public/smi.. 就可以正常访问了。 下一步我们需要移除地址中的/file/my-unique-bucket-name
修改请求路径
Cloudflare 可以设置三种转换规则
- URL 重写:重写 HTTP 请求的 URL 路径和查询字符串。
- HTTP 请求头修改:设置 HTTP 请求头的值或删除请求头。
- HTTP 响应头修改:设置 HTTP 响应头的值或删除响应头。
单击 Cloudflare 仪表板左侧的规则设置入口,然后选择转换规则。您将看到 Cloudflare 免费计划包括10个转换规则,足以满足我们的目的。 单击创建转换规则,然后重写 URL。 我们的目的是把f004.backblazeb2.com/file/metadaddy-public/..变files.example.com/smiley.png 由于我们已经设置了 DNS 解析,所以现在已经可以直接访问,那么我们要做的就是把路径中的/file/metadaddy-public去掉就可以了。
所以我们创建一条 URL 重写规则:
![notion image](https://cdn.hashnode.com/res/hashnode/image/upload/v1669704124583/UA052sxf2.png?auto=compress,format&format=webp&t=9bc00b59-0922-41cf-9810-3c13ea718098)
我们先要过滤我们需要生效的请求:
![notion image](https://cdn.hashnode.com/res/hashnode/image/upload/v1669704163157/8ypAg0jid.png?auto=compress,format&format=webp&t=a078229e-0d6b-46b2-bc8d-b731c205eba5)
然后对满足的请求进行重写
![notion image](https://cdn.hashnode.com/res/hashnode/image/upload/v1669704175375/2UFLU9LdE.png?auto=compress,format&format=webp&t=220e9313-e34b-4afb-91f0-250f8e1ba667)
点击保存,这个时候我们就可以通过
来访问我们的图片了。
去掉响应的 HTTP Headers
我们可以使用谷歌浏览器的调试工具看一下这张图片的请求头,或者curl --head进行查看:
我们需要移除x-bz开头的 Headers。 新建一条HTTP 响应头修改规则然后起个名字比如叫 Remove Backbaze B2 Headers. 因为我们需要对所有的响应都做处理,所以条件这边我们直接输入true。
![notion image](https://cdn.hashnode.com/res/hashnode/image/upload/v1669704211517/d9w3eDUr6.png?auto=compress,format&format=webp&t=3ed69284-176f-435d-8565-5ce53d14a2b7)
然后列举出要移除的响应头
![notion image](https://cdn.hashnode.com/res/hashnode/image/upload/v1669704222078/mzp9QqV78.png?auto=compress,format&format=webp&t=65f893cc-52d1-4b70-acd7-2f78ad1975ee)
保存规则,然后我们再次请求我我们的图片,会发现这些 Headers 已经没有了:
优化缓存效率
ETag header
我们可以通过添加ETagheader来提高缓存效率, 我们只需要给 Response 增加一条 Header 即可:
![notion image](https://cdn.hashnode.com/res/hashnode/image/upload/v1669704262295/Af7qZao0M.png?auto=compress,format&format=webp&t=f673b0ee-e8c2-4a7d-b1ce-6780c0ac73ee)
保存规则,再次请求图表试一下就会得到:
Cache-Control header
另一个与缓存相关的头是cache-control,它告诉浏览器如何缓存资源。正如你在上面的回复中看到的,Cloudflare将Cache-Control设置为14400秒(4小时)的最大寿命。 所以我们可以构建一个转换规则,将最大规则从14400增加到31536000:
![notion image](https://cdn.hashnode.com/res/hashnode/image/upload/v1669704286525/qIAttxOVZ.png?auto=compress,format&format=webp&t=06a67a8f-f370-492b-b349-f794af263ff7)
保存规则并重新请求图片:
这样,我们就通过缓存的方式,减少了Cloudflare 和 Backblaze B2 的负担
为图片文件设置 CORS
我们最后要做的就是为图像设置一个跨源资源共享(CORS)的头,这样它们就可以在网页上的任何领域进行操作。
![notion image](https://cdn.hashnode.com/res/hashnode/image/upload/v1669704322205/BKsb7bQ5C.png?auto=compress,format&format=webp&t=7aff946a-eced-40f2-813d-dff9bac8fea1)
保存规则然后重新请求图片
已经有了一个Access-Control-Allow-Origin, 这样我们一个免费的图床就搭建好了。
- 作者:Waicun Li
- 链接:https://www.vikim.cyou/article/Backblaze-Cloudflare-imgurl
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。