BunnyCDN 串接 WordPress:靜態資源卸載與費用優化完整指南

把靜態資源交由 BunnyCDN 接管,是近幾年台灣站長在速度優化上愈來愈常見的選擇。原因並不複雜:傳統方案動輒每月幾百美元的固定費,在流量不穩定的成長期根本不合成本;而 BunnyCDN 採用按量計費,亞太區節點的流量單價大約落在每 GB 0.01 至 0.03 美元之間,一個月靜態資源流量若在 50 GB 以內,費用通常不超過 2 美元。

這份筆記從建立拉取區(Pull Zone)開始,帶著走過兩種主流的 WordPress 整合路徑——輕量的 CDN Enabler 外掛,以及功能更完整的 WP Offload Media——說明各環節的設定邏輯,以及費用試算時容易忽略的幾個變數。

建立 Pull Zone 前先理解流量從哪裡走

很多人第一次設定時,沒搞清楚拉取區(Pull Zone)和儲存區(Storage Zone)的差別,結果把架構想錯,之後資源網址也跟著配錯。簡單說,拉取區是 CDN 快取層,任務是攔截請求、回傳快取;儲存區則是 BunnyCDN 自己的物件儲存空間,相當於 S3 的替代品。兩者可以獨立運作,也可以搭配使用。

對大多數 WordPress 站台而言,初期只需要拉取區就夠了。建立時「Origin URL」填自己網站的根網址(如 https://example.com),拉取區會自動把所有請求代理到原站並快取回應。建立完成後,BunnyCDN 會提供一組預設的 *.b-cdn.net 子網域;若要改用自訂網域(如 cdn.example.com),在拉取區設定頁的「Custom Hostnames」加上去,再到 DNS 新增一筆 CNAME 指向那個 *.b-cdn.net 網址即可。

SSL 憑證這裡有個細節值得注意。自訂網域啟用後,BunnyCDN 會自動透過 Let’s Encrypt 簽發憑證,但簽發時間可能需要幾分鐘至半小時。這段期間走 HTTPS 會回報錯誤,可先改用 HTTP 測試。

用 CDN Enabler 把資源網址改寫到 CDN

CDN Enabler 是 KeyCDN 推出的免費外掛,雖然標的是 KeyCDN,但邏輯單純,對接任何 CDN 皆可。安裝啟用之後,在設定頁填入「CDN URL」,外掛就會在前端輸出 HTML 時,將符合條件的靜態資源網址批次改寫過去。

設定上有三個地方需要留意。

CDN URL 要填哪個網址

填上一節建立好的拉取區網域。若已設定自訂網域,填 https://cdn.example.com;若尚未設定,暫時填 BunnyCDN 給的 *.b-cdn.net 預設網域,先行測試亦可。注意結尾不要加斜線,否則部分版本的外掛產出的網址會多出一個斜線。

哪些路徑要納入改寫

預設通常會改寫 /wp-content//wp-includes/ 底下的靜態資源,涵蓋上傳的圖片、主題 CSS 與 JavaScript、核心外掛的資源檔。若網站有其他靜態資源放在不同路徑,可在「Include Directories」欄位手動新增。

反過來,若特定外掛的 JavaScript 在走 CDN 之後行為異常(例如需要動態抓取後端 AJAX 端點的邏輯),把那個路徑加進「Exclude」欄位排除,讓它繼續從原站載入即可。

設定完成後的驗證方式

儲存後開啟瀏覽器開發者工具,切到 Network 分頁,重新整理首頁,確認圖片、CSS、JS 的 Request URL 已帶有 CDN 網域。再查看 Response Headers 裡是否出現 CDN-CacheBunnyCDN-Cache-Control,顯示 HIT 即代表 CDN 快取已正常作用。

用 WP Offload Media 搭配儲存區做完整卸載

若要把媒體檔案「真正」移離原站主機——讓原站磁碟不再存放圖片,改由 BunnyCDN 儲存區集中管理——就需要走 WP Offload Media 這條路。這套外掛的免費版(WP Offload Media Lite)支援 Amazon S3,付費版則額外支援 BunnyCDN 儲存區、Cloudflare R2 等。

整合路徑分兩段進行。

在 BunnyCDN 建立儲存區並連接拉取區

進入 BunnyCDN 後台,建立一個儲存區,選擇距離目標讀者最近的主要區域(台灣讀者建議選「SG」新加坡節點)。儲存區名稱日後會出現在 API 路徑裡,建議取語意清楚的名稱。

建立完成後,回到拉取區設定,把「Origin Type」從「Origin URL」切換為「Storage Zone」,並選剛才建立的儲存區。這樣一來,CDN 快取的源頭不再是原站 HTTP 伺服器,而是 BunnyCDN 自己的儲存層,延遲更低,也不消耗原站頻寬。

在 WP Offload Media 設定連線與卸載規則

WP Offload Media 付費版支援直接填入 BunnyCDN 的儲存區 API Key 和儲存區名稱完成對接。設定介面裡有幾個選項值得說明。

「Remove Files From Server」:啟用後,圖片上傳至儲存區後,原站本機的副本會被刪除。這能節省主機磁碟空間,但前提是儲存區和拉取區已穩定運作,否則 CDN 故障時站台圖片會全部消失。建議先讓新上傳的媒體走這個流程,舊媒體保留本機副本一段時間觀察穩定性後再批次遷移。

「Delivery URL」:填拉取區的自訂網域。WP Offload Media 輸出圖片網址時會把這個網域作為前綴,效果等同於 CDN Enabler 的網址改寫,但只作用於媒體庫的圖片,不改寫主題 CSS 和 JavaScript。

「Force HTTPS」:強烈建議啟用,避免混合內容(Mixed Content)觸發瀏覽器安全警告。

費用試算容易低估的幾個變數

BunnyCDN 的計費模型看起來簡單,實際估算時有幾個地方值得細看。

節點區域有乘數效果。BunnyCDN 的計費按地理區分層,亞太區、北美、歐洲各有不同單價。若網站讀者分散在多個大洲,流量費用會按各區比例加權。同樣 100 GB 流量,全部在北美約 1 美元,若三分之一在亞太就要再加一些。

儲存費用是另一個容易漏算的項目。使用儲存區時,除了流量費用外,還有靜態儲存費,大約每月每 GB 0.01 美元。媒體庫 10 GB 的站台,每月儲存費約 0.1 美元,通常不是大頭;但若開了備援複製(Geo-Replication)到多個區域,費用會乘以複製份數。

請求次數費用則常被忽略。每次 CDN 回應一個請求(無論 HIT 還是 MISS),BunnyCDN 都有極低的請求計費,每百萬次約 0.01 美元。流量不大但頁面元素多(每頁幾百個資源請求)的站台,這個數字累積起來也值得留意。

把這三個變數放進試算表,設定低、中、高三個流量情境,通常就能估出可信的月費區間,避免帳單出來後才發現估算誤差。

幾個常見的設定問題

實際操作中,有幾個問題反覆出現,值得集中說明。

CDN 快取沒有生效

症狀是 Response Headers 裡的 BunnyCDN-Cache-Control 一直顯示 MISS,代表每次請求都回到原站取,CDN 快取形同虛設。常見原因有兩個。一是原站的回應帶著 Cache-Control: no-storeno-cache,BunnyCDN 收到這個指令後會遵守並不快取;二是拉取區設定裡的快取過期時間(Cache Expiration Time)設為 0。前者要在主機或 WordPress 快取外掛(如 WP Rocket、W3 Total Cache)裡調整靜態資源的快取標頭;後者直接在 BunnyCDN 拉取區設定頁修改即可。

WordPress 管理後台圖片無法顯示

啟用 WP Offload Media 並開啟「Remove Files From Server」後,若後台媒體庫的縮圖顯示異常,多半是因為某些縮圖尺寸(由主題或外掛要求)在卸載時未被一併生成並上傳。可以用 WP-CLI 執行 wp media regenerate --yes 重新生成所有縮圖,WP Offload Media 在生成後會自動上傳到儲存區。

圖片路徑含中文或特殊字元出現 404

BunnyCDN 的儲存區對非 ASCII 字元的支援,在部分情境下不穩定。媒體庫裡若有以中文命名的圖片,上傳前先透過外掛或自訂上傳邏輯把檔名轉成 ASCII 或 slug 格式,從源頭避免這個問題。

相關文章
標籤: 靜態資源優化, WP Offload Media, WordPress 速度, CDN, BunnyCDN