這幾天整理行李的工作告一段落之後就打開 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 提供了一個非常佛心的永久免費額度，對於個人部落格或中小型網站的圖床來說，通常已經綽綽有餘。
| 項目 | 每月免費額度 | 超出額度後的計費 | 說明 (以圖床為例) |
|---|---|---|---|
| 儲存空間 (Storage) | 10 GB | 每 GB $0.015 美元 | 上傳的檔案總大小。 |
| A 類操作 (Class A Operations) | 100 萬次 | 每 100 萬次 $4.50 美元 | 改變儲存狀態的操作，例如：上傳圖片、列出圖片清單。 |
| B 類操作 (Class B Operations) | 1,000 萬次 | 每 100 萬次 $0.36 美元 | 讀取儲存狀態的操作，最主要的就是瀏覽圖片。 |
| 流量輸出 (Egress) | 完全免費 | 不收費 | 這是 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，你是賽博的活佛，網路的救星 🖐️😭🤚
