[WordPress]靜態內容採用Cloudflare，動態內容採用QUIC.cloud（搭配LiteSpeed Cache）

在這篇開始之前，要先說明一下什麼是靜態內容？以及什麼是動態內容？

簡單來講，靜態內容不管是誰在哪個地方上網到這個網站，看的內容都會是一樣的內容，不會因為你在台灣開這個網頁，或是其他地方開啟這個網頁就會有所不同，這個就是所謂的靜態內容。而動態內容則是在網頁裡面加了一些變數；例如購物網頁，你的購物車內容和你家人的購物車內容一定是不一樣的（除非你們共用帳號），不一樣的帳號，則會有不同的內容，這就是所謂的動態內容

如果有興趣深入的話可以參考Cloudflare的解釋

快取靜態內容與動態內容 | 如何運作？

那麼，我為什麼要把這兩種不同內容分開做呢？原因很簡單，就只是為了要省錢

就目前的CDN（內容傳遞網路）來講，Cloudflare在靜態內容是免費的（但是動態內容就要收費了），而QUIC.cloud的CDN服務雖然靜態、動態有一定免費的配額；所以為了使用量的節省，可以透過這樣的配合達到我的目的

以下為我的步驟，還請參考看看（後續的版本是否介面一樣我不敢保證，但在基礎上其實是一樣的），但必須提到一點，這個方式算是比較偏向進階設定，沒有處理好的話，整個網站版型都會跑掉，這點要非常注意；如果僅是想要單純用QUIC.cloud的CDN就好，那麼下面的步驟1可以省略

還請按照下面幾個步驟做設定

在自己的機器加入Subdomain（次網域）

DNS設定分為兩部分，一個是在Cloudflare的DNS管理加入”cdn.你的網域”的A記錄（這僅是個人設定，實際上可依據你的需求作調整），另一個則是要在自己的機器上（不管是託管空間或是VPS）加入Subdomain（次網域）

Cloudflare的DNS操作

在Cloudflare加入A紀錄，這裡的內容代表你機器的IP（租賃主機或是VPS）

在cPanel上的操作

在cPanel操控台找尋DOMAIN裡面的Subdomains（新版的cPanel可能就只剩Domains而已）

按照圖的資訊輸入資料。如果這是A2Hosting的主要網站的話，和圖一樣輸入即可（記得改為自己的Domain就是）；但如果這是A2Hosting其他網站的話，Document Root這一欄位則是輸入該Domain

實際狀況 — 最後可以在Modify a Subdomain的項目看到cdn.cyrians.com的內容資訊設定

在CyberPanel的操作

按照圖內填入相關資訊。Domain Name的部分要填完整，我這裡用的都是cdn.OOOOOXXXXX；然後Path:這一塊的部分，都是填入public_html

設定LiteSpeed Cache選項

CDN網址填入cdn.你的網域/（這是以我的例子為範本，記得最後的”/”也要輸入喔）

過一會後就會有出現Domain Key取得成功的訊息（也應該會要出現），沒看到的話如果有看到Approved這個字眼也是代表取得成功

QUIC.cloud的設定部分

前往QUIC.cloud設定 — 點擊”Visit My Dashboard on QUIC.cloud”的部分前往QUIC.cloud做設定

我們接著要在QUIC.Cloud CDN Settings確認資料，找尋”Your Assigned CNAME is:”後面的字串，並把內容複製下來

在Cache Settings做其他設定 — 在CDN分頁→Cache→Cache Settings裡面有個Static Cache項目，把這個弄成OFF（因為如果設定成ON的話，Static Content似乎還是會走這邊的CDN，並可能會造成一些頁面的Bug，所以我的設定是直接關閉這個選項）

到Cloudflare再做設定 — 這裡需要把原本指向我們主機網址的A記錄刪掉，然後加入CNAME的紀錄，並把剛剛複製下來的資料填入內容※記得這裡的Proxy狀態**一定要**設定為僅DNS，不然會出問題

Header要再加入規則

到了這邊還差最後一點，還不能就此大意

最後必須要在cdn這個子網域的Header加入規則，不然版面佈局也會出現問題，下面將會分為cPanel（使用WebHosting的租賃主機）和OpenLiteSpeed Server的WebAdmin（使用VPS）的設定

首先cPanel的部分其實還好，最主要因為在之前就先設定好了（針對.htacess），所以基本上不需要更動，詳細可以參考以前的文章

[cPanel]透過修改.htacess檔案讓Header的Security Score達成A+

至於使用OpenLiteSpeed Server的話就稍嫌麻煩，但按照下面步驟進行即可（但之前也有類似的教學）

[OpenLiteSpeed]讓WebPageTest的Security Score達成A+

進入OpenLiteSpeed的WebAdmin介面 — 進入OpenLiteSpeed的WebAdmin（主機IP:7080）介面後找尋Virtual Hosts

URI：/
Accessible：選擇Yes
Header Operation：填入下面程式碼

unset X-Powered-By
Access-Control-Allow-Origin "*"
Strict-Transport-Security "max-age=63072000; includeSubDomains; preload"
Content-Security-Policy "upgrade-insecure-requests"
Cross-Origin-Opener-Policy "same-origin-allow-popups"
Cross-Origin-Resource-Policy "cross-origin"
X-Content-Type-Options "nosniff" always
X-Frame-Options "SAMEORIGIN"
X-XSS-Protection "1; mode=block"
X-Permitted-Cross-Domain-Policies "none"
Referrer-Policy "strict-origin-when-cross-origin"
Permissions-Policy "camera=(), microphone=(), geolocation=(), accelerometer=(), gyroscope=(), autoplay=(), magnetometer=(), usb=(), bluetooth=(), fullscreen=(self "https://cdn.cyrians.com")"
Expect-CT "max-age=604800, enforce"