Firebaseでウェブアプリを作成しようとしたとき、「Hosting」と「App Hosting」という2つの選択肢があり、どちらを使えばいいか迷うことがあるかもしれません。
どちらもホスティングサービスのように見えますが、実はその役割と対象とするアプリの種類には明確な違いがあります。
特にNext.jsのようなモダンなフレームワークを使っている場合、選択を誤るとパフォーマンスや開発効率に大きく影響します。
この記事では、この2つのサービスの違いを解説しています。
Firebase HostingとApp Hostingの違い
GoogleのFirebaseのサーバー機能には「Firebase Hosting」と「Firebase App Hosting」があります。
どちらもウェブサイトやアプリケーションをホストするためのサービスですが、提供する機能と仕組みが異なります。
Firebase App HostingとFirebase Hostingは、どちらもウェブサイトやアプリケーションをホストするためのサービスですが、提供する機能と仕組みが異なります。
ざっくりまとめると以下のようになります。
| サービス名 | 主な役割 | サーバーの概念 |
| Firebase Hosting | 静的ファイル（HTML, CSS, JS, 画像など）の配信 | CDNとして機能するサーバー。高速なファイル配信に特化。 |
| Firebase App Hosting | フルスタックアプリ（Next.jsなど）のデプロイと実行 | SSR（サーバーサイドレンダリング）やAPIルートを実行するための管理されたサーバー環境。 |
使い分けとしては、静的サイト／SPA中心なら Firebase Hosting、SSR・AI統合・フルスタック開発なら App Hostingが推奨されます。
Firebase Hostingの特徴
Firebase Hosting は静的なウェブサイト（HTML、CSS、JS、画像など）の配信に最適化されています。
SPAのようなクライアントサイドレンダリングを行うアプリも容易に配信可能で、小規模サイトなら無料枠で作成することができます。
主な機能は以下の２つです。
- CDN（Content Delivery Network）
世界中に分散されたサーバー（ノード）を使って、あなたのアプリの静的なファイルをキャッシュし、ユーザーに最も近い場所から高速に配信します。これが「サーバー」の役割の一つです。 - サーバー機能（一部）
Next.jsのようなフレームワークを使う場合、Cloud FunctionsやCloud RunといったGoogle Cloudのサーバーレスコンピューティングサービスと連携し、動的な処理（SSRなど）を実行します。
Firebase App Hostingの特徴
Firebase App Hostingは、モダンなフルスタックフレームワーク（Next.js、Angularなど）のために新しく設計されたサービスで、以下の機能を提供します。
- 統合されたサーバーレス環境
SSRやAPIルートの実行環境をすべて統合して管理します。このため、開発者がCloud FunctionsやCloud Runの設定を個別に行う必要がありません。 - GitHubとの連携
GitHubにコードをプッシュするだけで、ビルド、デプロイ、そしてサーバー環境の準備までが自動的に行われます。 - Firebase Hostingを含む
App Hostingは、従来のFirebase Hostingの静的ファイル配信（CDN）の機能も内包しつつ、動的なサーバー機能もシームレスに提供します。
歴史：Firebase App Hostingの方が新しい
Firebase Hostingは、2014年頃に静的サイトホスティングの基盤として開発されました。後にCloud Functions連携などの動的機能が追加され、Next.jsなどのフレームワークにも対応できるようになりました。
Firebase App Hostingは2024年5月に公開された新しいサーバー環境です。Next.jsやAngularなどモダンなフルスタックフレームワークのデプロイを、サーバーレス環境で統合的に行うために新しく設計されました。
料金はかかる？
Firebase Hostingは、SparkプランとBlazeプランがあります。Sparkプランは完全無料で、無料枠としてかなりのサービスが提供されています。
一方、Firebase App Hostingは、Blazeプランのみ使うことができるサービスです。このため、クレジットカードの登録が必須となります。
ただし、Blazeプランだからといっていきなり料金が発生するわけではなく、Sparkプラン同等の寛大な無料枠が用意されています。
どちらを使うべき？
個人でNext.jsの学習を目的にする場合、完全無料で使えるFirebase Hostingの使用が適しています。
Firebase App Hostingも無料枠がありますが、クレジットカード登録が必須で、かつ、非常に高機能なため初学者にはオーバースペックになりがちです。
多少の学習コストは発生しますが、Firebase Hostingで学習してから、Firebase App Hostingに移行するのがベストプラクティスです。
