本篇文章使用免費的Cloudflare為WordPress網站配置CDN，透過不同的CDN設定以適應B2B展示網站和B2C線上購物網站。
在配置CDN前後可以先測試網站真是載入速度，方便做個對比。
WordPress網站配置CDN思路
B2B網站CDN思路
B2B網站主要以展示為主，基本上沒有動態內容，也不適用用戶登入功能，所以更是和對整個網站/頁面進行緩存，屬於純靜態緩存，也能更多的將伺服器內容緩存在CDN上，最大程度的減少對來源伺服器的請求。
B2C網站CDN思路
B2C網站相對來講就會比較複雜，需要線上下單付款、使用者登入等功能，都屬於動態請求，如果這些功能或頁面被快取會造成網站嚴重問題，所以就要使用動靜分離的快取機制，將靜態檔案（css、js、圖片等）快取在CDN中，其他的php、api等請求不快取。
了解完大致思路後，接下來就依照自己的網站類型和Well一起進行網站CDN的設定。
註冊Cloudflare
在開始之前，如果大家沒有Cloudflare帳號，需要先進行註冊。
進入Cloudflare網站後，點選右上角註冊按鈕，進入套餐選擇頁面，選擇Free免費版就好了，點選「新增一個網站」。
在註冊頁面填入信箱和密碼，點選Sign up。
要確保郵箱正確，因為註冊完會要求驗證郵箱。
因為Well已經註冊過了，就不再接著示範了。
新增網域
註冊登入Cloudflare後，進入Cloudflare後台首頁，點選右上角「新增網域」按鈕。
輸入域名，選擇“快速掃描DNS記錄”，點擊繼續。
選擇Free免費套餐，繼續。
它會自動將我們網域下方原有的解析記錄同步過來（如果有解析的話），不用我們在自己動手遷移，點擊「繼續前往啟動」。
在Cloudflare上啟動域名，需要在域名提供者處將域名原本的DNS修改為Cloudflare提供的DNS。
修改域名DNS
這步驟需要在網域註冊商完成，例如Well的網域是在阿里雲註冊的。
透過瀏覽器來到阿里雲網域控制台。
點選對應網域名稱清單右側的「管理」按鈕。
點選左側導覽列的“DNS修改”，再點選“修改DNS伺服器”按鈕。
將Cloudflare提供的兩個DNS分別複製到阿里域名的DNS區域，點選確定。
因為DNS更新有一定的延遲，等待5分鐘左右後，回到Cloudflare，點選偵測DNS更新狀況。
DNS更新成功後，在CF後台會有這樣的提示，這樣網域解析就被Cloudflare接手了。
之後如果要加入網域解析，就要到Cloudflare的DNS進行添加，不用再加入網域購買商添加解析。
B2B網站CDN配置
在Cloudflare後台，找到我們剛剛新增的域名，點選進入域名的管理介面。
然後點選左側導覽列：規則– 頁面規則，Free方案有3條規則，我們將使用這三條頁規則來設定B2B網站的CDN快取規則，點選右側「建立頁面規則」按鈕。
第一條頁面規則：快取繞過WordPress後台
我們先來觀察一下WordPress後台頁面的URL結構，其結構組成是domain.com/wp-admin/XXXX的形式。
頁面規則如下：
URL填：domain.com/wp-admin*
快取等級：繞過
這樣設置，CDN就不會快取網站後台。
這樣設定還有一個好處，當我們修改WP後台登入位址的時候，可以將登入位址修改成domain.com/wp-admin-XXX的格式，也能避免快取登入頁面。
第二條頁面規則：快取繞過JSON請求
WordPress有一些動態要求的格式是domain.com/wp-json/XXXXX的結構，這種動態請求是不能快取的，否則會產生資料錯誤。
頁面規則如下：
URL填：domain.com/wp-json*
快取等級：繞過
第三條頁規則：快取所有頁面
頁面規則如下：
URL填：域名.com/*
快取等級：快取所有內容。
邊緣緩存TTL：一個月。
邊緣快取TTL（Time to Live）是指在邊緣伺服器(CDN)上快取資料的有效時間。簡單來說，它決定了快取中的資料可以保存多長時間，而不需要從來源伺服器重新取得。
電子郵件混淆技術：開啟。
電子郵件混淆技術是一種用於保護電子郵件內容和發送者身分的技術。其主要目的是防止垃圾郵件、釣魚攻擊或其他形式的電子郵件濫用。
如果你在網站上公開顯示了電子郵件地址，並且你發現收到了大量垃圾郵件，開啟混淆技術可能會有效防止。
瀏覽器完整性檢查：開啟。
瀏覽器完整性檢查是一種機制，用來確保瀏覽器所取得的資源在傳輸過程中沒有被竄改。它透過校驗資料的完整性來確保使用者收到的內容是可信的。
瀏覽器快取TTL：一個月。
瀏覽器快取TTL 是指瀏覽器在快取某個資源時，儲存該資源的有效時間。簡單來說，它決定了瀏覽器可以使用快取資料多長時間，而不需要重新請求伺服器
順序：最後一個
這個一定別選錯，只有這條順序在最後一個，前兩條規則才能生效，保證除了後台和json以外的頁面URL都緩存。
最後三條規則設定完成後是這個樣子，大家仔細對照，盡量避免設定錯誤。
B2C網站CDN配置
快取規則一：快取靜態文件
左側導覽列：快取– Cache Rules – 建立規則，進入規則建立頁面。
為規則命名：快取靜態檔案（也可以自訂其他名字）。
選擇自訂篩選表達式。
表達式欄位選擇網址，運算符選擇包含，值填寫靜態文件後綴。
設定項比較多，就不再一一贅述，Well會把表達式程式碼直接放在下方，複製貼上到下方表達式，再點擊視窗右上角的「使用表達式產生器」就可以套用表達式。
(http.request.uri 包含「.jpg」) 或 (http.request.uri 包含「.png」) 或 (http.request.uri 包含「.webp」) 或 (http.request.uri 包含「.exe」) 或 (http.request.uri 包含「.pdf」) 或 (http.request.uri ”) 或 (http.request.uri 包含“.css”) 或 (http.request.uri 包含“.html”) 或 (http.request.uri 包含“.txt”) 或 (http.request.uri 包含“.gif”) 或 (http.request.uri 包含“.svg”) 或 (http.request.uri”. ”) 或 (http.request.uri 包含“.tar”) 或 (http.request.uri 包含“.jsp”)
快取資格：符合緩存條件
邊緣TTL：如果存在，使用快取控制標頭
瀏覽器TTL：接受來源伺服器TTL
最後記得保存部署。
快取規則二：不快取後台/動態請求
第二條快取規則：
規則命名：後台饒過緩存
自訂篩選表達式
表達式程式碼如下：
(http.request.uri.path 包含“/wp-admin”）或（http.request.uri.path 包含“/wp-login”）或（http.request.uri.path 包含“/wp-logout.php”）或（http.request.uri.path 包含“/wp-comments-post.D.S. （http.request.uri.path 包含“/profile.php”）或（http.request.uri.path 包含“/wp-pass.php”）或（http.request.uri.path 包含“/dynamic-content”）或（http.request.uri.path 包含“/wp-json”）或（http.conreview."包含“action=rp”）或（http.request.uri 包含“checkemail=confirm”）或（http.request.uri包含「網站地圖」）
緩存資格：繞過緩存
放置位置：最後一個
最後保存部署。
這是兩條規則設定完成後的樣子。
清除Cloudflare CDN快取
在我們網站進行樣式調整或內容修改後，就需要刷新快取才能看到前台變化。
快取-配置，可以選擇清除單一頁面快取或整個網站的快取。
ZH_TW 
ZH_CN