【Firebase】Unity WebGLを無料で公開する手順

投稿日: 2026年4月28日 対象読者: Unity WebGLをWebに公開したいエンジニア

この記事はこんな方向け:

• Unity WebGLビルドをFirebase Hostingで公開したい方
• firebase.json の正しい設定を知りたい方
• 真っ白な画面・CORSエラーで詰まっている方

TL;DR

• Firebase Hostingは無料枠で月10GBの転送量まで使える（CDN・SSL付き）
• .wasm / .br ファイルのヘッダー設定を firebase.json に書かないと画面が真っ白になる
• Brotli圧縮で配信サイズを約70%削減できる
• firebase deploy 1コマンドでデプロイ完了

はじめに

Unity WebGLビルドを「とりあえずネットに公開したい」と思ったとき、最初の壁になるのがホスティング先の選定です。

GitHub Pages・Netlify・Vercelなど選択肢はいくつかありますが、Firebase Hosting は無料枠が大きく、設定が数ファイルで完結するため、Pose Mirrorでも採用しています。

この記事では、UnityビルドをFirebaseに公開するまでの全手順と、詰まりやすいポイントをまとめます。仕組みの詳細については 【Unity WebGL】MediaPipeで3Dポーズを動かす もあわせてご覧ください。

Firebase Hostingとは

Googleが提供する静的サイトホスティングサービスです。

項目	無料枠（Sparkプラン）
ストレージ	10GB
転送量	月10GB
カスタムドメイン	対応（無料SSL付き）
CDN	自動適用
デプロイ先URL	https://your-project.web.app

Unity WebGLビルドはWASMファイルが数十MB〜100MB超になることが多いですが、Brotli圧縮で60〜70%削減できるため、多くのプロジェクトで無料枠に収まります。

事前準備：Unity側のビルド設定

Firebase Hostingに最適なビルド設定は以下の通りです。

Player Settings → Publishing Settings:

• Compression Format: Brotli（最もサイズが小さい。Gzip比でさらに20〜30%小さい）
• Decompression Fallback: 無効（Firebase側でヘッダーを設定するため不要）

Build Settings:

• Development Build: オフ（本番ビルドは必ずオフにする）
• WebGL Template: Minimal（余分なUIを省いてファイルサイズを削減）

手順①：Firebaseプロジェクトの作成

1. Firebase Console を開く
2. 「プロジェクトを追加」をクリック
3. プロジェクト名を入力（例: pose-mirror-app）
4. Google Analyticsの設定（スキップ可）
5. 「プロジェクトを作成」をクリック

プロジェクトが作成されると your-project-id.web.app のURLが割り当てられます。

手順②：Firebase CLIでログイン・初期化

# Node.js が必要（v18以上を推奨）
npm install -g firebase-tools

# バージョン確認
firebase --version

# Googleアカウントでログイン
firebase login

# プロジェクトのルートディレクトリで初期化
firebase init hosting

初期化中に以下を設定します：

? Which Firebase project do you want to configure?
  → 作成したプロジェクトを選択

? What do you want to use as your public directory?
  → public  （Unityビルドのindex.htmlがあるフォルダ）

? Configure as a single-page app (rewrite all urls to /index.html)?
  → No

? Set up automatic builds and deploys with GitHub?
  → No（任意）

手順③：firebase.json の設定（最重要）

これが最も重要な設定です。デフォルトの firebase.json ではUnity WebGLが正しく配信されません。以下をそのままコピーして使ってください。

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "headers": [
      {
        "source": "**/*.wasm",
        "headers": [
          { "key": "Content-Type", "value": "application/wasm" }
        ]
      },
      {
        "source": "**/*.wasm.br",
        "headers": [
          { "key": "Content-Encoding", "value": "br" },
          { "key": "Content-Type", "value": "application/wasm" }
        ]
      },
      {
        "source": "**/*.framework.js.br",
        "headers": [
          { "key": "Content-Encoding", "value": "br" },
          { "key": "Content-Type", "value": "application/javascript" }
        ]
      },
      {
        "source": "**/*.data.br",
        "headers": [
          { "key": "Content-Encoding", "value": "br" },
          { "key": "Content-Type", "value": "application/octet-stream" }
        ]
      }
    ]
  }
}

なぜこの設定が必要か？

Brotli圧縮されたファイル（.br）はすでに圧縮済みの状態で配信されますが、Content-Encoding: br ヘッダーがないとブラウザは**「このファイルは圧縮されていない」と判断して展開しません**。結果として、壊れたバイナリをロードしようとして画面が真っ白になります。

また .wasm ファイルは Content-Type: application/wasm ヘッダーが必要で、これがないとブラウザがWebAssemblyとして認識しません。

手順④：デプロイ

# デプロイ実行（数十秒〜数分かかる）
firebase deploy --only hosting

# 成功時の出力例
# Hosting URL: https://your-project-id.web.app

デプロイ後、発行されたURLをブラウザで開いて動作確認します。

Chrome DevToolsでの確認方法：

1. F12 → Networkタブを開く
2. ページをリロード
3. .wasm ファイルをクリック → Headers タブを確認
4. Content-Type: application/wasm と Content-Encoding: br が表示されていればOK

手順⑤：カスタムドメインの設定（任意）

Firebase ConsoleのHostingページから「カスタムドメインを追加」で独自ドメインを設定できます。SSL証明書は自動で発行・更新されます。

1. Firebase Console → Hosting → 「カスタムドメインを追加」
2. ドメイン名を入力（例: example.com）
3. 表示されたDNSレコード（TXT・A）をドメイン管理画面に追加
4. 反映を待つ（数分〜数時間）

トラブルシューティング

画面が真っ白になる

firebase.json の .br ヘッダー設定を確認してください。Chrome DevToolsのNetworkタブで .wasm.br のResponse Headersに Content-Encoding: br が付いているか確認するのが最速の診断方法です。

ゲームは表示されるが画像・音声が読み込まれない

StreamingAssets フォルダのファイルが public に含まれているか確認してください。Firebase Hostingは静的ファイルをそのまま配信するため、ファイルのパスが一致している必要があります。

デプロイ後に古いバージョンが表示される

ブラウザのキャッシュが原因の場合があります。シークレットウィンドウで開くか、Ctrl+Shift+R でハードリロードしてください。Firebase側のキャッシュはデプロイ時に自動で無効化されます。

firebase init 後に firebase.json が上書きされた

firebase init を再度実行すると firebase.json が上書きされる場合があります。ヘッダー設定は毎回確認する習慣をつけましょう。

まとめ

• Firebase Hosting は無料・SSL・CDN付きでUnity WebGLの公開に最適
• .wasm / .br の firebase.json ヘッダー設定は必須（忘れると真っ白）
• Brotli圧縮を使うとファイルサイズを大幅に削減できる
• firebase deploy 1コマンドでデプロイ完了

ぜひ実際に Pose Mirror を開いてデプロイ後の動作を確認してみてください！

---

関連記事：

• 【Unity WebGL】MediaPipeで3Dポーズを動かす — Unity WebGLの実装解説
• 【Unity WebGL】Pose Mirrorのパフォーマンス改善3つのアプローチ — 読み込み速度の最適化

参考資料

• Firebase Hosting 公式ドキュメント
• Unity WebGL デプロイガイド（Unity公式）

← ポートフォリオ TOP へ戻る