とあるYouTube Streamerのファンサイトを作った話
この活動は自分個人の趣味であり、所属する企業や組織の立場、戦略、意見を代表するものではありません。
こんなの作ってました。たのしかった(小並感
リリースしてからしばらく経ったので、少し技術的な選定の話とかをまとめておきます。尖ったことはあまりしてないのでアレですが……🤔
Question. そもそもなんで作ったの？
Answer. 久しぶりにフロントエンド作りたかったから🤪
ここ最近はKubernetesやDNSなどのインフラストラクチャーばかり触ってたので、たまにはリフレッシュしたいな〜と……
要件と技術選定を進める
今回の要件はこんな感じでした。個人プロジェクトなので自分中心で楽しくやりたいってのが理由ですね。
- まだ触ったことがないものに挑戦したい
- 個人開発である以上モチベを維持しやすいように新しいものに触れることを前提に
- 安く早く済ませたい
- 言わずもがな
- マネージドなサーバーを持ちたくない
- 管理したくない(怠惰
- ホットなコンテンツを相手にする以上、もしかしたらスパイクが発生するかも……？(という想定訓練は大事)
- デプロイ自動化が可能
- 令和ですよ？Continuous Deploymentくらいは標準搭載ですよね？？
- 万が一怒られた際にロールバックがスムーズにできるようにする(これから怒られる可能性はまだありますので、怒られたら速攻で消します)
- ガイドラインを読む(超大事)
- 趣味の範囲のプロダクトだしプラットフォームにも準拠するようにするし……
- 二次創作ガイドライン | ホロライブプロダクション
- ガイドラインを読む(大事なことなので(ry
- ガイドラインを読む(超大事なことなので(ry
ということを前提に技術選定を進めました。
プラットフォーム
まずはプラットフォームの選定。今回のコンテンツ的には静的なもので十分(=バックエンドで動的にコンテンツを生成する必要がない)のでサーバーどころかLambdaすら不要。単純なSPA等の静的ファイル配信ができればOKです。
そこで今回はNetlifyかVercelかCloudflare Pagesのいずれかをプラットフォームとして使おうかなと🤔Netlify / Vercel / Cloudflare Pages はいずれもフロントエンドホスティングサービスで、ReactやVueなどで作ったSPAなどをホスティング＆CDN配信してくれるとても素敵なサービスたちです。……が、実はNetlifyはかつて使ったことがあり、いろんなところで話題に聞くVercelが気になったので今回はまったく触ったことがないVercelでホストすることに決めました👀ごめんねCloudflare Pages
ドメイン名とか証明書とか
このファンサイトは二次創作のプロダクトであり、万が一ご本家様とドメイン名争奪戦が起こっては大変なので自分のドメインryusa.appからのサブドメインを切り出しました。
Vercelは、ホスティングサイトなので当然ではありますがカスタムドメインを利用してサイトを公開することができます。
自分のryusa.appはGoogle Domainsで用意しているドメインなので、GoogleのDNSにVercel向けのCNAMEだったりTXTレコードだったりを登録してVercel側にドメインの登録を完了しました。超簡単。
……ちなみにVercelにドメインの登録をすると、自動的にLet’s EncryptでTLS証明書を発行してくれるようになります。マジでなにも考えなくてもTLS証明書がホストされるようになります。超簡単。
言語とか
今回はTypeScript/Reactベースで実装することを決定しました。最初は今アツいSvelteで行こうかと思いましたが、React 18がちょうど出たタイミングだったので波に乗るなら今だ！！と思って今回はReactベースにしました。Svelteはまた今度ね……🥰また最初はSPAとしてビルドしようと思っていましたが、フロントエンドの規模的にそこまで大きくなく、かつ動的なAPI呼び出しも発生しないことを踏まえると静的ビルドで十分と判断し、今回はまだ触ったことのないGatsbyを利用することにしました。
ちなみに、実装中に検証としてExperimentalで公開されてるReactのServer Componentも触ってみましたがかなり良さげでした。そこまでコストかけずにバンドルサイズを減らせるのは強い……！ただ今回は検証の時間がそこまでなかったので見送り……
CI/CD
GitHub ActionでビルドしてVercel側で自動デプロイ……というのが当初の予定でしたが、実はそもそもVercel側にGitリポジトリをfetchして自動ビルドをかける機能が存在しているんですよね。自分は知らなかったのですが、Vercelにはリポジトリを連携するとリポジトリの中身をチェックして自動的にビルドコマンドとデプロイコマンドを生成してくれる神機能が付いていました。
実装周りとか
そんな難しいことしてないし特に書くものなくね？？と思っていましたが、個人的に気を配ったことだけ……
IEのサポートを、しない
力強く！
日本はやたらIEシェアが高いらしいですが、別にお仕事でもないプライベートプロジェクトなのでIE対応はしませんでした。React 18からIEのサポートも切れることですしIEそのものも消えますし、まぁ妥当かなと。
(IEを除く)ブラウザシェア上位 95% を(目安に)サポートする
ファンサイトとしてホストする以上、モダンブラウザをサポートしておかないと場合によっては他の熱心なファンが応援できない可能性があります。「(レイアウト崩れを見て)なんだよーFirefoxはサポートしてくれないのかー」となっては悲しいですし、せっかくの盛り上がりに水を差してしまうでしょう。ということで今回はChromeを始めとしてブラウザシェア95%に入るブラウザをサポートすることを目標に動作検証を行いました。なのでCSSのsvhや@layerなどの超モダンな機能群が使えなくて少し悲しいところではありましたが……
業務ではモダンブラウザサポートなんて当然の作業ですが、個人プロジェクトで動作検証しっかりやったのは初めてでしたね……一部環境の動作検証にお手伝いいただいた方々には、改めてこの場で感謝を。ありがとうございました！(iPhone民/Samsung民)
まとめ
Vercelとフロントエンド周りのエコシステムが本当に充実しており、CI/CDの環境をサクッと構築できるおかげで手元で開発して本番デプロイまでが数分でできる世界観でした。ブランチで本番環境にデプロイするアセットを管理できるので、これであれば大規模なフロントエンド開発チームでの開発フローにも導入できそうです。
今度Cloudflare Pagesも使ってみる予定なので、もしタイミングがあれば具体的なNetlify / Vercel / Cloudflare Pages の比較ができるかもしれないですね👍
最後に、お手伝いいただけたみなさんありがとうございました。wappaさんも素敵なイラストを提供＆OGP画像作成ありがとうございました。
久しぶりの人目に触れるプロダクトを公開し、いろんな人からの感想がもらえたのはすごく励みになりました👏ありがとうございました！
