使用CloundFlare R2来构建图床

前言

开发海外SaaS时，我们希望有个blog，通过写目标用户感兴趣的内容来获得SEO流量。

我利用Nextjs构建好了博客系统，可以使用Markdown在上面发送文章，我希望文章中可以有图片，从而让内容更加丰富，此时就需要图床了（即专门用来放图片的服务），搞过自己博客的同学应该不陌生。

选择CloundFlare R2

简单说说原因：

• 快

• 10G免费额度

• cf做的很大很成熟，特别多厂商使用

• 付费部分也很便宜

提一嘴，现在我开发的最佳方案就是Nextjs开发网站，Vercel部署上线，比较大的资源，都放R2上，真的很爽。

简单操作

登录CloudFlare，然后找到R2，然后点击【Create bucket】，R2中有个Buckets（桶）的概念，就是用来放东西的地方，无需深究。

创建完Bucket后，点进就到Bucket的Settings，然后找到【R2.dev subdomain】，将其开启，下图是我已经开启的状态。

只有开启它，你的资源才能被公网访问。CloudFlare说不建议你使用r2.dev，因为会有限频，然后不能用它的Access和Cache，你可以通过绑定一个新域名的形式来使用Bucket，看你自己需要，绑定自定义域名，就可以使用Access和Cache。

虽然cf会推荐以绑定域名的形式来使用，但其实，绑定域名也是需要开启【R2.dev subdomain】的，即还是会有限频，这也是我实操绑定后得出的结论，所以我建议，别折腾，不绑为妙。（如果你想绑定域名，可以看到最后，我记录了我绑定域名的过程）

然后，你就可以上传图片到R2了，便可正常访问。

使用PicGO

每次上传，都要访问R2页面，不优雅，我们可以使用PicGo，解决这个问题。

你可以去它的Github下载稳定版：https://github.com/Molunerfinn/PicGo

很多年前，我还在用七牛云做图床时，就使用了PicGo，现在再用时，发现还在维护，十分难得，为开发者、维护者点赞。

安装好PicGo后，点击【插件设置】搜索【S3】，安装下图插件。

然后回到R2的设置，找到【Manage R2 API Tokens】

创建新的Token，注意【Permissions】中，选择【Edit】，这样你才能通过API上传。

创建后，将Key ID和Access Key设置到PicGO的Amazon S3对应的配置中

然后去到R2的Settings，找到S3 API，将其复制到【自定义节点】上则可。

最后，还有个小坑，就是自定义域名，如果你没有设置自定义域名，这里也需要设置

注意，我上面，加了 /saas-blog-resource 这个后缀，这是因为，我在上传完图片后，查看PicGo给我返回的图片url，跟我手动在R2网页上上传后获得的url不同，缺少了 /saas-blog-resource后缀，我这里就加上去了，各位自己灵活变通。

这样，你就可以通过PicGo上传图片了。

绑定域名

R2中，如果需要使用自定义域名，就需要绑定域名，而绑定域名就需要添加Websites，如下图。

我使用supanext.com这个网站来尝试在cf中绑定域名，supanext.com这个域名在name.com中购买，网站部署在Vercel中。

当我们添加supanext.com给cf时，cf会让你选择套餐，我们选择【Free】，cf还是很强大的，但这里我们展示不需要其他强大的功能。

点击【Continue】后，他会找到这个域名当前的DNS，然后将其同步到cf中，如下就是name.com中的DNS记录。再点击【Continue】，cf会要求你删掉name.com的nameservers，而使用cf的nameservers，nameservers中存储了DNS记录，很多厂商都会要求设置成自己的nameservers，方便厂商做很多策略管理。

我们进入name.com的nameserver管理页面，删掉name.com的nameserver，然后换成cf的

替换nameservers后，需要等待一段时间，提示会说，需要等待24小时左右，因为nameserver更改后，需要在网络中广播，但我自己等待了10分钟，cf就校验好了，cf会发邮件给你，说他校验好了，然后你就可以看见如下页面，此时supanext.com就添加到cf上了。

然后，我们回到R2，然后将supanex.com的域名添加到自定义那里，我使用了img.supanext.com这个子域名。