使用CloundFlare R2来构建图床

前言

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

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

选择CloundFlare R2

简单说说原因:

  • 10G免费额度

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

  • 付费部分也很便宜

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

简单操作

登录CloudFlare,然后找到R2,然后点击【Create bucket】,R2中有个Buckets(桶)的概念,就是用来放东西的地方,无需深究。92c5d8ab7b7fad8dfb82a01ced5f6b49.png

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

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

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

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

9da7457544611923c052fc0ec1db0559.png

使用PicGO

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

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

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

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

60de3df4552a8b3329b3a88a8490e03d.png

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

66279109c6c1a4747be1a7d84086b6fa.png

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

08af0b61607af850eb241c1910da19f8.png

创建后,将Key ID和Access Key设置到PicGO的Amazon S3对应的配置中d0d00efaa9e5d734124db0ce6c3dabcb.png

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

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

110b80db49fd689b3b6c2b336f0f835d.png

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

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

e599b8ab0725bc02c97151992a16d886.png

绑定域名

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

8b409fa1a180ae00c62b1e7d0561c975.png

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

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

c18ec1c80345679004c9a597d6a0633d.png

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

c1d43a3d04f76b935987b20af13069d0.png

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

b555206f71f38eee8e6c44d23e23d485.png

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

018c08da87f18f7f6e4ed01341ccc211.png

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

158463f35fc8ecfa2bd1d5c4e822ba1d.png

猜你喜欢

转载自blog.csdn.net/weixin_30230009/article/details/131588002