Firebase Hosting

Firebase Hosting は、ウェブアプリの高速で安全なホスティングを提供します。

Firebase Hosting はデベロッパー向けの、本番環境レベルのウェブ コンテンツ ホスティングです。1 つのコマンドで、ウェブアプリをグローバル CDN（コンテンツ配信ネットワーク）に迅速にデプロイできます。Firebase Hosting は静的ウェブアプリと単一ページ型ウェブアプリ用に最適化されていますが、Firebase Hosting を Cloud Functions または Cloud Run と組み合わせて、Firebase で動的コンテンツとマイクロサービスを構築してホストすることもできます。

始めましょう

主な機能

安全な接続でコンテンツを配信 Firebase Hosting には構成不要の SSL が組み込まれているため、コンテンツを常に安全に配信できます。
コンテンツを高速で配信 アップロードしたファイルは、世界中に配置されている CDN エッジで SSD のキャッシュに保存され、gzip または Brotli として提供されます。コンテンツに最適な圧縮方法が自動的に選択されます。ユーザーがどこにいても、コンテンツを高速に配信できます。
公開前に変更をエミュレートして共有

ローカルでホストされる URL で変更を表示してテストし、エミュレートしたバックエンドとやり取りできます。

一時的なプレビュー URL を使用して同僚と変更内容を共有できます。また、Hosting は、プレビューしたコンテンツを簡単にイテレーションできる GitHub 統合も提供しています。
1 つのコマンドで新しいバージョンをデプロイ

Firebase CLI を使用して、アプリを迅速に稼働させることができます。コマンドライン ツールにより、デプロイ ターゲットをビルドプロセスに追加できます。

デプロイを元に戻す場合も、Hosting ではワンクリックでロールバックできます。

仕組み

デプロイするのがシンプルなアプリ ランディング ページであっても、複雑なプログレッシブ ウェブアプリ（PWA）であっても、Hosting はウェブサイトとアプリのデプロイと管理に適したインフラストラクチャ、機能、ツールを提供します。

Firebase CLI を使用して、お使いのパソコンのローカル ディレクトリから Hosting サーバーにファイルをデプロイします。静的コンテンツを配信する以外に、Cloud Functions for Firebase または Cloud Run を使用して、サイトで動的コンテンツの配信とマイクロサービスのホスティングを行うことができます。コンテンツはすべて、グローバル CDN の最も近いエッジサーバーから SSL 接続を介して配信されます。

また、公開前に変更内容を表示してテストすることも可能です。Firebase Local Emulator Suite を使用すると、ローカルでホストされる URL でアプリとバックエンド リソースをエミュレートできます。また、一時的なプレビュー URL を使用して変更を共有できるほか、GitHub 統合を設定すれば、開発中に簡単にイテレーションが行えます。

Firebase Hosting には、高機能の PWA のビルドに使用できる軽量なホスティング構成オプションがあります。クライアントサイドでのルーティング用の URL の書き換えやカスタム ヘッダーの設定、さらにはローカライズされたコンテンツの提供も簡単に行うことができます。

コンテンツを配信するため、Firebase にはいくつかのドメイン オプションとサブドメイン オプションがあります。

  • デフォルトでは、すべての Firebase プロジェクトに web.app ドメインと firebaseapp.com ドメインのサブドメインが無料で用意されています。これら 2 つのサイトが、同じデプロイ済みのコンテンツと構成を配信します。

  • 異なるコンテンツを配信しながら同じ Firebase プロジェクト リソースを共有する、関連サイトやアプリがある場合（たとえばブログ、管理パネル、公開アプリがある場合）は、複数のサイトを作成できます。

  • Firebase のホストサイトに独自のドメイン名を接続できます。

Firebase は、すべてのコンテンツが安全に配信されるように、すべてのドメインに SSL 証明書を自動的にプロビジョニングしています。

実装パス

Firebase CLI をインストールする Firebase CLI を使用すれば、新しい Hosting プロジェクトの設定、ローカルの開発サーバーの実行、コンテンツのデプロイを簡単に行うことができます。
プロジェクト ディレクトリを設定する

静的アセットをローカル プロジェクト ディレクトリに追加してから、firebase init を実行してディレクトリを Firebase プロジェクトに接続します。

ローカル プロジェクト ディレクトリでは、動的コンテンツとマイクロサービス用に Cloud Functions または Cloud Run を設定することもできます。
公開前に変更内容を表示、テスト、共有する（省略可）

firebase emulators:start を実行して、ローカルにホストされる URL で Hosting とバックエンド プロジェクトのリソースをエミュレートします。

一時的なプレビュー URL で変更を表示して共有するには、firebase hosting:channel:deploy を実行してプレビュー チャネルを作成し、デプロイします。プレビューしたコンテンツを簡単にイテレーションできるよう GitHub の統合を設定します。
サイトをデプロイする すべて問題がなければ、firebase deploy を実行して最新のスナップショットをサーバーにアップロードします。デプロイを元に戻す必要がある場合も、Firebase コンソールでワンクリックでロールバックできます。
Firebase ウェブアプリにリンクする（省略可） サイトを Firebase ウェブアプリにリンクすることで、Google Analytics を使用してアプリの使用状況と動作データを収集し、Firebase Performance Monitoring を使用してアプリのパフォーマンス特性を分析できます。

次のステップ