在上一篇文章(用 CloudFront CDN + Offload S3 來存取 WordPress 的檔案 – 上篇)我們提到了可以將 CloudFront 以及 Offload S3 一起使用加快網站圖片的存取速度,也提到了我們可以用子網域來設定 CDN 的網址,幫助 SEO。這一篇文章我們就帶著大家一步一步的在 CloudFront 上設定客製化 CDN 網址。
我們並不會再重新講解如何設定 Offload S3 以及基本的 CloudFront CDN,所以在開始之前請先確認您對基本的 Offload S3 以及 CloudFront 的設定都有一定的了解,或是也可以參考我們之前的文章:
- 淺談 CDN 以及 CDN 在 WordPress 的應用(上篇)
- 淺談 CDN 以及 CDN 在 WordPress 的應用(下篇)
- 10 個 WordPress 網站設計師必知的外掛 – WP Offload S3 (上篇)
- 10 個 WordPress 網站設計師必知的外掛 – WP Offload S3 (下篇)
- 用 CloudFront CDN + Offload S3 來存取 WordPress 的檔案 – 上篇
1. 設定 CloudFront 備用網域名稱
假如您已經依照之前的文章設定好了您的 CloudFront DNS,那您可以直接將您要設定的客製化網址加到 CloudFront 的設定頁面裡面,以我們的網站來說,我們希望使用 cdn.innovext.com 來當我們所有圖片的網址,所以我們就直接在我們的 CloudFront 設定中的備用網域名稱加上 cdn.innovext.com 即可。

2. 設定 SSL 憑證
當使用我們自己的網域的時候,我們需要在 SSL 憑證這邊選擇“自訂 SSL 憑證”。如果您已經申請或是匯入網域相對應的憑證,那您可以直接在下方的設定選擇要使用的憑證,如果還沒有申請或是匯入,請先看下一步。

3. 在 ACM 請求或是匯入憑證
您的備用網域一定要有一個相對的 SSL 憑證,如果你已經在別的地方購買憑證,那你可以直接匯入,如上圖,您可以點選“在 ACM 請求或是匯入憑證”按鈕來進行申請或是匯入。ACM 申請憑證的方式很簡單,只要參照以下步驟即可。

首先,先輸入您要申請的網域名稱,以我們來說就是 cdn.innovext.com,請注意,這個網域名稱必須跟上面設定的備用網域相同,然後按下一步。

驗證方式選擇,您可以選擇用 DNS 驗證或是 Email 驗證,DNS 驗證的話您必須有可以更改 DNS 設定的權力,Email 驗證的話則必須可以登入到一些特定的 Email,這邊我們選取 DNS 驗證並按下檢閱。

這邊是確認您的網域名稱跟驗證方法,如果都沒問題我們就可以確認並且請求驗證。

選擇 DNS 驗證的話,系統會提供一筆 DNS 資料請您新增到您的 DNS 紀錄上,新增之後就可以按下繼續,這樣就結束了,然後就是等待系統驗證。
驗證可能要一段時間,但是一般來說如果 DNS 紀錄有加正確,應該都可以在幾小時內完成驗證,驗證完成後再回到步驟2將 ACM 的網域憑證設定好就可以了,然後再按“是,編輯”按鈕來儲存設定。
4. 設定您的備用網址 DNS
這邊要做的就是將您在步驟一所加入的備用網址指向您的 CloudFront DNS 網址(可以到您的 CloudFrond 分佈頁面看到)。
也就是說,以我們的範例,我們要將 cdn.innovext.com 的 cname 指向 CloudFront 所提供的網址。

5. 設定 S3 Offload
在之前的 CDN 設定文章,我們是直接使用 WP Rocket 來讓 WordPress 的圖檔來源都自動轉成 CDN,但是這邊有一點點不同,因為我們是使用 S3 Offload 外掛,所以 CDN 的設定必須要由這邊來設定。方法很簡單,只要將我們的 CDN 網址(cdn.innovext.com)放到 Offload Media 設定頁面下的 Custom Domain 下就好了。

如果您的 S3 Offload 設定是放在 wp-config 裡的話,那就直接改下面這兩個參數。

大功告成!如果設定正確的話,您的 WordPress 網站圖片將會儲存在 AWS S3,並且以 CDN 的方式來顯示圖片!
