Blog

淺談 CDN 以及 CDN 在 WordPress 的應用 (下篇)

在上一篇文章 - 淺談 CDN 以及 CDN 在 WordPress 的應用(上篇)中 我們簡單的介紹了 CDN 以及 CDN 在 WordPress 上的運用,今天我們就以實作的方式教各位,如何利用 WP-Rocket 跟 CloudFront 來將網站所有的圖片改由 CDN 來下載。
在此筆者就不詳述如何新增 AWS 的帳號了,各位可點擊下方的 AWS 網址,前往頁面進行註冊。

當你的AWS帳號都設定完畢後,可以經由他們的介面開始建立CDN。

1. 前往 Cloudfront 管理頁面

登入到 AWS Console 後,搜尋 Cloudfront 並且點擊 Cloudfront 到 Cloudfront 的管理頁面

2. 建立一個 CDN Distribution

按下右上方的 "Create distribution" 按鈕

提供一個 distribution name,在 Distribution type 選擇 "Single website or app" ,然後按 "Next"

3. 設定 CDN 來源以及 CDN 設定

除非您的網站圖片有上傳到 S3,否則在 Origin type 請選擇 Other,然後再 Custom origin 欄位中加入你的網址即可(這個欄位就是告訴 AWS 要去哪一個地方抓你原始的檔案跟圖片來做傳遞,通常都會是你的網址,其他設定可以先按照建議( WAF 通常會建議 Disable 以免造成過多費用),然後按 "Create distribution" 建立 CDN

4. 複製 CDN Domain Name

CDN 建立完成後,會導到剛剛的 CDN 列表頁,此時頁面中會列出你剛所設定的 CDN,顯示為 "正在建立中(In Progress)",稍微等待幾分鐘後,當狀態變成 "Deployed" 後就算已經完成。
完後後,將 Domain Name 選項內的 CDN 網址進行複製。

5. 設定 WP-Rocket 外掛啟用 CDN

AWS 到此就設定完成了,接下來就是要設定 WP-Rocket 的部分。

WP-Rocket 這一部分非常簡單。我們進入 WP-Rocket 的設定頁面後會看到 CDN 的設定選項。
進到 CDN 選項頁面後,勾選 "啟用內容傳遞網路(CDN)",並在將網站網址重新設定為:選項中,將複製下來的 CDN 網址貼上,最後將套用選項選擇全部檔案(注意:如果您的網站檔案有設定上傳到 S3 上,請改選擇 (CSS & Javascript)。

設定好之後按設定好之後按儲存就可以了!!

6. 設定完成!!

到此 CDN 已經完成設定,你的網站圖片跟 CSS 還有 JS 檔案將開始改由 CDN 來傳遞,您可以到網站去檢查圖片網址是否都被取代成你的 CDN 網址,如果有的話就代表 CDN 已經正常運作。往後 AWS 會將圖片快取在不同地區的資料中心,並且由離瀏覽用戶最近的資料中心來提供用戶下載圖片,藉此給予用戶更快速良好的網站瀏覽經驗。

文章最後更新於 : 2025.11.05