Cloudflare AccessとR2でコンセプトサイトのインフラを整備した

前日までにNuxtで構築・デプロイしたoto archiveのコンセプトサイトに対して、アクセス制限、ビルド高速化、動画書き出し周りのインフラ整備を一気に進めた日。

Cloudflare Accessによるメール認証

コンセプトサイトは社外に公開したくないので、Cloudflare Accessでアクセス制限をかけた。

これでサイトにアクセスすると、まずメールアドレスの入力を求められ、ワンタイムPINがメールで届く仕組みになる。パスワード管理が不要で、招待したい相手にはメールアドレスを登録するだけ。

無料プラン（Zero Trust Free）で50ユーザーまで使える。これはアカウント全体の合計なので、複数サイトに適用する場合は上限に注意。

Cloudflare Pagesに oto-concept プロジェクトを作成してデプロイした。前日のデプロイスクリプトをそのまま使い、カスタムドメインに concept.otoarchive.com を紐付けて完了。

コンセプトサイトには5,850件のライブラリデータがあり、それぞれに個別ページを生成していた。SSGプリレンダリングで全ルートをビルドすると時間がかかる。前日時点で11,000ルート超のビルドだった。

ライブラリの一覧・詳細ページはSSGで静的生成する必要がない。データをCloudflare R2に置き、クライアントサイドで読み込むSPAモードに切り替えた。

// nuxt.config.ts
routeRules: {
  '/library/**': { ssr: false }  // SPAモードに設定
}

ライブラリデータの生成とアップロードは専用スクリプトにまとめた。

pnpm generate:library  # library.json生成 → R2アップロード

ページ数が3桁減ったのでビルドが軽くなった。ライブラリデータはR2から取得するため、データ更新時もサイト全体のリビルドが不要になるという副次的なメリットもある。

concept.otoarchive.com からR2バケット（oto-assets）のデータをフェッチできるよう、wrangler CLIでCORSルールを設定した。

wrangler r2 bucket cors set oto-assets --rules '[...]'

R2バケットに assets.otoarchive.com のカスタムドメインを設定した。R2のデフォルトURLよりも短く、将来的にCDN設定の柔軟性も確保できる。

コンセプトサイトの紹介動画を作るために、ブラウザ画面の録画方法を検討した。

Playwrightの録画機能: VP8コーデック固定で、ビットレートが約1Mbpsしか出ない。4Kコンテンツには画質が足りない
CDP（Chrome DevTools Protocol）スクリーンショット方式: フレームごとにスクリーンショットを撮って動画化する方法。4Kで2fps、1080pで5fps程度しか出ず、実用的ではない