cloudflare: 免費頻寬 x CDN proxy

像美妝邦這種pinterest-liked的網站都是圖，頻寬耗用量都非常大。所以最近在急尋著解決方案，無意間看到了cloudflare ，cloudflare講簡單一點，就是proxy，多功能的proxy。最吸引人的一點，它說頻寬不用算錢！指對進階版的服務收錢，比如說安全性和cache / route 規則！所以每一個reqeust的流程大概是：Browser → www.example.com → cloudflare dns → cloudflare proxy → your  server 。

• 必需先把 dns 指向 cloudflare，cloudflare 會依據你的設定來決定要不要把domain指向它們的proxy。所以就用這招來防駭客... 所以你的原始 ip 要保密，不然駭客就會繞過proxy來攻擊你。
• 如果一個sub domain選擇要透過cloudflare來服務，cloudflare會把靜態檔cache起來在 cdn 裡面，速度就會變超快。

cloudflare 會將 dns 匯入(需要把dns server指向它)，黃色的雲就是透過 cloudflare (使用者會先打到cloudflare的proxy)；灰色的雲就是繞過它(直接打到你的server) ▼

這是我其中一個 domain ，dns指過去大概24小時了，請看最右邊的部份，箭頭是開始設了之後，原本的波段起幅完全沒了。 ▼

因為我只有指過去 24 小時左右，保守估計可以省下 95%的頻寬，而且來源圖片原本放在美國的hostmonster，速度慢慢的，現在有cdn每個 request 都超快的。

它另外可以設規則，這就是cloudflare想要跟你收錢的地方，預設cache只有4個小時，我把它增加為一個月▼

上面的前提都是已經把jpg / css / js給分開到獨立的 sub domain ，所以設定起來可以這麼單純。如果你的網頁還是都放在同一個 domain ，可能就需要設定一堆 rule，而且網站並不會真的變快。假如使用者到你的網頁，載入 3 個項目：

• http://example.com/user-info/
• http://example.com/static/index.css
• http://example.com/static/banner.jpg

因為 cloudflare 只能控制你的 dns ，所以整個 example.com 都先打到 cloudflare 的proxy，第一個因為是動態的，所以 cloudflare 需要再打到你的 server。第二、第三個因為都是靜態檔，會透過cloudflare的cdn直接吐，速度很快。但問題就在第一個html上面。下面的測試是透過aws在日本的ec2來測試，我家在台北，是hinet。

用簡單的hello world來測一下原始的latency是多久，大約65ms左右 ▼

繞過cloudflare之後，增加了大約 2 倍以上，大約是150ms以內，感覺也還可以接受。

但一般的網頁絕對不會像是hello world這麼簡單，我隨機產生大約 30K 的字串來試試：
直接來，大約 175ms 起 ▼

繞過 cloudflare ，一樣大約要再2倍的時間，大約350ms起

靜態檔案的部份，大概會從 70 ms 降為 50 ms左右，因為有CDN。

但是如果把靜態和動態放在不同的sub domain ，好處多多，也不會需要讓 cloudflare去 route 動態資料的問題。然而html被route有時還是有好處的，比如說，不怕被攻擊、不怕被突然間的高流量給打掛，因為你可以在高流量發生時，把cache延長(不過... 真的會這麼即時嗎？)

cloudflare有公布他們的ip，如果突然被攻擊，可以透過cloudflare dns來設定流量都經過他們家，然後你自己的server只允許它們的ip進來，應該就可以了。(不過...我相信是來不及的...)

我這邊光用cloudflare的free plan就解決了流量的問題，還有 CDN 支援，導入方式也很簡單。我原本還規劃了aws s3  + cloudfront 的計畫，也曾考慮要用 share hosting 來省錢的計畫，現在都變成備案，等 cloudflare 改變政策的時候再拿來用好了。

Cloudflare