使用CloudFlareR2搭建个人图床
前期准备
必备 | 可选 |
---|---|
CloudFlare账号 | WebP Cloud账号 |
信用卡/PayPal | 域名 |
PicGo | Github账号 |
开通 Cloudflare R2 服务需要绑定支付方式,但一开始并不会扣费,只有在超出额度之后才会扣费
CloudFlare R2的优势
- 免费10G的额度
- 免费CDN
- 无需备案
收费标准:
免费 | 超出部分/月费 | |
---|---|---|
存储 | 10 GB/月 | 0.015 美元/GB |
A 类操作 | 100 万次/月 | 4.50 美元/百万次 |
B 类操作 | 1000 万次/月 | 0.36 美元/百万次 |
免费的每月10G额度足够个人使用,即使超出额度之后费用也相当便宜
详细定价:https://developers.cloudflare.com/r2/pricing
GitHub + jsDelivr CDN + PicGo的缺陷
开始我就是这种建了一个 GitHub 仓库,通过 PicGo 上传到仓库,然后 PicGo 返回时的图片路径改为 jsDelivr CDN 加速后的链接,勉强能用还有一份版本管理。
不过jsDelivr 可能有时候被神秘力量封锁,以至于图片在很长一段时间无法加载,再加上 GitHub 托管图片是基于代码仓库,上传图片依赖的是代码提交,容易污染 commit 记录,某种意义上也算滥用资源…
七牛云
- 有免费额度,但要绑定国内已经备案的域名,以后每年还要审核
腾讯云
- 收费
阿里云
- 收费
创建 R2 存储桶
首先需要登录CloudFlare账号
订阅R2
点击左侧的R2存储,填写需要的信息,我这里选择的是信用卡支付
创建存储桶
订阅完成以后点击创建存储桶
设置存储桶的名称和机房位置,我这里选的美西
此时存储桶创建成功,此时可以通过网页上传图片和文件夹,注意此时还不能通过url来直接访问上传的图片
开启url访问
点击存储桶的设置,找到R2.dev 子域,选择允许访问,再弹出框里输入allow确定
现在就可以通过使用分配的公共 R2.dev 存储桶 URL + 文件名 来访问上传的图片了,随便上传一个图片测试一下
自定义图床域名(可选)
和前面一样在存储桶的设置里面,添加自定义域名,我这里设置的是img-r2.6buex.com
注意这里填的域名的dns得已经托管给Cloudflare才行,
大概几分钟就生效了
使用自定义的域名访问图片测试一下,ok没问题
使用 PicGo 上传图片到 R2
显然每次都要打开 Cloudflare 页面手动上传图片的方式显然不够便捷。R2 提供了 S3 兼容的 API,可以方便地使用一些客户端/命令行工具进行上传、删除等操作。
创建 R2 API 令牌
管理 R2 API 令牌
-> 创建 API 令牌
-> 设置令牌名和权限
将 访问密钥 ID、机密访问密钥以及管辖权地特定的终结点复制保存!后面会用到
至此所有Cloudflar的配置部分就结束了
安装 Amazon S3插件
PicGo 并不支持 S3 图床,但可以通过「GitHub - wayjam/picgo-plugin-s3」插件来支持。
在「插件设置」中选择S3 点击安装
mia
设置 Amazon S3
现在「图床设置」中就新增了 Amazon S3 选项。点击图床设置Amazon S3 设置
- 应用密钥 ID,填写 R2 API 中的 Access Key ID(访问密钥 ID)
- 应用密钥,填写 R2 API 中的 Secret Access Key(机密访问密钥)
- 桶名,填写 R2 中创建的存储桶的名称
- 文件路径,上传到 R2 中的文件路径,我选择{year}/{month}/{md5}.{extName},也可以使用 {fileName}.{extName} 来保留原文件的文件名和扩展名。
- 自定义节点,填写 R2 API 中的「为 S3 客户端使用管辖权地特定的终结点」,即 xxx.r2.cloudflarestorage.com 格式的 S3 Endpoint
- 自定义域名,填写上文生成的 xxx.r2.dev 格式的域名或自定义域名
设置完成以后点击上传区切换到Amazon S3测试一下
ok!
设置PicGo快捷键
将Amazon S3 设置成默认图床
然后点击PicGo设置
,点击设置快捷键
根据自己的喜好设置快捷键,我这里是Ctrl+Alt+U
之后只要按快捷键就能上传当前复制的图片,然后自动复制图片链接的md格式
使用WebP Cloud优化图片(可选)
WebP Cloud是一个类 CDN 的图片代理 SaaS 服务,可以在几乎不改变画质的情况下大幅缩小图片体积,优化加载速度,发展到现在除了图片体积减少外,还提供了缓存、添加水印、图片滤镜等更多实用的功能,并提供了自定义 Header 等配置选项。
在 https://webp.se 官网可以看到,图片经过压缩体积缩减到原图的7%
使用github登录webp
创建webp代理
代理名可以随便写,主要是地址要设置成需要代理的URL
如果在前面没有设置个人域名,就使用自带的
xxx.r2.dev
其中xxx..webp.li就是代理地址,其中其中还有很多好玩的设置自己去调
下面就是经过webp代理后的图片,可以看到右下角添加了水印,经过对比确实缩小了两倍多