[最詳細教學] Cloudflare 最強大的免費CDN服務,有效減輕伺服器負擔

有架站經驗的朋友可能也聽過 CDN 或者 Cloudflare 這兩個名稱,CDN 是什麼呢?CDN 的 全名是「內容傳遞網路」(Content Delivery Network 或 Content Distribution Network),簡單來說就是 CDN 伺服器會分散於全球各地,而這些伺服器會去抓取你網站的內容快取,而瀏覽你網站的人將 不會 直接存取在你網站上的 靜態檔案 , 而是存取快取於 Cloudflare 上的檔案,因此能有效減輕伺服器的負擔。

CDN 是什麼?

內容傳遞網路(Content delivery network或Content distribution network,常簡寫成 CDN )是指一種透過網際網路互相連接的電腦網路系統,提供高效能、可擴展性、及低成本的網路將內容傳遞給使用者。

 

CDN 原理圖 :

cdn

 

使用 CDN 的 4 個理由 :

  • 減輕伺服器負擔,適合一些租用便宜主機的人
  • 有異地備援 : 當某個伺服器故障時,系統將會調用其他鄰近地區的伺服器服務,進而提供接近 100% 的可靠度。
  • 主站伺服器被 DDoS 攻擊,也能使用 CDN 來分散頻寬。
  • 可以分散網站的資源使用,如果你存取的美國節點失效,它會在就近找一個新的節點存取資料,讓資料不間斷。

在網絡上有很多免費的 CDN 服務,其中最有名的就是 Cloudflare

使用 Cloudflare 的 6 個理由 :

  • 免費
  • 免費 PLAN 來說算穩定的啦
  • 會自動因應瀏覽者的 IP 位置 切換 CDN 伺服器,達到加速的小怪
  • 內建 DNS 編輯器 (生效速度比在域名供應商修改快)
  • 內建豐富小工具,增進瀏覽體驗和效能
  • 伺服器遍佈全世界,能有效防禦 DDoS 攻擊

好咯,介紹完 Cloudflare 和 CDN 的優點後,我們就馬上開始申請 Cloudflare CDN 服務咯~


Cloudflare 使用效果 :

使用前 :

nx

 

使用後 :

pingdom-test1

可見分數加了 4 分,載入時間加快了 1.85 秒。

分數加幅 : 4 % ; 速度加幅 : 34 %

 


 

Cloudflare 申請教學 :

服務網址 : https://www.cloudflare.com

更多資訊 : 方案比較表伺服器狀態

 

第 1 步

首先來到 註冊頁面 ,填寫個人資料,然後按 Create account now (綠色按鈕) :

  • Your email address : 你的電郵地址
  • Confirm email address : 再次輸入你的電郵地址
  • Choose a username : 你的帳號名稱
  • Password : 你的密碼
  • Confirm password : 再次輸入你的密碼
  • The legal bit : 勾選右邊同意 合約條款 的方格

step1

 

第 2 步

在輸入框裏面輸入你要使用 Cloudflare 的網址後,按 + Add website

step2

 

第 3 步

按下 + Add website 後,會見到這個頁面。

請等待倒數完畢~

step3

第 4 步

倒數完畢後,按 Continue

step3b

第 5 步

Cloudflare 會掃描你當前網域上的DNS資料,自動幫你加入。

有些會自動預設開CDN服務,有些不會。

你可以自己設定是否開啟CDN服務或是關閉,也可以自己加入卻少的資料。

亮橘色:啟用CDN,灰色:關閉CDN。點齒輪可以修改該筆紀錄的對應資料。

修改完成後,按頁面最下面的 : I’ve add all missing records, continue

step4

 

第 6 步

這時候應該會跳到一個設定的頁面

這裡很簡單,請使用下圖的設定,然後按 Continue

大家可以放心,我們等等會修改這些設定的細節

step5

 

第 7 步

接下來就是修改域名的 Nameserver

在這裡就是把原本的 Nameserver 修改為 :

ada.ns.cloudflare.com 和 theo.ns.cloudflare.com

然後刪除多餘的 Nameserver

step6

第 8 步

在修改 Nameserver 這裡我就拿我的域名供應商 : GoDaddy 來做示範

首先 來到 Domain Details 的設定頁面

然後按 Nameserver 選項的 Manage

step7

第 9 步

在 Nameserver Settings 設定視窗

按 Edit Nameservers 來修改 Nameserver

如需要刪除 Nameserver,

例如我想刪除 2 號 Nameserver,

那按在 2 號欄位最右邊的交叉,

就能刪除多餘的 Nameserver。

step8

 

第 10 步

在這裡就請輸入在 第 7 步 Cloudflare 要求的 Nameserver

例如我需要輸入 :

ada.ns.cloudflare.com 和 theo.ns.cloudflare.com

修改完成後,請按 OK ~

整個 Cloudflare 申請教學就完成咯~

step9


Cloudflare 設定教學 :

首先需要進入 Cloudflare 的設定頁面 :

Cloudflare 裏面的 Websites 頁面,按你的網站右邊的齒輪圖示,

然後按 CloufFlare settings

use1

1 . Setting overviews 分頁 :

use2

  • Security Profile : 安全性設定檔,因為我們是自己手動設置,因此這裡不需要動。
  • Performance Profile : 性能設定檔,因為我們是自己手動設置,因此這裡不需要動。
  • Cache Purge : 按 Purge cache 來清除 Cloudflare 幫你儲存的快取,按 Purge single file 來指定要清除快取的檔案
  • Development Mode : 開發者模式,這裡開啟了將會暫停 Cloudflare 為你進行快取
  • Automatic IPv6 : 開啟 IPv6 
  • Pseudo IPv4 : 如果開啟了,那就算使用 IPv6 來進行連線,也會強制轉換成 IPv4 的連線

 

use3

  • SPDY : 付費功能(但是免費版預設是開啟的…),新一代的傳輸協定,網頁載入更快
  • Always Online : 開啟了這個功能的話,就是你的伺服器下線/關機,Cloudflare 就會顯示快取了的網頁
  • IP Geolocation : 開啟了這個功能後,Cloudflare 會自動辨識瀏覽者的所在地,並透過 Header 傳送國家號碼
  • Google Analytics : 如網站有使用 Google Analytics 的話,請儘快開啟,以免統計數據出錯。
  • SSL : 為你的網站開啟 SSL (https://) 加密功能,這裡有 4 個選項: Off, Flexible SSL, Full SSL 和 Full SSL (Strict)。Off 為關閉加密, Flexible SSL 為開啟瀏覽者和 Cloudflare 伺服器之間的加密協定,Full SSL 為開啟 瀏覽者, Cloudflare 伺服器 和 網站主機直接的加密協定,但需要自行簽發 SSL 認證,Full SSL (Strict) 同 Full SSL,但 SSL 認證由 Cloudflare 簽發。
  • Mobile Redirect : 付費功能,當瀏覽者在手機上瀏覽網站的時候,將會重新導向到選擇的子域名
  • Client Maximum Upload Size : 瀏覽者在網站上的最大檔案上傳大小

2 . Security Settings 分頁 :

use4

  • Advance DDoS protection : 付費功能,更強的 DDoS 攻擊防禦。
  • Basic protection level : 安全性設定強度,這裡不用設定,等等會在下面的設定細節。
  • Challenge passage TTL : 瀏覽者經過驗證後,多久後才需要再次驗證。
  • E-mail address obfuscation : 向機械人隱藏網站裏面的任何 E-main 地址
  • Server side exclude (SSE) : 自動向被 Cloudflare 識別出來的惡意訪客隱藏網站內容。
  • Browser integrity check : 透過瀏覽器的 User-Agent 檢查瀏覽者是否機械人。
  • Hotlink protection : 開啟後會保護鏈接,防止盜鏈。
  • Advanced security (Web Application Firewall) : 付費功能,更強大的安全保護。

3 . Performance settings 分頁 :

use

  • Caching level : 緩存模式,有 3 個選項 – Aggressive (最強) , Simplified (簡單) 和 Basic (基本)
  • Minimum expire TTL : Cloudflare 的緩存在訪客電腦上的存在時間
  • Auto Minify : JS, CSS 和 HTML 壓縮,建議開啟
  • Rocket Loader : 非同步加載 JS ,千萬不要開,開了會造成網頁部分 JS 出現問題

Cloudflare 最佳設定 :

1 . Setting overviews 分頁 :

  • Development Mode : Off
  • Automatic IPv6 : On
  • Pseudo IPv4 : Off
  • SPDY : Enable
  • Always Online : On
  • IP Geolocation : On
  • Google Analytics : 開啟
  • SSL : Flexible SSL
  • Mobile Redirect : Off
  • Client Maximum Upload Size : 100 MB

2 . Security Settings 分頁 :

  • Advance DDoS protection : Off
  • Basic protection level : Low
  • Challenge passage TTL : 1 day
  • E-mail address obfuscation : On
  • Server side exclude (SSE) : On
  • Browser integrity check : On
  • Hotlink protection : Off
  • Advanced security (Web Application Firewall) : Off

3 . Performance settings 分頁 :

  • Caching level : Aggressive
  • Minimum expire TTL : 2 days
  • Auto Minify : 全開
  • Rocket Loader : Off

Cloudflare 統計數據 :

Cloudflare 內建了類似 Google Analytics 的 統計服務,大家可以直接在 Cloudflare 首頁按 Dashboards 來開啟統計數據頁面。

anal

 

在這裡就可以看到 Cloudflare 為你的網站節省了多少頻寬和請求。除此之外,還能看到搜尋引擎的 Bot 的抓去數目和 威脅的瀏覽數目。

不過值得注意的是,節省了的頻寬的 Pie Chart 有 BUG(?),在寫這篇文章的時候,節省了的頻寬竟然變成了負數 Orz

所以還是建議大家使用 Google Analytics,Cloudflare 這個統計只能用作參考用喔~

broken-pie


Cloudflare 威脅控制 :

Cloudflare 有一個值得讚讚的功能,就是 – Thread Control

block

在這裡,大家可以看到頁面下面有一個列表叫作 : Trust list

Trust list 裏面的都是信任的 IP 位置 (懶人包 : 白名單)

如需要把 IP 封鎖(加入到黑名單),只要按一下右邊的的 + BLOCK 紅色按鈕,就能把 IP 封鎖掉

block-list

封鎖 IP 後,可以在下面的 Block list 看到已經封鎖的 IP,只要按一下右邊的 + TRUST 按鈕,就能在黑名單移除 IP。

除了信任/封鎖 Cloudflare 偵測到的 IP 之外,也可以信任/封鎖自訂的 IP,

只需要在上面的 Add cunstom rule 輸入框裏面,輸入欲信任/封鎖的 IP,

再按 BLOCK + (封鎖) 或 TRUST + (信任),

就能信任/封鎖自訂的 IP。


Cloudflare 小工具 :

Cloudflare 小工具頁面 : https://www.cloudflare.com/cloudflare-apps

也可自行在 Cloudflare 首頁按 Apps 打開小工具頁面

Cloudflare 有很多實用的小工具,均能有效優化網站和增進用戶體驗,

由於小工具數量眾多,因此小N我只會介紹其中幾個,其他的就讓你們自己發掘咯~

 

1. ScrapeShield

scrapeshield

這個小工具的作用是用來保護你的網站的內容。

  • Page content protection : 保護你網站頁面的內容
  • Block Pinterest : 防止圖片被盜用
  • E-mail obfuscation : 其實這個就是 Cloudflare Security Setting 內建的 E-mail address obfuscation,用來保護電郵地址
  • Hotlink protection : 防盜鏈
  • Maze : 開啟後將會加入 Cloudflare 社群

2. SmartErrors

smarterror

使用了這個小工具後,只要訪客瀏覽到 404 的頁面,就會轉到 Cloudflare 提供的站內搜尋頁面,小N 我個人覺得蠻好用的QQ

使用後效果圖 :

 

3. Trumpet

trumpet

 

這個小工具可以讓大家在網頁的最上方加上一條消息欄,特別適合於公告顯示。

本站使用後效果:

trumpet-effect

 


總結 : 

在本站使用了 Cloudflare 後,網站載入速度有明顯的提升,而且 Cloudflare 提供了 DNS 編輯器, 黑白名單, 網站加速 和 防 DDoS,有這麼好用佛心的免費 CDN,還等什麼啦?

如果有任何問題/使用上的困難,請在下面留言,我會儘快幫你解答喔~

 

 



  • 我叫MT(x)

    加速的小怪(x)
    效果(o)

  • 我整理一下我的問題
    如果使用半SSL,不需要自己有證書

    但是我想請問一下,那如何讓原來打http會強迫變成https呢
    我是用虛擬主機

    謝謝您

    • 方法十分簡單
      只需要在主機目錄下的 .htaccess 檔案裏面新增以下的文字即可

      RewriteEngine On
      RewriteCond %{HTTPS} !on
      RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI}

  • 請問您!才能使用 Cloudflare 提供的 SSL 證書喔~
    這個要設定嗎?

    還是選取Full SSL (Strict) 完整SSL,或者 Flexible SSL 半完整 SSL就可以呢?

    謝謝您

    • 使用 Flexible SSL 半完整就可以了。剛剛發現了完整的SSL並不是由主機商提供,而是由域名商提供的 因此需要收費(GoDaddy的還蠻貴的)

  • 請問那個免費SSL要怎麼使用呢
    除了選取以後,主機上要隨之設定嗎

    謝謝!

    • 免費SSL是不用的喔~ 但是請 Full SSL (Strict) 完整SSL,或者 Flexible SSL 半完整 SSL,才能使用 Cloudflare 提供的 SSL 證書喔~

      不然就要在自己的主機上簽發證書~

      希望能解答你的問題~