• #nuxt3
  • #cloudflare-pages
  • #deploy
  • #seo
  • #tokyo-soundscape
tokyo-onkeiメモ

Nuxt 3でサウンドアーカイブサイトを構築してCloudflare Pagesにデプロイした

前日に企画書とリポジトリの初期設定まで済ませていたサウンドアーカイブサイトを、Nuxt 3 + Nuxt Content で本格的に構築し、Cloudflare Pagesへのデプロイまで一気に進めた。

サイト構成

tokyo-onkei リポジトリの site/ ディレクトリにNuxtプロジェクトを配置した。事前に作っていたモックHTMLをベースに、以下のページ構成でコンポーネントを設計した。

  • ランディングページ（トップ）
  • 商品詳細ページ（音源の個別ページ）
  • 定点観測スポット一覧
  • 機材情報ページ
  • 利用規約 / プライバシーポリシー（日英）

利用規約とプライバシーポリシーは日本語版と英語版の両方を作成した。Nuxt Contentのマークダウンとして管理し、ルーティングで /terms /privacy と /en/terms /en/privacy に振り分ける形にした。

Nuxt 4のコンポーネント命名規則の罠

Nuxt 4（互換モード）のコンポーネント自動インポートでハマった。components/Library/LibraryCard.vue のようにディレクトリ名とファイル名のプレフィックスが重複していると、テンプレートでの呼び出し名が意図通りにならない。

# ディレクトリ構成
components/
  Library/
    LibraryCard.vue    # <LibraryLibraryCard> になってしまう
    LibraryGrid.vue    # <LibraryLibraryGrid> になってしまう

解決策として、ファイル名からディレクトリ名のプレフィックスを外す（Card.vue）か、ディレクトリを使わずフラットに配置するかの選択になった。今回はファイル名を Card.vue にしてディレクトリでスコープする方式を採用した。

Cloudflare Pagesへのデプロイ

PowerShell版デプロイスクリプト

デプロイスクリプトはbash版を最初に作ったが、WSLが起動してしまう問題があった。Windows環境ではGit BashよりPowerShell版のほうが安定するため、PowerShell版に切り替えた。

デプロイスクリプトの簡素化

tax-lpプロジェクトのデプロイスクリプトでは、ビルド前にdevサーバーを停止したり .nuxt を削除するクリーン処理を入れていたが、今回試したところそれらは不要だった。単純に pnpm build して wrangler pages deploy するだけで問題なくデプロイできた。

最終的にtax-lpと同じパターンで出力を簡潔にまとめた。ビルドログを全部表示するのではなく、成功/失敗のサマリーだけ出す方式。

wrangler の実行方式

当初はグローバルインストールの wrangler を使っていたが、devDependencies に追加して pnpm exec wrangler で実行する方式に変更した。プロジェクトごとにバージョンを固定できるので、チーム開発を見据えるとこちらのほうが安定する。

// package.json
"devDependencies": {
  "wrangler": "^3.x"
}

# デプロイスクリプト内
pnpm exec wrangler pages deploy .output/public --project-name=otoarchive

OGP / SEO設定

useSeoMeta を使ってページごとにOGPタグを設定した。

  • og:title, og:description, og:image の基本設定
  • favicon をSVGで作成（音波をモチーフにしたシンプルなデザイン）
  • apple-touch-icon も用意してiOSのホーム画面追加に対応

ドメインは otoarchive.com に設定した。Cloudflare側でカスタムドメインを紐付けて、SSL証明書の自動発行まで確認した。

機材ページのデザイン

機材情報ページでは、各機材のカードコンポーネントにAmazonの商品画像を背景として表示する形にした。画像を全面に敷いて上にテキスト情報をオーバーレイするデザイン。背景の透過度を調整して文字の可読性を確保した。

カードコンポーネントはホバー時にスケールアップするインタラクションを付けた。

.gitignore の整備

Nuxtプロジェクトで必要な除外設定を一通り整理した。

node_modules/
.nuxt/
.output/
.data/
dist/

ふりかえり

モックHTMLがあると、コンポーネント分割の判断が早い。HTMLの構造をそのままVueコンポーネントに写せるので、デザインの意図を保ったまま実装を進められた。

Nuxt 4のコンポーネント自動インポートの命名規則は、ドキュメントを読んでいても実際に動かさないと気付きにくい。ディレクトリ名がプレフィックスとして自動付与される仕様を把握しておけば回避できる。

デプロイスクリプトは最初から凝らずに最小限で始めたほうがいい。クリーン処理やサーバー停止は、実際に問題が起きてから追加すればよかった。tax-lpでは必要だったがこのプロジェクトでは不要だったように、プロジェクトごとに事情が異なる。

次のステップ

  • 音源コンテンツの追加（定点観測スポットのサンプル音源）
  • 商品詳細ページのオーディオプレーヤー実装
  • Stripe決済連携の調査