この記事の要点

Firebase Hosting は Google 提供の静的 + 動的ハイブリッドホスティング。SSL 自動・CDN 配信・カスタムドメイン無料 CLI 中心: npm i -g firebase-tools → firebase login → firebase init hosting → firebase deploy firebase.json で rewrites / redirects / headers / cleanUrls / i18n を制御 Cloud Functions / Cloud Run と統合で動的レンダリングも可。Next.js / Astro / Nuxt 公式サポート 料金: Spark プラン（無料）で 10 GB ストレージ + 1 日 360 MB 転送量。超過は Blaze 従量課金 プレビューチャンネルで PR 単位の URL 共有が標準 Vercel / Netlify と比較するとFirebase 他機能との連携（Auth/Firestore）が最強

Firebase Hosting とは

Firebase Hosting は Google が提供する静的・動的サイトホスティングサービスです。CDN 配信、SSL 証明書自動発行（Let's Encrypt）、独自ドメイン対応、グローバル配信が無料枠で揃っており、個人サイトから商用 SaaS まで広く使われています。

セットアップ

# 1. firebase-tools インストール
npm install -g firebase-tools
# または
curl -sL https://firebase.tools | bash

# 2. ログイン
firebase login

# 3. プロジェクトディレクトリで初期化
mkdir my-site && cd my-site
firebase init hosting

# 対話形式:
# - Use an existing project / Create new project
# - Public directory: dist (or build / public)
# - Configure as SPA: y/n
# - GitHub Actions: y/n
# - Overwrite index.html: n

# 4. デプロイ
firebase deploy --only hosting

# 5. アクセス
# https://<project-id>.web.app
# https://<project-id>.firebaseapp.com

firebase.json の構成

{
  "hosting": {
    "public": "dist",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],

    "rewrites": [
      { "source": "/api/**", "function": "api" },
      { "source": "**",      "destination": "/index.html" }
    ],

    "redirects": [
      { "source": "/old", "destination": "/new", "type": 301 }
    ],

    "headers": [
      {
        "source": "**/*.@(js|css)",
        "headers": [
          { "key": "Cache-Control", "value": "public, max-age=31536000, immutable" }
        ]
      },
      {
        "source": "**/*.html",
        "headers": [
          { "key": "Cache-Control", "value": "public, max-age=300, must-revalidate" }
        ]
      }
    ],

    "cleanUrls": true,
    "trailingSlash": false,

    "i18n": { "root": "/localized-files" }
  }
}

独自ドメイン

1. Firebase Console → Hosting → 「カスタムドメインを追加」
2. ドメイン入力（例: example.com）
3. DNS の所有者確認用 TXT レコードを追加
4. A レコード 2 つを指定値に設定
5. 数時間で SSL 証明書が自動発行（Let's Encrypt）
6. HTTPS 強制リダイレクトも自動

プレビューチャンネル

PR ごとに一意の URL を生成できる強力機能:

# 機能ブランチをプレビュー URL に
firebase hosting:channel:deploy pr-123

# → https://<project>--pr-123-xxxx.web.app
# 有効期限 7 日（変更可）

# 期限延長
firebase hosting:channel:deploy pr-123 --expires 30d

# チャンネル一覧
firebase hosting:channel:list

# 削除
firebase hosting:channel:delete pr-123

Cloud Functions と統合

静的ファイルに加えて、サーバサイドレンダリング (SSR) や API エンドポイント も同じドメインで提供可能:

// functions/index.js
const functions = require('firebase-functions');

exports.api = functions.https.onRequest((req, res) => {
  if (req.path === '/api/hello') {
    res.json({ message: 'Hello from Cloud Functions' });
  } else {
    res.status(404).send('Not Found');
  }
});

// firebase.json の rewrites で関数にルーティング
{
  "hosting": {
    "rewrites": [
      { "source": "/api/**", "function": "api" },
      { "source": "**",      "destination": "/index.html" }
    ]
  }
}

Cloud Run 統合

Docker コンテナベースの動的バックエンドを Firebase Hosting 経由で配信:

{
  "hosting": {
    "rewrites": [
      {
        "source": "/api/**",
        "run": {
          "serviceId": "my-api",
          "region": "asia-northeast1"
        }
      }
    ]
  }
}

Next.js / Nuxt / Astro 公式サポート

# Web Frameworks サポート（β → GA）
firebase experiments:enable webframeworks

# Next.js プロジェクト内で
firebase init hosting
# → Detect Next.js → 自動設定
# → 静的書出 / SSR / ISR を自動振り分け

firebase deploy
# → SSR ページは Cloud Functions / Cloud Run へ自動デプロイ

料金体系

項目	Spark (無料)	Blaze (従量)
ストレージ	10 GB	$0.026 / GB / 月
転送量	360 MB / 日	$0.15 / GB
カスタムドメイン	無料	無料
SSL 証明書	無料 (自動)	無料 (自動)
カスタムドメイン数	制限	無制限
Cloud Functions 連携	不可	可

Vercel / Netlify との比較

項目	Firebase Hosting	Vercel	Netlify
無料転送量	360 MB/日 ≒ 10.5 GB/月	100 GB/月	100 GB/月
Next.js 公式	○	◎ (本拠地)	○
Auth / DB 連携	◎ (Firebase Auth / Firestore)	△ (有料)	△ (有料)
エッジランタイム	Cloud Run / Functions	Edge Functions	Edge Functions
ビルド時間	制限なし (Spark で月制限)	6000 分/月	300 分/月
CLI 中心	◎	○	○

運用 Tips

• キャッシュ制御は Cache-Control を HTML 短く / JS・CSS 長く（fingerprint 付）に
• 大量静的ファイルは gzip / brotli 自動圧縮済
• サブパス（/blog）に別プロジェクトをホストするには Hosting Rewrites + site
• GitHub Actions と統合でPR ごと自動プレビュー
• サイトを複数登録するには firebase target:apply hosting prod my-site-prod

FAQ

Q: 無料枠の 360 MB/日は実用的？
A: 小規模なブログ・ポートフォリオなら十分。月 100 万 PV 等になると Blaze 必須。

Q: 既存 Web サーバから移行する手順は？
A: 静的ファイルを public/ にコピー → firebase deploy → DNS 切替（A レコード変更）→ 完了。

Q: WordPress を Firebase Hosting で動かせる？
A: 不可（PHP 非対応）。ヘッドレス WP API + 静的サイトジェネレータ（Next/Astro）構成なら可。