Firebase Hostingでマルチサイト運用

← ホームに戻る

Firebase Hostingを使って複数のプロジェクトを管理していると、「1つのFirebaseプロジェクトで複数のサイトをホストしたい」という要望が出てきます。今回は、その実現方法とカスタムドメインの設定について詳しく解説します。

なぜマルチサイト運用が必要か

複数のWebサイトを運営する際、それぞれに別々のFirebaseプロジェクトを作成すると：

プロジェクトの管理が煩雑になる
請求が分散してコスト管理が困難
共通のリソース（データベース、認証など）を共有しづらい

Firebase Hostingのマルチサイト機能を使えば、これらの問題を解決できます。

マルチサイトの設定方法

1. 新しいサイトを作成

まず、Firebase CLIを使って新しいサイトを作成します：

# 新しいサイトを作成
firebase hosting:sites:create blog-site

# サイト一覧を確認
firebase hosting:sites:list
      

2. ターゲットの設定

作成したサイトをプロジェクトのターゲットとして設定します：

# ターゲットを設定
firebase target:apply hosting blog blog-site
firebase target:apply hosting main main-site
      

3. firebase.jsonの設定

firebase.jsonファイルで、各サイトの設定を定義します：

{
  "hosting": [
    {
      "target": "main",
      "public": "dist/main",
      "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
      "rewrites": [
        {
          "source": "**",
          "destination": "/index.html"
        }
      ]
    },
    {
      "target": "blog",
      "public": "dist/blog",
      "ignore": ["firebase.json", "**/.*", "**/node_modules/**"]
    }
  ]
}
      

異なるリポジトリからのデプロイ

興味深いことに、同じFirebaseプロジェクトに対して、異なるGitリポジトリから別々のサイトにデプロイすることも可能です。

リポジトリAの設定

# .firebasercファイル
{
  "projects": {
    "default": "my-project"
  },
  "targets": {
    "my-project": {
      "hosting": {
        "app": ["app-site"]
      }
    }
  }
}
      

リポジトリBの設定

# .firebasercファイル
{
  "projects": {
    "default": "my-project"
  },
  "targets": {
    "my-project": {
      "hosting": {
        "blog": ["blog-site"]
      }
    }
  }
}
      

ポイント
各リポジトリから独立してデプロイできるため、チーム開発やマイクロフロントエンド構成に最適です。

カスタムドメインの設定

1. Firebaseコンソールでの設定

Firebaseコンソールにアクセス
Hosting セクションを開く
対象のサイトを選択
「カスタムドメインを追加」をクリック

2. DNS設定

ドメインプロバイダーで以下のレコードを設定します：

# Aレコード（ルートドメインの場合）
Type: A
Name: @
Value: 199.36.158.100

# CNAMEレコード（サブドメインの場合）
Type: CNAME
Name: blog
Value: blog-site.web.app
      

⚠️ 注意
DNS設定の反映には最大48時間かかる場合があります。通常は数分から数時間で反映されます。

CI/CDパイプラインとの統合

GitHub Actionsを使った自動デプロイの設定例：

name: Deploy to Firebase Hosting

on:
  push:
    branches: [ main ]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      
      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '18'
      
      - name: Install dependencies
        run: npm ci
      
      - name: Build
        run: npm run build
      
      - name: Deploy to Firebase
        uses: w9jds/firebase-action@master
        with:
          args: deploy --only hosting:blog
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
      

パフォーマンス最適化のTips

キャッシュ設定 - 静的アセットに適切なキャッシュヘッダーを設定
CDN活用 - Firebase HostingのグローバルCDNを最大限活用
圧縮 - gzipやBrotli圧縮を有効化
画像最適化 - WebPフォーマットの使用を検討

トラブルシューティング

よくある問題と解決方法

問題： Deploy target not configured
解決： firebase target:apply hosting [ターゲット名] [サイト名] を実行

問題： Permission denied
解決： firebase login --reauth で再認証

まとめ

Firebase Hostingのマルチサイト機能を使うことで、効率的に複数のWebサイトを管理できます。特に以下のようなケースで威力を発揮します：

本番環境とステージング環境の分離
複数のプロダクトの統合管理
マイクロフロントエンドアーキテクチャ
A/Bテスト環境の構築

このブログ自体も、Involyと同じFirebaseプロジェクトでマルチサイト構成として運用しています。実践的な運用ノウハウは、今後も共有していく予定です。

← ホームに戻る