ローカルでテストしてサイトにデプロイする

HTTPS 関数をエミュレートする場合でも、本番環境にサイトをデプロイする前に、ローカルでサイトを表示し、テストできます。

はじめに

[ホスティング] の [スタートガイド] ページに記載されている操作を行います。たとえば、Firebase CLI をインストールし、ローカル プロジェクトと Firebase プロジェクトを接続します。

Firebase プロジェクトをローカルで実行してテストする(省略可)

本番環境にデプロイする前に、ローカルでホストされる URL で Firebase プロジェクトを表示してテストできます。選択した機能のみをテストする場合は、firebase serve コマンドのフラグ内でカンマ区切りのリストを使用します。

次のいずれかのタスクを行う場合は、ローカル プロジェクト ディレクトリのルートから以下のコマンドを実行します。

  • Firebase がホストするアプリの静的コンテンツを表示する。
  • Cloud Functions を使用して Firebase Hosting の動的コンテンツを生成し、本番環境(デプロイ済み)の HTTP 関数を使用して、ローカル URL で Hosting をエミュレートする。
firebase serve --only hosting

ローカル HTTP 関数を使用してプロジェクトをエミュレートする

プロジェクト ディレクトリから次のいずれかのコマンドを実行し、ローカル HTTP 関数を使用してプロジェクトをエミュレートします。

  • テストのためにローカル URL で HTTP 関数およびホスティングをエミュレートするには、次のいずれかのコマンドを使用します。

    firebase serve
    firebase serve --only functions,hosting // uses a flag
  • HTTP 関数のみをエミュレートするには、次のコマンドを使用します。

    firebase serve --only functions

他のローカル デバイスからテストする

デフォルトでは、firebase servelocalhost からのリクエストにのみ応答します。つまり、ホストされているコンテンツには同じパソコンのウェブブラウザからアクセスできますが、ネットワーク上の他のデバイスからはアクセスできません。他のローカル デバイスからテストする場合は、次のように --host フラグを使用します。

firebase serve --host 0.0.0.0  // accepts requests to any host

サイトにデプロイする

サイトにデプロイするには、ローカル プロジェクト ディレクトリのルートから次のコマンドを実行します。

firebase deploy

このコマンドは、リリースを次のサイトにデプロイします。

  • Firebase プロジェクトのデフォルトの Hosting サイト(projectID.web.appprojectID.firebaseapp.com)。

  • Hosting サイトに接続したすべてのカスタム ドメイン

デプロイにコメントを追加することもできます。このコメントは、他のデプロイメント情報と一緒にプロジェクトの Hosting ページに表示されます。 次に例を示します。

firebase deploy -m "Deploying the best new feature ever."

複数のサイトを使用するプロジェクトのデプロイ

Firebase プロジェクトにサイトを追加した場合は、次のコマンドを使用して、これらのサイトのいずれかにデプロイします。

firebase deploy --only hosting:target-name

target-name パラメータは、設定時に追加の Hosting サイトに指定した固有の識別子です。

デプロイ前とデプロイ後にスクリプトで実行されるタスクを追加する

必要に応じて、シェル スクリプトを firebase deploy コマンドに接続して、デプロイ前またはデプロイ後のタスクを実行できます。たとえば、デプロイ後のフックで、管理者に新しいサイト コンテンツのデプロイを通知できます。詳細については、Firebase CLI のドキュメントをご覧ください。

デプロイされたコンテンツをキャッシュに保存する

静的コンテンツがリクエストされると、Firebase Hosting は CDN のキャッシュにコンテンツを自動的に保存します。サイトのコンテンツを再デプロイすると、Firebase は CDN 全体でキャッシュからすべての静的コンテンツをクリアします。この処理は自動的に行われ、新しいリクエストで新しいコンテンツを取得できるようになります。

動的コンテンツのキャッシュも構成できます。

HTTPS 経由で配信する

アプリケーションを開発しているときに、Firebase Hosting でホストされていないすべての外部リソース(外部スクリプトを含む)が SSL(HTTPS)経由で読み込まれるようにします。ほとんどのブラウザでは、混合コンテンツ(SSL トラフィックと非 SSL トラフィック)の読み込みが許可されていません。