設定 Cloudflare R2 "半"免費圖床紀錄

這幾天整理行李的工作告一段落之後就打開 vscode 想說來更新一下 blog，打到一半發現以前慣用的 imgur 圖床不給上傳了，一查之下才發現 Imgur 在五月的時候開始封鎖台灣 IP。

Imgur 在台灣算挺有名，許多網站如 PTT 與以前我常用的 HackMD 等都把它當作圖床使用，不過 Imgur 官方的使用規約禁止大家拿來當圖床使用。原本我以為 Imgur 能夠利用刪除不活躍的舊圖來維持伺服器穩定，但有可能台灣各個網站真的用的太過火了才導致 Imgur 決定封鎖台灣 IP。

尋找替代方案

不論如何，我勢必還是要找一個替代方案。我上網查到了幾個服務，其他的圖床雖然和以前 Imgur 使用習慣差不多，但是因為免費還是可能會有倒閉或是政策改變的問題，而且很多新的圖床都不是太有名，有可能關站之後上傳的東西都拿不回來。

另外也有想到 Github，直接把所有要分享的東西上傳到一個 repo 透過 Github page 外連。不過這麼做是遊走在灰色地帶，哪天官方看到一個帳號丟一堆 commit 而且裡面都是圖片等等非程式碼內容，可能就直接把帳號封了。

最後看到 Cloudflare R2 有提供一定量的免費空間，對標 AWS 的 S3，可以拿來當作儲存空間或圖床。最重要的是完全符合使用規範，不怕被封。 唯一怕的就是哪天跟 AWS 一樣一堆服務突然漲價，現在我越來越依賴 CF 這個賽博活佛了所以不要啊

R2 定價

Cloudflare R2 的計價主要包含三個部分：儲存、A 類操作 (寫入) 和 B 類操作 (讀取)。

R2 提供了一個非常佛心的永久免費額度，對於個人部落格或中小型網站的圖床來說，通常已經綽綽有餘。

R2 的主要優勢在於其免除流量輸出費用 (Egress Fees)，這代表無論你的圖片被多少人瀏覽、下載，都不會因此產生額外的頻寬費用，對於流量較大的圖床來說，可以省下可觀的成本。尤其在 AI 時代，AI agent 滿天飛的情況下，如果你的網站很熱門被「集火攻擊」，使用其他服務有可能會衍生大量費用，使用 R2 的話就不太需要緊張，主要費用是以自己上傳的總檔案大小來評估的，也就是主動權還是在自己。

建立 R2 Bucket

因為我本來就把網站的 DNS 託管給 Cloudflare 了，所以直接來開啟 R2 功能。

建立 bucket，輸入 bucket name 跟儲存地區。儲存類別一般選擇標準，選擇 Infrequent Access 的話在三十天內只能做一次更動，超過存取額度的價格也貴很多，只有儲存額度比較便宜一點點 (大概就是 S3 的 Galcier? 但 Glacier 感覺便宜多了)。

和 S3 幾乎是對照，所以名詞、操作方式甚至是工具都可以共用。

分享 bucket 內容

到這裡就可以利用網頁上傳了，不過目前這個 bucket 還無法被外部存取，我們要設定公開的方式。如果沒有自己的網域、或是沒有把網域託管給 CF 的話，可以用官方的網域 r2.dev，不過這樣會受到頻率限制，而且無法享受到 Cloudflare Cache，CF 自己的 CDN 帶來的好處。

我自己本來就是把網域 DNS 給 CF 託管，所以可以直接添加 Custom Domain。輸入 {欲註冊的子域名}.{你在 CF 註冊的域名}，CF 會自動幫你加上一筆 DNS Record 到你的域名。

完成後 bucket 內的檔案就會自動獲得外連的連結，可以直接到 {剛剛註冊的 domain}/{檔案名稱} 查看。另外 R2 不支援空的資料夾，所以如果要使用資料夾分類的話只能透過其他工具上傳。

取得 Token

如果不想只使用網頁上傳的話就要透過外部服務，而我們會需要 token 來存取 bucket 的內容。

回上一部 R2 Overview > API > Manage API Tokens (或點這裡)，生成一個 API Token (User 和 Account 都可以，差別是跟著你的帳號還是服務帳戶)，依照最低權限原則，權限選 Object Read & Write，bucket 選擇剛剛建立的 bucket，其他按需求填入。

完成之後把三個欄位都記下來，存取 R2 都會用到。

設定 VSCode 插件 Markdown Image

我平常是使用 VSCode 來寫 blog，這裡我就可以安裝 Markdown Image 這個 plugin，它支援多種圖床上傳，從外面複製圖片之後可以直接用 Shift+Alt+V 貼上並上傳圖片到我們設定的地方。

我自己的設定如下 (除了${filepath}以外 {}內的值要自己更改)：

"markdown-image.base.uploadMethod": "S3",
"markdown-image.s3.cdn": "https://{剛剛設定的子域名}/{bucket 內的資料夾名稱}/${filepath}",
"markdown-image.s3.accessKeyId": "{剛剛存的 Access Key ID}",
"markdown-image.s3.secretAccessKey": "{剛剛存的 Secret Access Key}",
"markdown-image.s3.endpoint": "https://{帳號 ID}.r2.cloudflarestorage.com/{bucket 內的資料夾名稱}",
"markdown-image.s3.region": "APAC",  // 如果不是亞太區就要更改
"markdown-image.s3.bucketName": "{bucket 名稱}",

帳號 ID 和區域可以從 R2 bucket 的設定看到。

我另外發現 endpoint 後面的路徑代表的是在 bucket 內的資料夾位置，而非 R2 設定頁面所顯示的 bucket name。
例如我上面的設定圖片，我把 endpoint 設為 blog-images 而非 static，卻是上傳到了 static bucket 的 blog-images 路徑，不知道是不是正設。

結語

Cloudflare 真的是新一代的賽博菩薩，提供的免費額度足夠我們架起一整套網站系統和自動化工具。我幾乎都把整個網站都搬到 CF 裡面來了，目前都還沒有花到一毛錢。

感恩 Cloudflare，讚嘆 Cloudflare，你是賽博的活佛，網路的救星 🖐️😭🤚