メインコンテンツまでスキップ

第06章：Preview Channel入門（プレビューURLを作る）🔎

この章では、本番（live）を触らずに「見せてOKなURL」をサクッと作ります✨ Firebase Hosting には live チャンネルと、追加で作れるpreview チャンネルがあり、preview は 一時的な共有URL（SITE_ID--CHANNEL_ID-RANDOM_HASH.web.app みたいな形）で配れます📮(Firebase)

まず理解：Preview Channelってなに？🤔🧠​

Preview Channel Concept

  • live チャンネル：本番サイト（普段見られてるURL）🏟️
  • preview チャンネル：開発版サイト（期限付きの共有URL）🧪⏳
  • preview URL は ランダムハッシュ入りで推測されにくいけど、公開URLなので「知ってる人はアクセスできる」点は要注意⚠️(Firebase) Preview URL Anatomy
  • さらに大事：preview URL のアプリは、基本的に“本物のバックエンド”に接続します（Firestore/Auth/Storage など）。例外は rewrite で pinTag された関数などだけです🧨(Firebase)

※ preview channels は beta 扱いで、仕様が変わる可能性があります🧪(Firebase)

今日のゴール🏁✨​

  1. preview チャンネルを作って、プレビューURLを表示できる🌐
  2. 期限（expires）を付けて、放置事故を防ぐ⏳
  3. list / open / delete で、チャンネル管理ができる🧹

手を動かす：プレビューURLを作る（Windows / PowerShell想定）🛠️💻​

0) 30秒の事前チェック✅​

「CLI が動く・ログインできてる」だけ確認します。

firebase --version
firebase projects:list
  • もしログインが必要なら firebase login（ブラウザが開きます）🔐
  • プロジェクトを切り替えるなら firebase use（候補が出ます）🎯

1) Reactをビルドする🏗️📦​

preview チャンネルは「いまのビルド成果物」を配るので、まずビルドします。

npm install
npm run build

ここで生成されるフォルダ（例：dist や build）が、前章までで設定した firebase.json の hosting.public と合ってる前提です📁

2) preview チャンネルへデプロイする🚀🔎​

Deploy Command Breakdown

CHANNEL_ID は スペースなしでOK（例：pr-123、feature-login など）🏷️(Firebase)

firebase hosting:channel:deploy pr-123 --expires 7d
  • --expires は 最大 30日まで（h/d/w が使える）⏰(Firebase)
  • 何も付けない場合、デフォルトは7日で期限切れになります📅(Firebase)
  • CLIが プレビューURL を返します（PROJECT_ID--CHANNEL_ID-RANDOM_HASH.web.app の形）🌐(Firebase)

💡ポイント：このコマンドは チャンネルが無ければ作ってからデプロイしてくれます（create不要）✨(Firebase)

3) すぐブラウザで開く👀🧭​

Open Channel

firebase hosting:channel:open pr-123
  • ブラウザが開けない状況でも URLを返してくれるので、それをコピペでOKです📋(Firebase)

4) ちょい修正して「同じURL」に上書きする🔁✨​

Update Cycle

preview は “使い捨てURL” というより、同じチャンネルIDに何回でも載せ替えできます。

  1. Reactを少し直す ✏️
  2. またビルド 🏗️
  3. 同じIDへデプロイ 🚀
npm run build
firebase hosting:channel:deploy pr-123 --expires 7d

チャンネル管理（覚えると運用っぽくなる）🧹📋​

Channel Management Commands

一覧を見る📜​

firebase hosting:channel:list

live も preview も一覧に出ます👀(Firebase)

期限の挙動（地味に大事）⏳​

  • 期限が来ると、チャンネルと関連リリース/バージョンは 24時間以内に削除予定になります🗑️(Firebase)
  • 既存チャンネルに --expires を付けずにデプロイしても、期限が近いと自動延長される挙動があります（「新デプロイから7日」へ）📆(Firebase)

消す（掃除）🧼​

firebase hosting:channel:delete pr-123

削除も 24時間以内に整理されるイメージです🗑️(Firebase)

よくあるハマりどころ（先回り）🧯😵‍💫​

❶ 「プレビューで動かしたら、DBの中身が変わった！」💥​

Shared Backend Risk

preview URL は基本 本物のバックエンドにつながるので、テストでも書き込み処理があると普通に反映されます⚠️(Firebase) 対策アイデア👇

  • テスト用データ（コレクション名に dev_ を付ける等）に寄せる🧪
  • 重要な操作（削除/課金/送信）には確認ダイアログを入れる🛡️
  • 将来は staging プロジェクト運用（第14章へ）🏗️

❷ 「期限切れでURLが死んだ」🪦​

デフォルト7日です。長めに残すなら最初から付けちゃうのが安全🙆‍♂️(Firebase)

❸ 「Functions/Cloud Run への rewrite がプレビューで思ったのと違う」🤯​

Hosting の rewrite 先（Functions/Cloud Run）は、基本 本物に当たりがちです。 preview チャンネルでも rewrite をちゃんと “プレビュー” したいときは、pinTag を使うと「静的ファイル＋rewrite先」を同期して確認しやすくなります📌(Firebase)

AI活用：Preview Channelを“詰まらず”回す🤖⚡​

1) Firebase MCP server を入れると、AIからFirebase操作がやりやすい🧩​

AI CLI Assistant

Firebase MCP server は Antigravity / Gemini CLI / Firebase Studio などのMCPクライアントで使えます🛠️(Firebase)

Gemini CLI なら、公式の Firebase 拡張を入れるルートが推奨されています👇(Firebase)

gemini extensions install https://github.com/gemini-cli-extensions/firebase/

すると例えば👇みたいなお願いが通しやすくなります💬✨

  • 「いまのリポジトリ用に、preview チャンネルの命名規則を提案して」🏷️
  • 「firebase hosting:channel:* の運用手順をRunbookにして」🧾
  • 「プレビューURLは公開扱いだよね？注意点まとめて」⚠️

2) コンソールの Gemini in Firebase で詰まりを相談🧯​

権限・有効化などのセットアップ導線が公式にまとまってます（プロジェクト単位・ユーザー単位で有効化）🧠(Firebase) デプロイ失敗時の「ログの読み方」「権限の不足」あたりは、チャットで相談すると立て直しが速いです🚑

3) Firebase AI Logic を“プレビューで”試す（安全にUX確認）🤖🧪​

AI機能（文章生成/要約など）を入れてる場合、まず preview URL で

  • UIが破綻しないか
  • 料金や制限にひっかからないか を確認しやすいです✨（AI Logic 自体の概要）(Firebase)

ミニ課題（10〜15分）🧩📝​

Mini Assignment

  1. preview チャンネルを2つ作る
  • pr-1（期限 1日）
  • try-cache（期限 12時間）
firebase hosting:channel:deploy pr-1 --expires 1d
firebase hosting:channel:deploy try-cache --expires 12h
  1. firebase hosting:channel:list で live と一緒に並んでるのを確認👀(Firebase)
  2. pr-1 を firebase hosting:channel:delete pr-1 で消してお掃除🧼(Firebase)

チェック✅（言えたら勝ち🏆）​

Final Check

  • preview チャンネルは 一時的な共有URLを作る仕組みだと言える🌐(Firebase)
  • preview URL は 推測されにくいが公開URLだと言える⚠️(Firebase)
  • firebase hosting:channel:deploy/open/list/delete を使い分けできる🛠️(Firebase)
  • 期限（7日デフォルト、最大30日、--expires）を説明できる⏳(Firebase)
  • preview は 本物バックエンドに接続しがちなので注意できる🔥(Firebase)

次章へのつなぎ🎬🤝​

第6章で「手動でプレビューURLを作れた」ので、次の第7章ではそれを GitHub のPRごとに自動化して、URLが勝手に生える世界に入ります🤖🔁

必要なら、第6章の最後に「チャンネル命名ルール（チーム用テンプレ）」も、3パターンくらい（小規模/個人・チーム・公開OSS）で作って載せられます🏷️✨