TaiwanV 網站架設

linnil1

9 min readMar 2, 2021

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

Review

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

PoiScript/HoloStats

VTubers Statistics and Data Visualization Permalink Failed to load latest commit information. Collects & visualizes…

github.com

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

把我的靜態 Vue SPA 上雲

故事是這樣的，我原本有個用 Vue 寫的靜態網站架在學校的某個個人網頁上，但是一畢業就會消失了(所以這個網站不見很久了)，最近突然想把他撿回來，不然很可惜。

linnil1.medium.com

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 找，這個規則寫在這裡

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

這個 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