TaiwanV 網站架設

linnil1
9 min readMar 2, 2021

--

既然 vtuber 很紅,那我們就來架個 台灣Vtuber 的網站吧

Review

本文根據這個網站 https://holo.poi.cat 來做修改與介紹

老實說,前天這則故事是為了這個網站做的小 example ,介紹了 CDN 跟一些常識類的東西 (不知道 CDN 的務必先看)

Architecture

傳統的 server 長這樣,一個負責所有的事情,

然後上次講的 CDN ,就是把 HTML CSS 等等沒有 state 的資源 交給他們處理,剩下的 API 我們在處理就好了。我們把 /api/v4 的網址導向我們 server 的 IP 就好了。

或許你有疑問,最終 bottleneck 會卡在 API 上阿,對,但是當頁面的準備好了,如下圖,你就會想繼續等,而不是等個 5秒後才有畫面

下圖為最後是本 repo 的架構(其實很 general)。因為每天都會很大量的新影片,所以產生出很多圖片(Thunbnail),這個資源是動態的,塞進 CDN 會太多,所以我們用 aws 的 s3 bucket 來存這些東西。一樣的 我們用 FetchRequest 去篩選,當有 thumbnail/xx.jpg時,就去 s3 找,這個規則寫在這裡

Frontend Architecture of HoloStat

s3 bucket

就是個存放 objects 的地方,object 可以是任何東西,

我們就開個 bucket ,然後上傳東西,然後確認會動

最右邊是後來的結果,別急

接下來就是希望用程式來幫我完成,首先先拿到可以修改這個 s3 bucket 的 token https://objectivefs.com/howto/how-to-get-amazon-s3-keys

有 token 有 bucket 就可以 API calling ,這裡的機制是 AWS4 ,非常的複雜,不過可以用套件來幫忙測試自己有沒有設對,並確定 token 的 policy 要越小越好

CDN

上次講過了publish 跟 redirect。這裡我們要多 access s3 bucket,但是通常 token 不會明碼存放,這個網站就是例子,所以要在 Cloudflare 上設個 environment variable(下圖),或者是用 command line wrangler secret 來存

web

web 使用 angular 寫的,在前端的世界(?),yarn build 通常可以動,在這之前:

  • 仔細的把 Holostat改成 taiwanV
  • 把 bilibili 拿掉,
  • 把 vtuber 的資訊填上去: ID(for databse), twitter_id, youtube_id, i18n, batch(企業勢的名字如果有)
  • 人物的 thumbnail 記得下載

都整理完後,最後下 wrangler publish --env prod 跟之前一模一樣

EC2

你就想成 server 就好了

Overview

Backend Architecture of HoloStat

這個 server 其實只跑兩個東西,一個是 stat 收集 youtuber 的觀看數、訂閱數還有同接數(Concurrent users),另一個是 API server。

API server

後端都是用 rust 寫的,我非常的難改…,build 也要很久,要特別注意的點是環境變數也會被 compile 進去

  • 總之把 poi.cat改成我的 domain,
  • 有些 poi 改成 region_name(ap-northeast-1)
  • vtuber 資料(ID, youtube_id)

build 完後是個 binary 檔,會吃 DATABASE_URL 這個環境變數,其他的好像不會吃(被雷了很久)

DATABASE_URL=postgres://holostats:holostats@localhost:5432/holostats
YOUTUBE_API_KEY0=
YOUTUBE_API_KEY1=
S3_HOST=<bucket>.s3.<region>.amazonaws.com
S3_KEY_ID=
S3_ACCESS_KEY=

成功後,你可以這樣戳,然後就可以得到 JSON 的資料(你也可以先戳 localhost)

curl http://holo.poi.cat/api/v3/youtube_channels?ids=amelia -L

Note: API server 可以不加密(http only),因為 cloudflare 有做 proxying [Section 4–2 in 這個教學]

youtube_stat

youtube API 的 token 怎麼拿到可以看 這篇,拿到後當然用 python 玩玩看。雖然你圖片看到像連續的,但其實是這個程式每 X 秒跑一次的結果。

我以為會放在 crontab ,然而作者用 systemd 去管理

https://github.com/PoiScript/HoloStats/tree/master/server/systemd

使用 systemd 的 timer 去做控制,跟 crontab 比起來準確度可以到秒,下面的例子就是每 15 秒去收集一次同接數的資料

[Timer]
OnCalendar=*:*:0/15
AccuracySec=1us
Unit=holostats_stream_stat.service

Database

跳過安裝 postgres ,有很多教學

ec2 方便的是 我們需要 storage 的時候,就直接裝上去 [教學] ,然後直接使用(不需要關機),我把這個空間來放 database 的資料。

如果剛剛的 stat 有執行成功的話(你可以手動),登進去看對不對

holostats=# SELECT * from youtube_channel_view_statistic;
vtuber_id | time | value
-----------+-------------------------------+----------
ubye | 2021-02-28 21:00:00.120688+00 | 686897
miru | 2021-02-28 21:00:00.120688+00 | 17062866
miru | 2021-02-28 22:00:00.106313+00 | 17050156
ubye | 2021-02-28 22:00:00.106313+00 | 687280
miru | 2021-02-28 22:19:11.220012+00 | 17050156
ubye | 2021-02-28 22:19:11.220012+00 | 687280

pubsub

影片的資料比較特殊,在這裡我們不用 API 去一個個巡邏,而是用 subscribe 的機制,就像跳通知的感覺

https://w3c.github.io/websub/#high-level-protocol-flow

這裡的訂閱機制使用的 server 是 https://pubsubhubbub.appspot.com (這個網站還可以順便簡單的 debug)

但是不自己巡,缺點是有時沒辦法及時跟到,都要賭在那個網站沒事。

測試的時候還有很怪的事,他一口氣送了100多則通知,然後我就 504 了。(用雲機器的好處是他都幫你處理好了包括 monitor,但是這都是錢啊)

Status of EC2 and Cloudflare

Conclusion

以上為研究他的 CI/CD workflow 得出來的結論,雖沒有 document,但是該有的東西都有。

先在 local 端測試

最後把 CDN 也搞定,s3 搞定,ec2 搞定就結束了(228 連假也一起結束)

放幾個月後,再來看看流量多高,我會被 charge 多少錢

(如果是一筆不小的數目的話,有辦法小額支持嗎,我之後再研究看看)

覺得很棒的話

請按 clap 支持

網站 https://taiwanv.linnil1.me

我修改的 Repo

如果要新增 vtuber 的話,歡迎 PR(Pull Request),我這裡放的只是比較有人氣的,而且非轉生的 vtuber。 謝謝大家。

--

--

linnil1

目前做生物資訊與演算法,過去做過 Machine Vision(Deep learning),維護伺服器(k8s, docker),部分IOT(rpi, arduino)