此为历史版本和 IPFS 入口查阅区，回到作品页
rucifa
IPFS 指纹 这是什么
作品指纹

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

rucifa
·
·

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

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

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

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

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

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

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

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

  1. 在DNS加入設定
  2. 設定LiteSpeed Cache選項
  3. QUIC.cloud的設定部分
  4. Header要再加入規則

DNS設定分為兩部分，一個是在Cloudflare的DNS管理加入”cdn.你的網域”的A記錄，另一個則是要在自己的機器上（不管是託管空間或是VPS）加入Subdomain（次網域）

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

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

cPanel操作

在cPanel操控台找尋DOMAIN裡面的Subdomains
按照圖的資訊輸入資料。如果這是A2Hosting的主要網站的話，和圖一樣輸入即可（記得改為自己的Domain就是）；但如果這是A2Hosting其他網站的話，Document Root這一欄位則是輸入該Domain
最後可以在Modify a Subdomain的項目看到cdn.cyrians.com的內容資訊設定

在CyberPanel的操作

在LIST WEBSITES選項中找自己的網站，並按下Manage
在DOMAINS選項選擇Add Domains
選擇要加入子網域的主網域部分
按照圖內填入相關資訊。Domain Name的部分要填完整，我這裡用的都是cdn.OOOOOXXXXX；然後Path:這一塊的部分，都是填入public_html

設定LiteSpeed Cache選項

到LiteSpeed Cache選項，點擊「一般」分頁
點擊Request Domain Key的地方
它就會自動去取得Domain Key
CDN網址填入cdn.你的網域/（這是以我的例子為範本，記得最後的”/”也要輸入喔）
Server IP填入你主機的IP後記得儲存設定
過一會後就會有出現Domain Key取得成功的訊息（也應該會要出現），沒看到的話如果有看到Approved這個字眼也是代表取得成功
點擊”Visit My Dashboard on QUIC.cloud”的部分前往QUIC.cloud做設定
我們接著要在QUIC.Cloud CDN Settings確認資料，找尋”Your Assigned CNAME is:”後面的字串，並把內容複製下來
在CDN分頁→Cache→Cache Settings裡面有個Static Cache項目，把這個弄成OFF（因為如果設定成ON的話，Dynamic Content似乎還是會走這邊的CDN，並造成可能會有些頁面的Bug，所以我的設定是直接關閉這個選項）
這裡需要把原本指向我們主機網址的A記錄刪掉，然後加入CNAME的紀錄，並把剛剛複製下來的資料填入內容※記得這裡的Proxy狀態一定要設定為僅DNS，不然會出問題

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

最後必須要在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（主機IP:7080）介面後找尋Virtual Hosts
尋找cdn.OOOO（你的網域），並按下放大鏡的符號
尋找Context分頁並點擊進入
按一下右上角的+號
按一下向右的箭頭符號
輸入必要的資訊
URI：/
Accessible：選擇Yes
Header Operation：填入下面程式碼

Strict-Transport-Security: max-age=63072000; includeSubDomains; preload
Content-Security-Policy "base-uri 'self'
Header set X-Content-Type-Options "nosniff" always
X-Frame-Options: SAMEORIGIN
X-XSS-Protection 1;mode=block
Referrer-Policy: no-referrer-when-downgrade
Permissions-Policy: fullscreen=(self "https://cyrians.com" "https://cdn.cyrians.com"), geolocation=*, camera=()
到首頁用開發者模式確認，有出現cdn開頭子網域讀取物件的話就成功

以上為[WordPress]靜態內容採用Cloudflare，動態內容採用QUIC.cloud（搭配LiteSpeed Cache），希望能夠幫助你

參考資料：

QUIC.cloud CDN 與 CloudFlare 新手教學

Using Cloudflare for Static Content
CC BY-NC-ND 2.0 授权