Cloudflare 免費 CDN、DNS 代管服務設定教學


一個網站的載入速度對於架站者來說是很重要的,它直接或間接影響了SEO的好壞與讀者的去留,而要加增網站載入速度,除了本身架構、圖片、Javascript等因素外, CDN 也是一個相當關鍵的因素,而 Cloudflare 是全球屬一屬二的的免費CDN服務,對於一般網站架站者來說 (如:Wordpress或中小型網站),是一個相當好的資源,它不但提供DNS代管、靜態內容快取、SSL憑證、網頁壓縮等,還支援防護DDoS攻擊,這一切都是免費的,當然,它還有付費的版本,適合大企業或需要更多功能的用戶。

本文的篇幅會長一點,但只是圖片較多讓大家有參考依據,整個設定過程是不難的,只要跟著做應該是沒問題的,因內容會涉及DNS/名稱伺服器的設定,我會用手上的資源GodaddyPChome買網址這二家來當做修改的範例。

網址:Cloudflare 官方網站

1、 Cloudflare 帳號註冊

首先,需要有一個Cloudflare帳號,請至「註冊」頁面申請,密碼強度要符合網站的需求

Cloudflare 使用者註冊

註冊之後,請抽空到自己的EMail中進行驗證 (抽空的意思是說,其實你可以先進行接下來的操作步驟,不一定要先去驗證,不過請記得要去驗證信箱就是了)

Cloudflare 電子郵件認證

2、新增網站與DNS設定

註冊完後,就會來到以下這個有三個選項的開始畫面,我是什麼都不選,直接選擇右上角的「新增網站」進行網站設定

在Cloudflare中新增網站

請加入自己的網域名稱後點擊「新增網站」,網址前不需要加入「http」、「https」或「www」

新增網域名稱

再來選擇要使用哪個方案,請選擇底部的「免費方案」 → 點擊 「繼續」

選擇 Cloudflare 方案

Cloudflare 會很貼心的幫我們自動偵測現有網站的DNS以及相關設定,大約幾秒鐘就可以偵測出以下的畫面,可稍微看一下,不過基本上我是無腦的直接點擊「繼續」進入下一步

自動偵測DNS設定

接下來這一步應該是最重要的步驟:這裡會列出現有網站所使用的名稱伺服器,以及 Cloudflare 提供的「新」名稱伺服器,而我們要做的就是用新的名稱伺服器把現有的替換掉

先別急著點擊「完成,請檢查名稱伺服器」,此時可以另開瀏覽器的分頁,先到網域註冊商的頁面進行名稱伺服器的修改後再來回來處理;依前言所述,本文會提供「Godaddy」以及「PChome買網址」二個網站的修改方式給大家參考,其餘的註冊商應該也是大同小異

Cloudflare 新名稱伺服器

2.1、Godaddy 名稱伺服器修改

如果你的網域是在Godaddy註冊,請參考此部分:登入Godaddy網站後,在「我的產品」頁面 → 「所有產品與服務」中,找到此次想要修改的網域,然後點選「DNS」即可進入「DNS管理」頁面

Godaddy DNS 管理

進入「DNS管理」的方法有多種,你可以選擇自己習慣的方式,正常來說,如果進到對的頁面,會呈現類似下方的畫面

Godaddy網域設設定之DNS管理

接著找到「網域名稱伺服器」,這裡會紀錄現有的名稱伺服器,理論上應該會和 Cloudflare 偵測出來的一樣,此步驟請選擇「變更」

變更網域名稱伺服器

點擊「輸入我自己的名稱伺服器(進階)」

Godaddy填入自己的名稱伺服器

請把剛剛從 Cloudflare 得到的二組新名稱伺服器,貼到這邊的二個欄位,然後點擊「儲存」

輸入新的名稱伺服器

因為我的網域有做一些保護,所以會出現「名稱伺服器更新」的身份驗證畫面,請勾選「是」後點擊「繼續」,如果你沒有出現這個畫面的話那麼就略過此步驟

確認是否要更新名稱伺服器

點擊「發送密碼」,系統會發一個驗證碼到你的信箱

Gadaddy發送驗證密碼

從信箱中取得驗証碼後,回填驗證碼進行驗證

驗証密碼是否正確

到這邊就設定完成,回到「DNS管理」頁面,如果看到「紀錄」中呈現「您的名稱伺服器不是由我們託管,我們無法顯示您的DNS資料。」那大致上應該是沒有問題了,而在「網域名稱伺服器」中的資料也會變成新的,如果還是呈現舊資料的話,那麼請稍等一段時間即可

Godaddy 無法顯示DNS資訊

2.2、PChome買網址 名稱伺服器修改

如果你的網域是在PChome註冊,請參考此部分:進入到PChome買網址的後台,即可以看到你目前所有的網域名稱,選擇你想要修改的網域,並由「DNS設定與修改」的選項中進入

PChome管理我的網址介面

異動資料需要進行驗證,系統會發一封信帶有驗證碼的信件至你的EMail中,同樣的請把驗證碼回填過來進行驗證即可

PChome修改網域資料驗證密碼

通過驗證進入「設定DNS」畫面後,如果沒有特別設定,一般來說大都是使用「PChome代管DNS」的功能,畫面如下:

PChome代管DNS介面

而為了使用Cloudflare的CDN服務,請切換到「自管DNS」,然後把新取得的名稱伺服器填入後送出即可

PChome自訂DNS介面

3、基本設定

設定好網域商的名稱伺服器後,回到Cloudflare頁面,點擊「完成,請檢查名稱伺服器」,這可能需要一小段時間才會生效,但不需要真的等到24小時,以我的經驗來說,通常最慢10幾分鐘就可以完成

Cloudflare 新名稱伺服器

接著Cloudflare會帶用戶進入一些基本的設定,大部分我都是採用預設值,而每個功能的用途在網頁上都有說明,可自行查看

提高安全性

是否「自動改寫HTTPS」,我本身已有SSL連線功能,所以我選擇開啟(預設值),如果你的網站沒有SSL,在申請好SSL憑証之前,建議關閉此選項,對了,要記得按「儲存

Cloudflare 自動改寫HTTPS

「一律使用HTTPS」,同樣的,請視自己的狀況進行調整,我一樣使用預設值

是否一律使用HTTPS

最佳化效能

可縮小原始碼的大小,我個人覺得這部分很重要,是加速網站載入的關鍵之一,建議這邊「Javascript」、「CSS」、「HTML」三個選項都勾選,按「儲存」後進入下一步

是否進行網頁壓縮

再來是詢問是否要套用「Brotli」壓縮技術,這也很重要,Brotli它的效率比gzip更好更快,常被應用在各式瀏覽器的資料傳輸中,以加速網頁載入速度,沒有不開的理由,選擇「開啟」

是否進行Brotli壓縮

摘要

摘要很簡單,只是把剛剛的選擇做統一的呈現而已,沒問題的話就點擊「完成」離開

安全性設定摘要

4、大功告成!Cloudflare Speed 測試結果

上面的步驟都完成,其實就是等待「名稱伺服器」生效即可,你也可以手動點擊「檢查名稱伺服器」來進行檢查,另外,你會發現下圖的上方資訊「快速入門手冊」中,只完成了4項中的3項,其實這裡說的就是「3、基本設定」的選項,如果你沒有四項都完成,那表示應該是有某個選項忘了按「儲存」所致,回去進行設定即可

Cloudflare 檢查名稱伺服器

如果一切沒問題,你可以看到你的網域正在使用中的畫面,而且Cloudflare也會發信通知

Cloudflare 申請成功,網域運作中

點了自己新增的網域後,可以看到Cloudflare提供了相當多的分析或測試功能給用戶,因為我們關心使用了CDN服務後到底有沒讓網站載入加速,所以這裡挑「Speed」的選項來說明:第一次點擊「Speed」進行網站測速時,有可能會出現下面的錯誤訊息,基本上,在這次的測試中我總共加了三個不同的網域,其中有二個網域都呈現這個錯誤,但別緊張,稍等一下再進行測試即可

Speed測試失敗

稍等一陣子後,再進行「Speed」測速應該就可正常使用了,以下是本站網頁加速的結果,總共快了29%,而我其他的測試網域中,有超過50%的加速效果,每個網域的情況會不同

Cloudflare Speed測試,網站加速結果

小結:網站速度是會影響讀者訪問的意願的, Cloudflare CDN 服務在這方面真的有不錯的表現,除了可以幫忙做快取,增加網站的載入速度外,也可以進行DDoS的防護,值得有網站的站長一試。

延伸閱讀:
[收集文]測試網路速度的網址大集合,捉出拖慢網頁載入的兇手