Join us for Firebase Summit on November 10, 2021. Tune in to learn how Firebase can help you accelerate app development, release with confidence, and scale with ease. Register

Firebase Hosting

Firebase Hosting は、ウェブアプリ、静的コンテンツと動的コンテンツ、マイクロサービス向けの高速で安全性の高いホスティングを提供します。

Firebase Hosting はデベロッパー向けの、本番環境レベルのウェブ コンテンツ ホスティングです。1 つのコマンドですばやくウェブアプリをデプロイすることができ、静的コンテンツと動的コンテンツの両方をグローバル CDN(コンテンツ配信ネットワーク)に配信できます。Firebase Hosting と Cloud Functions または Cloud Run を併用してマイクロサービスを構築し、Firebase にホストすることもできます。

使ってみる

主な機能

安全な接続でコンテンツを配信 最新のウェブは優れたセキュリティを備えています。Firebase Hosting には構成が不要の SSL が組み込まれているため、コンテンツを常に安全に配信できます。
静的コンテンツと動的コンテンツ、マイクロサービスをホスト Firebase Hosting は、さまざまな種類のコンテンツをホストします。CSS や HTML ファイルだけでなく、Express.js マイクロサービスや API もホストできます。
コンテンツを高速で配信 アップロードしたファイルは、世界中に配置されている CDN エッジで SSD のキャッシュに保存され、gzip または Brotli として提供されます。コンテンツに最適な圧縮方法が自動的に選択されます。ユーザーがどこにいても、コンテンツを高速に配信できます。
公開前に変更をエミュレートして共有

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

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

1 つのコマンドで新しいバージョンをデプロイ

Firebase CLI を使用して、アプリを迅速に実行できます。コマンドライン ツールにより、デプロイ ターゲットを簡単にビルドプロセスに追加できます。

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

仕組み

Firebase Hosting は最先端のウェブ デベロッパー向けに構築されています。Angular などのフロントエンド JavaScript フレームワークや、Jekyll などの静的ジェネレータ ツールの台頭によって、ウェブサイトとアプリはこれまで以上に高性能になっています。デプロイするのがシンプルなアプリ ランディング ページであっても、複雑なプログレッシブ ウェブアプリ(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 アナリティクスを使用してアプリの使用状況と動作データを収集し、Firebase Performance Monitoring を使用してアプリのパフォーマンス特性を分析できます。

次のステップ