📽️

Nuxt 4 で複数のサブサイトを1つのプロジェクトに統合する方法

に公開
Nuxt
TypeScript
Vue.js
Vite
Nuxt 3
tech

企業のウェブサイト運営において、次のようなシナリオは珍しくありません。
会社のメイン事業を公式サイトで展開しつつ、複数のサブ事業をサブサイトとして運営するケースです。

SEO や デザインガイドライン の観点から、これらのサブサイトはヘッダーやフッターの構成を共通化するなど、スタイルの統一が求められます。例えば以下のような実例があります：

このような場合、仮に4つのサブサイトをそれぞれ独立したリポジトリ／プロジェクトで構築すると、同じスタイルコードを4回コピーする必要があり、修正のたびにすべてのプロジェクトを更新しなければなりません。これは保守コストが非常に高くなります。

そこで、より理想的なアプローチは：
複数のサブサイトを1つのプロジェクトに統合し、スタイルやコンポーネントを共有することで、デザインの一貫性を確保すること です。

以下では、私が利用している Nuxt 4 を例に、この構成方法を紹介します。

プロジェクト構成

サブサイトが ai、read、wsd の3つあると仮定します。pages ディレクトリは次のように整理できます：

app/
└── pages/
    ├── ai/
    │   └── index.vue
    ├── read/
    │   └── index.vue
    ├── wsd/
    │   └── index.vue
    └── index.vue

例えばポートが 3000 の場合、各サブサイトの URL は以下のようになります：

layouts を使ったサイトごとのレイアウト管理

Nuxt には layouts ディレクトリがあり、これを利用するとサブサイトごとに異なるレイアウトを設定できます。

例：app/layouts/ai.vue

<template>
  <div>
    <Header title="AI開発" />
    <slot />
    <Footer />
  </div>
</template>

app/pages/ai/index.vue では、以下のようにレイアウトを指定します：

<script setup lang="ts">
definePageMeta({
  layout: 'ai',
})
</script>

read や wsd についても同様にレイアウトを分けて設定可能です。
また、共通のコンポーネントや画像は一元的に管理し、必要に応じてサブサイト専用のフォルダを追加すれば十分対応できます。

独立ビルドと SSG

企業サイトは SEO 対策を重視するため、ここでは SSG（静的サイト生成） を採用します。
各サブサイトを個別に静的ビルドできるように、環境変数で出力先ディレクトリを指定します。

package.json の設定

"scripts": {
  "build": "nuxt build",
  "dev": "nuxt dev --host",
  "g:ai": "cross-env PUBLIC_SUBDIR=ai nuxt generate",
  "g:read": "cross-env PUBLIC_SUBDIR=read nuxt generate",
  "g:wsd": "cross-env PUBLIC_SUBDIR=wsd nuxt generate",
  "preview": "nuxt preview",
  "postinstall": "nuxt prepare"
}

nuxt.config.ts の設定

const publicSubDir = import.meta.env.PUBLIC_SUBDIR

export default defineNuxtConfig({
  dir: {
    pages: publicSubDir ? `pages/${publicSubDir}` : undefined,
  },
  /* その他の設定 */
})

これにより、コマンドごとに対応するサブサイトのみを静的生成できるようになります。

  • 開発時 → コンポーネントやスタイルを共有でき、重複作業を削減
  • 本番ビルド時 → サブサイトを個別に静的ファイル化し、独立デプロイ可能（SEOにも有利）

Discussion