博客 / 詳情

返回

Cloudflare R2 - 免費圖牀

前言

之前看了一篇文章,關於介紹 Cloudflare R2 來搭建圖牀的方案,主要是白嫖 Cloudflare 的空間和 cdn 服務。我現在博客 DevNow 的 CDN 使用的是七牛雲,偶爾還是有一點點的支出。

七牛雲賬單

雖然不多,但是吧,看到有白嫖的方案,還是蠢蠢欲動,這不今天就來試着弄下看看。

1. 註冊Cloudflare賬號

先簡單介紹下 Cloudflare 是一家提供網絡安全和性能優化服務的公司。它的主要功能包括內容分發網絡(CDN)、分佈式拒絕服務攻擊(DDoS)防護、互聯網安全和優化,以及域名系統(DNS)服務。

Cloudflare R2Cloudflare 提供的對象存儲服務。它類似於亞馬遜的 S3(Simple Storage Service) ,但有一個顯著的區別:Cloudflare R2 不收取出站帶寬費用。這意味着用户在從存儲中檢索數據時不會被額外收費,這對於需要大量傳輸數據的應用來説是一個很大的優勢。

R2 允許用户存儲和管理大量的非結構化數據,比如圖片、視頻、備份文件等。它與 Cloudflare 的全球網絡集成,提供了快速、安全的內容交付,適合需要高效、可靠的存儲和分發解決方案的企業。R2 還支持與現有的 S3 API 兼容,方便那些已經在使用 S3 的用户遷移或擴展到 Cloudflare R2

R2 定價

2. 綁定域和解析DNS

在左側網站面板中添加一個域名,由於我的 blog 域名已經在騰訊雲上買完了,這裏主要將 DNS 解析服務遷移到 Cloudflare

添加域名

如果不是 DNS 解析不是 Cloudflare 的話,狀態這裏會顯示讓你去切換。我這裏用騰訊雲來舉例子,具體步驟如下:

2.1 在騰訊雲裏域名的菜單下點擊對應域名管理

域名管理

2.2 然後點擊修改 DNS 解析

修改DNS

2.3 這裏我們把默認的 DNSPod 切換到 自定義DNS,然後填寫對應的地址就好

切換DNS

下邊這兩個地址可以在 Cloudflare 中找到,填上就好,然後等待,快的話幾分鐘就好,好了之後 Cloudflare 會發送郵件通知,如下,這個時候表示已經成功解析過來了。

解析成功

2.4 這個時候再回到網站這裏發現狀態已經成功變成活動了

狀態

3. 開通R2服務

通過左側菜單導航進入到 R2 的服務,開通前需要綁定信用卡,支持 Visa 的都可以,方便後邊對於超出免費額度或者開啓一些收費服務。開通後即可創建存儲桶:

創建存儲桶

創建後可以進入到桶的詳情面板:

存儲桶詳情

配置一個自定義域名,後邊可以通過這個訪問。
到這裏基於 R2 的對象存儲服務就基本完事了。後續就可以在存儲桶中存儲對象了。

存儲對象

4. PicGo 配置R2上傳服務

為了縮減上傳圖片的工作流,我使用的是基於 PicGo 的上傳方式,可以通過複製和 url 進行上傳。這裏主要記錄下如何配置上傳到 R2 服務的過程。

R2 是兼容S3的格式的,所以這裏直接配置S3,插件裏搜索 s3 的插件,安裝即可:

插件

在「插件設置」中選擇安裝,「圖牀設置」中就新增了 Amazon S3 選項。點擊進入配置選項。

S3配置

這裏有幾項配置需要尤其注意。

  • 應用密鑰 ID,填寫 R2 API 中的 Access Key ID(訪問密鑰 ID)
  • 應用密鑰,填寫 R2 API 中的 Secret Access Key(機密訪問密鑰)
  • 桶名,填寫 R2 中創建的 Bucket 名稱,如我上文的 yu-r2-test
  • 文件路徑,上傳到 R2 中的文件路徑,我選擇使用 {fileName}.{extName} 來保留原文件的文件名和擴展名。
  • 自定義節點,填寫 R2 API 中的「為 S3 客户端使用管轄權地特定的終結點」,即 xxx.r2.cloudflarestorage.com 格式的 S3 Endpoint
  • 自定義域名,填寫上文生成的 xxx.r2.dev 格式的域名或自定義域名,如我配置的 https://r2.laughingzhu.cn

上邊的秘鑰信息在 Cloudflare R2 的服務中可以找到:

Cloudflare 秘鑰

創建一個新的 API 令牌,完成創建後,即可看到相關秘鑰,安裝上邊的對應關係填入即可:

image.png

其他配置保持默認即可,確認參數無誤後點擊「確定」與「設置為默認圖牀」即可。

5. PicGo 增加自動壓縮和轉 webp 插件

轉webp插件

我用的是 compress-next
有很多模式可以配置,我這裏選的是 webp-converter

image.png

我主要是希望通過轉換 webp 來優化圖片加載。安轉完記得進行默認配置:

插件配置

然後啓用即可,上傳圖片即可轉換為 webp 格式 上傳到 R2 服務

到這裏我 blog 整體的靜態資源已經從七牛雲遷移到 Cloudflare R2 服務了,開始白嫖的日子了,舒服😊。

原文鏈接:Cloudflare R2 - 免費圖

user avatar codepencil 頭像 warn 頭像 thehumble 頭像 niaonao 頭像 y_lucky 頭像 notrynosuccess 頭像 dingxi 頭像 yubaolee 頭像 lanting_5b3e2d74c64f1 頭像 bygpt 頭像
10 位用戶收藏了這個故事!

發佈 評論

Some HTML is okay.