メモ - RyuSA

技術的なメモ書きとか試してみたこと

とあるYouTube Streamerのファンサイトを作った話

この活動は自分個人の趣味であり、所属する企業や組織の立場、戦略、意見を代表するものではありません。

こんなの作ってました。たのしかった(小並感

milliooon.ryusa.app

リリースしてからしばらく経ったので、少し技術的な選定の話とかをまとめておきます。尖ったことはあまりしてないのでアレですが……🤔

Question. そもそもなんで作ったの?

Answer. 久しぶりにフロントエンド作りたかったから🤪

ここ最近はKubernetesDNSなどのインフラストラクチャーばかり触ってたので、たまにはリフレッシュしたいな〜と……

要件と技術選定を進める

今回の要件はこんな感じでした。個人プロジェクトなので自分中心で楽しくやりたいってのが理由ですね。

  • まだ触ったことがないものに挑戦したい
    • 個人開発である以上モチベを維持しやすいように新しいものに触れることを前提に
  • 安く早く済ませたい
    • 言わずもがな
  • マネージドなサーバーを持ちたくない
    • 管理したくない(怠惰
    • ホットなコンテンツを相手にする以上、もしかしたらスパイクが発生するかも……?(という想定訓練は大事)
  • デプロイ自動化が可能
    • 令和ですよ?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は、ホスティングサイトなので当然ではありますがカスタムドメインを利用してサイトを公開することができます。

vercel.com

自分のryusa.appGoogle Domainsで用意しているドメインなので、GoogleDNSにVercel向けのCNAMEだったりTXTレコードだったりを登録してVercel側にドメインの登録を完了しました。超簡単。

……ちなみにVercelにドメインの登録をすると、自動的にLet’s EncryptTLS証明書を発行してくれるようになります。マジでなにも考えなくてもTLS証明書がホストされるようになります。超簡単。

vercel.com

言語とか

今回は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そのものも消えますし、まぁ妥当かなと。

ja.reactjs.org

(IEを除く)ブラウザシェア上位2Ω(~95%)をサポートする

ファンサイトとしてホストする以上、モダンブラウザをサポートしておかないと場合によっては他の熱心なファンが応援できない可能性があります。「(レイアウト崩れを見て)なんだよーFirefoxはサポートしてくれないのかー」となっては悲しいですし、せっかくの盛り上がりに水を差してしまうでしょう。ということで今回はChromeを始めとしてブラウザシェア95%に入るブラウザをサポートすることを目標に動作検証を行いました。なのでCSSsvh@layerなどの超モダンな機能群が使えなくて少し悲しいところではありましたが……

業務ではモダンブラウザサポートなんて当然の作業ですが、個人プロジェクトで動作検証しっかりやったのは初めてでしたね……一部環境の動作検証にお手伝いいただいた方々には、改めてこの場で感謝を。ありがとうございました!(iPhone民/Samsung民)

まとめ

Vercelとフロントエンド周りのエコシステムが本当に充実しており、CI/CDの環境をサクッと構築できるおかげで手元で開発して本番デプロイまでが数分でできる世界観でした。ブランチで本番環境にデプロイするアセットを管理できるので、これであれば大規模なフロントエンド開発チームでの開発フローにも導入できそうです。

今度Cloudflare Pagesも使ってみる予定なので、もしタイミングがあれば具体的なNetlify / Vercel / Cloudflare Pages の比較ができるかもしれないですね👍


最後に、お手伝いいただけたみなさんありがとうございました。wappaさんも素敵なイラストを提供&OGP画像作成ありがとうございました。

twitter.com

久しぶりの人目に触れるプロダクトを公開し、いろんな人からの感想がもらえたのはすごく励みになりました👏ありがとうございました!