Skip to main content

第20章：デプロイと運用の入口 🌍🚀（Hosting / App Hosting / CI/CD / 監視 / ロールバック）

この章では「作った管理画面っぽいReactアプリ」を ネットに公開して、安全に更新して、困ったら戻せる ところまでやります 😆✨ “作れた！”から“動かし続けられる！”へ進化させよう〜💪🔥

0) 今日のゴール 🎯​

  • ✅ Vite+ReactのSPAを Firebase Hosting に公開する 🌐
  • ✅ “レビュー用URL” を作れる Preview Channel を使う 🧪🔗
  • ✅ GitHub と連携して PRでプレビュー → マージで本番 の入口を作る 🤝🚀 (Firebase)
  • ✅ 失敗しても ロールバックできる運用を覚える ⏪🛟 (Firebase)
  • ✅ SSR/フルスタックやAIをやりたくなった時の App Hosting分岐 がわかる 🌿🧠 (Firebase)

1) まず結論：Hosting と App Hosting、どっち？🤔​

Hosting vs App Hosting

ざっくりこうです👇

Firebase Hosting が向いてる 🏠✨​

  • React/Viteの 静的SPA（HTML/CSS/JSを配る）
  • URL直打ち・React Routerでも崩れないように rewrites を設定しやすい 🧭
  • Preview Channel で「このURLで見て〜！」がすぐできる 🔗🧪 (Firebase)
  • Google Cloud のCDNで高速配信（gzip/Brotliなども自動）🚄💨 (Firebase)

Firebase App Hosting が向いてる 🧩🚀​

  • Next.js / Angular Universal など SSR/フルスタック（サーバーが必要）
  • GitHubの “本番ブランチ更新” をトリガーに 自動ロールアウト（裏側は Cloud Build → Cloud Run → CDN）🧠⚙️ (Firebase)
  • apphosting.yaml で 環境変数/シークレット を扱う発想（サーバー側の設定っぽい）🔐 (Firebase)

いま作ってる「管理画面っぽいSPA」なら、まず Firebase Hosting が一番スムーズだよ〜😄 SSRをやりたくなったら、その時に App Hosting を選べばOK🙆‍♂️

2) 手を動かす：Firebase Hosting に手動デプロイして公開 🌐🚀​

2-1) ビルド（公開用のファイルを作る）📦​

Viteなら基本これ👇

npm run build

成功すると dist/ ができるはず！✨

2-2) Firebase CLI を入れる（または更新）🧰​

いちばん定番はこれ👇（Firebase公式もこの流れ） (Firebase)

npm install -g firebase-tools
firebase --version

firebase-tools は頻繁に更新されるので、詰まったらまず更新が効くこと多いよ🙏✨ (npm)

2-3) ログイン & プロジェクト紐づけ 🔐​

firebase login
firebase projects:list
firebase use --add

2-4) Hosting 初期化（Viteのdistを指定）🏗️​

Hosting Initialization Flow

firebase init hosting

質問でよく出るポイント👇

  • public directory → dist
  • single-page app（全部index.htmlへ）→ Yes（React RouterするならほぼYes） これで firebase.json に rewrites が入って、URL直打ち404を回避できるやつ！🧭✨ (Firebase)

（設定イメージ）

{
  "hosting": {
    "public": "dist",
    "rewrites": [{ "source": "**", "destination": "/index.html" }]
  }
}

2-5) デプロイ！🌍🚀​

firebase deploy --only hosting

終わると Hosting のURLが出るので、開いて表示確認だ〜😆🎉

3) “レビュー用URL” を作る：Preview Channel 🧪🔗​

Preview Channel Concept

これがめちゃ便利！ 本番を壊さずに、別URLで見せられるやつです😎✨ (Firebase)

3-1) 例：dev チャンネルにデプロイ​

firebase hosting:channel:deploy dev
  • これで dev 用のURLが発行される👍
  • チャンネルは期限付きにもできる（消し忘れ防止）🧹✨ (Firebase)

3-2) 片付け（不要になったら削除）​

firebase hosting:channel:delete dev

4) 失敗しても大丈夫：リリース履歴 & ロールバック ⏪🛟​

Hosting Rollback

Hostingは「デプロイ＝リリースが積み上がる」感じなので、戻せるのが安心ポイント😌✨ (Firebase)

CLIで戻すなら（代表例）👇

firebase hosting:rollback

（細かい指定や確認もCLIリファレンスにまとまってるよ） (Firebase)

5) 自動化：PRでプレビュー、マージで本番（GitHub連携）🤝🚀​

GitHub Integration Workflow

Firebase Hostingは GitHubのPRと連携してプレビューURLをコメントしてくれる 流れが用意されてます👏 (Firebase)

5-1) いちばん楽な作り方（推奨）🧠✨​

firebase init hosting:github

これで、リポジトリにGitHub Actionsのワークフローが生成されて👇

  • PRを作る → プレビューURLがPRにコメントされる
  • commitを積む → 同じプレビューURLが更新される
  • （設定次第で）マージしたら本番へデプロイ という動きになるよ！ (Firebase)

6) “運用”で一番やらかしやすい：環境変数と秘密情報 🔐😱​

Environment Variable Safety

6-1) フロント（Vite）の環境変数は「ビルド時」⚠️​

Viteの環境変数は基本 VITE_ プレフィックスで、ビルド成果物に埋め込まれる発想だよね🧠 つまり…

  • ❌ 秘密鍵やAIの本当のシークレットを入れるのはNG
  • ✅ 表に出てもOKな設定だけ（例：公開しても困らないID類）にする

6-2) AIを本番で安全に使うコツ 🤖🛡️​

  • クライアントから直接AIを呼ぶなら Firebase AI Logic を使う（App Checkなど“守り”と組み合わせやすい）🧩✨ (Firebase)
  • 「これは絶対に漏らせない」系は、Functions側でSecret Manager を使うのが王道 🔐🏰 functions.config は非推奨で、将来的にデプロイ失敗の原因になるので移行推奨だよ〜（公式） (Firebase)

7) App Hosting分岐：SSRやフルスタックに行きたくなったら 🌿🚀​

App Hosting Pipeline

App Hostingは “中で何が起きてるか” が分かると怖くない😆

  • GitHubのコミット → Cloud Buildでビルド → コンテナがArtifact Registryへ → Cloud Runで新Revision → CDN/ロードバランサ経由で配信 っていう流れをよしなにやってくれる💨 (Firebase)
  • ロールアウト状況はコンソールやGitHubチェックで見れる 👀✅ (Firebase)
  • ログ/メトリクスも Cloud Run / Cloud Build / CDN 側に繋がって見える 📈🪵 (Firebase)
  • apphosting.yaml で環境変数やシークレットを設定する 🧾🔐 (Firebase)

“静的SPA”の世界は Hosting、 “サーバーも含めて面倒みてほしい”世界は App Hosting、 って覚えるとスッキリするよ〜😄✨

8) Functionsも一緒に運用する時の「バージョン感」⚙️📌​

フロント章だけど、運用視点でここだけ押さえると強い💪

  • Cloud Functions for Firebase は Node.js 20 / 22 をフルサポート、18はdeprecated（公式） (Firebase)
  • Firebase CLIの最近の更新で Pythonのデフォルトランタイムが3.13 になった旨も出てる（CLIリリースノート） (Firebase)
  • さらに下回りのCloud Run Functions側では Python 3.13がGA になってる（Google側のリリースノート） (Google Cloud Documentation)
  • .NETは “最新LTSは .NET 10” だけど、サーバレス実行環境側は対応状況が別ラインなので、使う時は「そのサービスが対応してるランタイム」を必ず見るのが安全（例：Cloud Run Functionsのリリースノートで .NET 8 GA が明記）🟦🧠 (Firebase)

9) AIでデプロイ運用を加速する 🚀🤖​

9-1) Firebase Studio：環境ごと“再現”できるの強い 🧪🧰​

Firebase Studio は Nixベースで環境を定義できて、ワークスペースも共有しやすい💡 しかも Gemini in Firebase がワークスペース内で手伝ってくれる！ (Firebase)

9-2) Firebase CLIの “AI連携” も増えてる 🛠️🤝​

Firebase CLI には firebase experimental:mcp（MCPサーバー）みたいな AIアシスタント連携の動きも出てきてるよ（リリースノート） (Firebase)

10) ミニ課題 🎯🔥（20〜40分）​

  1. Hostingに手動デプロイしてURLを開く 🌍
  2. Preview Channel dev を作って、dev のURLも開く 🧪
  3. GitHub連携を firebase init hosting:github で入れて、PRを作って プレビューURLがコメントされるのを確認 🤝✨ (Firebase)
  4. わざと表示を壊してデプロイ → rollback で戻す ⏪🛟 (Firebase)

11) チェックリスト ✅🧠​

  • npm run build が通る（dist/ ができる）📦
  • firebase init hosting の public が dist になってる 🏗️
  • SPAの rewrites が入ってて、URL直打ちで404にならない 🧭 (Firebase)
  • Preview Channel で本番と別URLが作れる 🧪 (Firebase)
  • PRプレビューの仕組みが動く 🤝 (Firebase)
  • 秘密情報をフロントに入れない（AIはAI Logic/Functions側へ）🔐🤖 (Firebase)

必要なら次に、**「Hostingのキャッシュ最適化（headers）」「独自ドメイン」「本番/開発のサイト分割（複数site運用）」「App Hostingへ移行する時の設計メモ」**まで、運用寄りにもう一段深掘りもできるよ〜😆✨