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

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

如果有興趣深入的話可以參考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(次網域)

[WordPress]靜態內容採用Cloudflare,動態內容採用QUIC.cloud(搭配LiteSpeed Cache)
在Cloudflare加入A紀錄,這裡的內容代表你機器的IP(租賃主機或是VPS)

在自己的機器加入Subdomain(次網域)

cPanel操作

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

在CyberPanel的操作

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

設定LiteSpeed Cache選項

到LiteSpeed Cache選項
到LiteSpeed Cache選項,點擊「一般」分頁
點擊Request Domain Key的地方
點擊Request Domain Key的地方
它就會自動去取得Domain Key
它就會自動去取得Domain Key
CDN網址填入cdn.你的網域/
CDN網址填入cdn.你的網域/(這是以我的例子為範本,記得最後的”/”也要輸入喔)
Server IP填入你主機的IP
Server IP填入你主機的IP後記得儲存設定
Domain Key取得成功
過一會後就會有出現Domain Key取得成功的訊息(也應該會要出現),沒看到的話如果有看到Approved這個字眼也是代表取得成功
前往QUIC.cloud設定
點擊”Visit My Dashboard on QUIC.cloud”的部分前往QUIC.cloud做設定
在QUIC.Cloud CDN Settings確認資料
我們接著要在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,不然會出問題

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

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

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

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

進入OpenLiteSpeed的WebAdmin介面
進入OpenLiteSpeed的WebAdmin(主機IP:7080)介面後找尋Virtual Hosts
尋找cdn.OOOO(你的網域)
尋找cdn.OOOO(你的網域),並按下放大鏡的符號
尋找Context分頁
尋找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 新手教學

 

如果這篇文章有幫助到您,請幫我點擊拍手按鈕 5 下鼓勵我
只要花 30 秒登入 FB 或 Google,不用花任何錢就能支持我
您的支持將會是我創作的最大動力!

4 thoughts on “[WordPress]靜態內容採用Cloudflare,動態內容採用QUIC.cloud(搭配LiteSpeed Cache)”

Leave a Comment

發佈留言必須填寫的電子郵件地址不會公開。

回到頂端