古語常道:「知己知彼,百戰百勝。」呢句無論古代或現在都十分適合形容任何競爭行為,所以今日就解構一下毛記電視網站。

相信對Web有啲認識嘅朋友,見到上面幅橫額己經初步知道鍊成毛記嘅「腎者之石」;至於,唔熟Web但又有興趣想知嘅朋友,我呢篇文已經標記咗有關一啲Goolge Tips 比你自學;另外唔熟Web又無興趣自學嘅朋友,背左啲重點佢都足夠可以係啲 Tech 人面前吹到兩咀;最後如果你係或者認識餵養廢青嘅毛孩,我有少少建議比番毛記 Tech Team,請代為轉達。

2015年,一間公司擁有一個公司網站已成為基本中的基本。試問喺 2015 年連 Google 都搵唔到嘅公司,你會有咩感覺?好喇就算 Google 到你公司,然後入到去得幾行字,幾年無 Update 過,你又會有咩感覺?

網站鍊成陣的基本元素

要喺 2015 年鍊成一個受大眾歡迎嘅網站,我認為有四個不可或缺嘅基本元素。

  • 內容夠爆、夠獨家
  • 網站穩定、低延遲
  • 設計簡潔易用
  • Mobile Friendly

第一點「內容夠爆、夠獨家」,我已經係 《為何100毛要鍊成毛記電視網站?》 同大家講解左。

跟住黎落我會集中講解第二點,我會以技術嘅角度解構整個毛記電視網站嘅整個技術架構能否做到「網站穩定、低延遲」。

毛記電視嘅最大賣點就係佢地拍嘅片,一條夠爆嘅片一日可能有幾十萬個廢青睇,計埋有啲廢青有機會翻焯以前啲片,以平均每段片三分鐘計,推斷 Peak Minute 可能同時有一萬個廢青睇緊毛記嘅片。

上回 提到毛記電視嘅軟硬件只係介乎二、三千蚊左右*,究竟毛記點用呢筆錢去處理呢一批咁大嘅流量呢?如果你喺 Tech 人,可能有一刻你會覺得呢個價無可能做到,咁你就要睇下究竟毛記點做。

**數字為筆者揣測,未向有關公司核實,與實際數字可能有出入,不能作準。*Google Tips : Peak Concurrent User

播片系統的迷思

講到播片,史上最強大莫過於 Youtube,完全免費又無廣告(如果上載者無開營利模式),但睇過毛記電視嘅都應該知道,毛片並唔係先上載到 Youtube 然後再到嵌入自己網站。原因係如果要達至收支平衡甚至營利,Youtube 的廣告分紅計劃絕對做唔夠數!

唔用 Youtube 唯有自己搞?要處理 Peak Minute 一萬個廢青,假設一條片平均三分鐘,計算最壞情況平均每分鐘多一萬人開始睇片,以 SD 及 HD 畫質分消耗0.35 Mbps以及 1 Mbps 頻寬,簡單計條數 SD:HD 人數為 1:1

(1+0.3.5)Mbps x (10000 x 3) ÷ 2 = 20.25Gbps

單單租條商用寬頻要有 20Gbps 加上伺服器的配搭相信並唔係二、三千蚊一個月可以做到嘅事,所以王維基當日為左搞香港電視向 HKIX 租 220Gbps 以及向其它 ISP供應商租 130 Gbps,真係好佩服佢嘅勇氣。 毛記電視唔係用 Youtube、Facebook 又唔係自己搞,咁個播片系統點搞呀?

毛視電視嘅定位並唔係做直播串流,並唔需要好似王維基咁,佢地只喺拍完剪完再放出街。

高效的企業方案

Vimeo,一間提供用戶上載及分享影片嘅巨型網站,走嘅路線同Youtube 有點不一樣,Vimeo提供三個選擇予不同上載用量比用家:

  • Basic - Free, 500MB Upload/Week
  • Plus  - 59.95 USD/Yr, 5GB Upload/Week
  • Pro   - 199.99 USD/Yr, 20GB Upload/Week

網站的 FAQ 內 Vimeo Pro 更加註明係可以無限播放HD畫質,無任何限制!以下是節錄於 Vimeo FAQ

Vimeo PRO gives you unlimited HD plays. That’s right — THERE ARE NO PLAY LIMITS!!!

講咁耐,無錯!毛記電視就係用咗 Vimeo 黎做佢地嘅影片貨倉,一個非常節省成本以及嘅方法,每個月講緊大約 140蚊, Vimeo 背後幫你哂一個播片系統應有嘅功能 CDN、Cluster、Storage BackUp、Analytic、Domain Protection,真係抵到爛!最值得一提嘅喺,我測試過 Vimeo 嘅CDN,真係估都估唔到,香港竟然喺其中一個 CDN Location (租 PCCW HKT)!


Google Tips : CDN, Web Cluster

以下係一則幻想故事,如有雷同,實屬不幸!


幻想故事-香港的網站報價篇

阿弱: 「喂,阿強,有份 Tender 返左黎話巫記想起個網站 可以頂到同時一萬人睇同一條片嘅影片 + 即時新聞網!每個月會大概掟幾十條 720p上去,要報個價比人我地收幾多!」

阿強:「碎料啦,十年前我都做過一個同時頂到十萬人睇嘅網站啦,拿買部新Server R720XD,64GB RAM,要放片嘛比夠 10 個 TB 佢,實掂!你因間得閒去Dell 個網站禁下,睇下要幾錢啦! 」

阿弱: 「但係佢地好似主打播片,我地公司條線得 10Gbps 咋喎,會唔會唔夠Bandwidth 呀?」

阿強:「係咩?咁咪租條大水喉囉,之前睇新聞王維基都係咁租HKIX做電視姐,呢個大客黎喎!咁你 Dell 嗰度記得搭番多幾張 Network 卡」

阿弱:「係唻係唻,呢單大野一定要接到,一定 Cap 到大把水!咁除左買機呢?」

阿強:「網頁嗰度是但搞個 WordPress,裝個 Upload Video嘅 Plugin,Cus 兩下個Theme就得啦! 呢度收佢兩萬一個月啦!Set機呀、域名呀、其它雜費嗰啲再加兩萬,你報三個月之後你計埋部R720XD乘多 50% 報比佢啦!HKIX 條數佢地自己俾番,我地收番兩萬蚊中介費啦!」

(翌日)

阿弱:「計到喇!差唔多四十萬左右!然後每個月二、三萬蚊到」

阿強:「掂啦,呢啲大Site,應該得我地呢啲大公司先夠實力Handle到架咋,做新聞,四十萬小數目啦!你同佢地嗰邊啲人又有關係,實食無黐牙啦!」

(數星期後)
阿弱:「阿強呀,岩岩係巫記收到風,好似判比咗個 Freelancer做,計埋好似 3 萬蚊然後每個月兩、三千蚊租機。」

阿強:「唉!又有啲人係度做爛市,3萬蚊買部機都唔只啦,留名睇下佢地交咩垃圾出黎比巫記啦。到時咪又係搵番我地!」

-完-

Google Tips : WordPress, Web Hosting Bandwidth, HKTV HKIX


香港聽聞有一類IT高層懷疑已經被寄生獸食咗個大腦,大腦𥚃面根本唔存在「第三方提供者」,依然覺得乜都自己做就最好,莫視市場需要、成本、可行性,設計嗰陣點都要「靠自己」,之後報個天價比啲客人,認為客人提出的二、三千蚊成本一個月絕對無可能做到;最慘係啲非 Tech 嘅客人會信以為,真係覺得「無得做」,然後退而求其次,呢類被寄生獸入侵咗大腦嘅人扼殺左香港所有同IT有關嘅週邊業務。

以起一個Vimeo Pro同樣級數嘅伺服器為例,要做齊「CDN、Storage BackUp、Video Optimization、Video Compression、Analytic、Domain Protection」嘅效果,淨計開發人工,用五萬蚊個月請兩個人番黎做三個月都未必搞得掂!

最諷刺嘅係,其實只要做少少 Research,走出自己個框框,平均月租 140蚊嘅 Vimeo Pro,再加上做少少 Vimeo Pro 與網頁嘅整合工作,不出三日毛記電視嘅播片系統就可以完成,淨低就係做普通網頁設計咁做!

毛記利用 Vimeo 擺片上個網站,慳咗極多的系統資源,所以要用黎Host 毛記電視嘅網站嘅伺服器都唔需要太強。

伺服器架構

毛記的伺服器並不是由自己架構,而是租其它公司的VPS (虛擬伺服器)!

如果毛記要處理幾千個廢青 Concurrent Connection,並唔可能話好似我咁租個40HKD 嘅VPS就搞掂,不過亦唔係話租一部好勁嘅VPS就係最佳嘅解決方法。一般無需大量運算嘅網站,主流都係租幾部機去取代一次過租一部勁嘅機。

Google Tips: Web Concurrent Connection, Vertical Scaling, Horizontal Scaling

根據我實際測試,毛記租咗4部VPS然後再利用 Load Balancer 根據伺服器狀態,將啲Connection指落不同的VPS內!以下係測試結果:


伺服器一 139.162.27.16

伺服器二 139.162.24.24

伺服器三 139.162.27.22

伺服器四 139.162.16.28

由於毛記係 Vimeo Pro度設定域名鎖定,所有片只可以由 tvmost.com.hk 域名播出,所以如果你用以上嘅連結走入毛記電視網站,會導致無法觀看影片,如圖:

只要翻查 IP 位址,能夠確定 VPS Provider 是 Linode:

Linode 收費如下:

純粹根據潛在用戶計算,估計毛記租嘅呢四部好大機會紅線間住嘅Linode 4GB*,雖然未知道毛記背後嘅DataBase 係點運作,不過係現有嘅資料可以估算一下毛記網站每月最低開支:

Linode 4GB x 4 + Vimeo Pro
= 40 x 4 + 199/12
= 177 USD/month

**數字皆為筆者揣測,未向有關公司核實,與實際數字可能有出入,不能作準。*

Google Tips: VPS, Load Balancer, DataBase

伺服器分流

玩過 Linode 嘅你,如無意外會覺得 Load Balancer 會採用 Linode 提供的 Node Balancer,我本來都以為係,點知再睇真啲佢個域名用緊 Amazon Web Service (Amazon Route 53),

心諗:「呢個人相當有嫌疑!」!一於「幫朕Check下」,發現毛視電視採用嘅係 DNS Round Robin 唔係我估計嘅 Hardware Load Balancing!

用 DNS Round Robin 雖然好容易搞好吸引,但純粹用佢黎做分流有一個致命缺點;以毛記為例,如果其中一部VPS意外地死咗,因為 DNS Record 依然存在死咗嘅VPS IP Adress,廢青上 tvmost.com.hk 就會有 25%機會去到部死機度變成「完全上唔到」,做唔到 High Availability。

Google Tips: Amazon Route 53, HAProxy, DNS, DNS Load Balancing

網頁架構

上回提到

好可惜香港太細太唔重視IT,一間公司如果用新技術會好難請到合適人選,所以大多數公司起網站多數用最「傳統」嘅技術,毛記亦受呢一個限制。

經過簡單測試,留意紅線間低嘅地方,就能夠確定伺服器用 Debian Linux 系統配搭 Nginx 1.2.1 + PHP 5.4.39,呢個組合可算係十分常見。

作為一個 Programmer 見到毛記電視用 PHP 做Web,當然想知道背後用緊邊種 PHP Framework,一於 Hack 下啲 Error Page 睇下有無蛛絲馬跡,一試之下發現毛記其中兩部 Web Server 唔小心開左Debug Mode ==(毛孩要注意喇)==! 根據我經驗,一眼就睇得出係用左 Codeigniter!

知道左毛記背後用 Codeigniter 無乜驚喜,因為近年PHP有個後起之秀,受廣泛PHP Programmer 討論以及轉用-Laravel,如果比著我,新嘅Project一定會用 Laravel!

作為一個理科人,尤其重視數據、趨勢,所以我最鐘意就係玩 Google Trend 做比較,因為佢係最有說服力嘅趨勢圖表,以下係幾款最出名嘅 PHP Framework趨勢:

圖中所見,Laravel(黃線) 係2012年開始急速上升,於 2014 年已經超越Codeigniter(藍線)成為第最受注目的 PHP Framework,其急升速度就連 Google 都預測唔到 Laravel 未來嘅走勢(虛線)。

其實 Codeigniter 亦都係一個十分好的 PHP Framework,勝在簡單Learning Curve(LC)低易上手易請人,做一啲簡單嘅網站係一個不錯嘅選擇!相反,Laravel LC 比較高,但一旦過左個 LC 嗰幅高牆,Laravel 既Productivity 比 Codeigniter 更高,所以如果要做複雜度比較高嘅中至大型網站,Laravel 會係一個更好嘅選揀。

Google Tips: Best PHP Framework, Codeigniter, Laravel, Learning Curve effect

總結

總括而言,毛記電視網站嘅努力大家都有目共睹,作為一個網站雖然有時有啲好爆嘅片例如鄭子誠嗰條,偶爾會出現 Load 唔到條片,不過也不會成個網去唔到,整體而言非常穩定以及低延遲。

毛記電視網站的架構重點

  • 採用 Vimeo 作為他們的播片系統
  • 採用 Amazon Route 53 的服務
  • 採用 4 部 Linode VPS(虛擬伺服器) 平均分擔流量

古語常道:「知己知彼,百戰百勝。」

如果你係Tech人,記得分享比你嘅同事、客人、身邊嘅Tech人,一齊帶動香港 IT 走入專業時代,踢走固步自封的魔爪!

如果你唔算係Tech人,但想更多人了解100毛,可以返回上一章再分享《為何100毛要鍊成毛記電視網站?》| Gap撈Tech

如果日後想睇更多技術分享 Post,只需要由 Mon 嘅上方拉到下方(滑鼠則向上捲動),再係右上角讚好 Facebook 專頁,跟貼每一個 Post


給毛記Tech Team的技術建議

先將兩部 Web Server (139.162.16.28、139.162.27.22)  Codeigniter 轉為 Production Mode

改用 RESTful API 以方便日後制作手機 App 時不需重寫現有的 API。
因為現時的API使用舊式的方法利用 Backend Template engine 預先 generate HTML Code,但因手機 App 的出現,這寫法已經過時,並有以下三大缺點:

  1. 缺乏彈性,日後如果做 Native 手機App基本上沒可能重覆使用,要重新寫新的 API 給手機,兩個 API 做類近的事,代表花費了不必要的時間去 Develop & Maintain 兩條 API。
  2. 大大提升流量亦提高了延遲,因為 Payload 包含 HTML Code,提高了每個Response 的大小,
  3. 因為嵌入 HTML Code,提高了每個 Reponse 的複雜性,減低 Readability

其中一個高效以及兼容性最高的做法是利用 FrontEnd Template Engine - Handlebars 取代現有在 Backend generate 的方法。

  • 可考慮更換 DNS Round Robin 的 Load Balancing 方法,雖然這方法比較簡單,但犧牲了Availability。 鑑於更改 DNS需時間(TTL),以及缺乏 Health Check,User 依然有機會進入已經死掉嘅VPS。相反如果採用 Hardware Load Balancing 雖然 Setting 比較複雜但能夠提升 Availability,例如 Linode 提供的 Node Balancer 設有 Passive and Active Health Checks,如果其中一部 VPS 死咗,Balancer 就不會將User 帶到已死的VPS。