Gap撈Tech

毛記電視網站是怎樣練成的?

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

相信對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.35Mbps以及1Mbps 頻寬,簡單計條數 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

伺服器分流

玩過Lindoe嘅你,如無意外會覺得 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。

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

香港IT Blog|香港Programmer|分享IT 經驗|保持原創|重質不重量|向嘩眾取寵說不



Author image
About Gap
Hong Kong
A Hongkong programmer who loves design & coding and believes open source software business can change the world.