ローカルでテストし、変更を共有してから、ライブでデプロイします

ライブサイトにデプロイする前に、変更を表示してテストする必要があります。 Firebase Hostingを使用すると、変更をローカルで表示およびテストし、エミュレートされたバックエンドプロジェクトリソースとやり取りできます。チームメイトが変更を表示してテストする必要がある場合、ホスティングはサイトの共有可能な一時的なプレビューURLを作成できます。プルリクエストからデプロイするためのGitHub統合もサポートしています。

あなたが始める前に

[ホスティングの開始]ページにリストされている手順、具体的には次のタスクを完了します。

  1. FirebaseCLIをインストールするか最新バージョンに更新します。
  2. ローカルプロジェクトディレクトリ（アプリのコンテンツを含む）をFirebaseプロジェクトに接続します。

オプションでアプリのホスティングコンテンツと構成をデプロイできますが、このページの手順の前提条件ではありません。

ステップ1：ローカルでテストする

迅速な反復を行う場合、またはアプリがエミュレートされたバックエンドプロジェクトリソースと対話するようにしたい場合は、ホスティングコンテンツと構成をローカルでテストできます。ローカルでテストする場合、FirebaseはローカルでホストされているURLでウェブアプリを提供します。

ホスティングはFirebaseLocal Emulator Suiteの一部であり、アプリがエミュレートされたホスティングコンテンツと構成、およびオプションでエミュレートされたプロジェクトリソース（関数、データベース、ルール）とやり取りできるようにします。

  1. （オプション）デフォルトでは、ローカルでホストされているアプリは、エミュレートされていない実際のプロジェクトリソース（関数、データベース、ルールなど）と対話します。代わりに、オプションでアプリを接続して、構成したエミュレートされたプロジェクトリソースを使用できます。詳細：リアルタイムデータベース|クラウドファイヤーストア|クラウド機能

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

    firebase emulators:start

  3. CLIによって返されたローカルURL（通常はhttp://localhost:5000 ）でWebアプリを開きます。

  4. ローカルURLを変更して更新するには、ブラウザを更新してください。

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

デフォルトでは、エミュレーターはlocalhostからの要求にのみ応答します。つまり、ホストされているコンテンツには、コンピューターのWebブラウザーからはアクセスできますが、ネットワーク上の他のデバイスからはアクセスできません。他のローカルデバイスからテストする場合は、 firebase.jsonを次のように構成します。

"emulators": {
    // ...

    "hosting": {
      "port": 5000
      "host": "0.0.0.0"
    }
  }

ステップ2：プレビューして共有する

公開する前に他の人にWebアプリの変更を表示してもらいたい場合は、プレビューチャネルを使用できます。

プレビューチャネルにデプロイすると、Firebaseは共有可能な一時URLである「プレビューURL」でウェブアプリを提供します。プレビューURLを使用する場合、Webアプリはすべてのプロジェクトリソースの実際のバックエンドと対話します。

プレビューURLは（ランダムなハッシュが含まれているため）推測するのは困難ですが、公開されていることに注意してください。したがって、URLを知っている人なら誰でもアクセスできます。

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

    firebase hosting:channel:deploy CHANNEL_ID

    CHANNEL_IDを、スペースを含まない文字列に置き換えます（たとえば、 feature_mission-2-mars ）。このIDは、プレビューチャネルに関連付けられたプレビューURLを作成するために使用されます。

  2. CLIによって返されたプレビューURLでWebアプリを開きます。次のようになりますPROJECT_ID -- CHANNEL_ID - RANDOM_HASH .web.app

  3. プレビューURLを変更して更新するには、同じコマンドをもう一度実行します。コマンドには必ず同じCHANNEL_IDを指定してください。

チャンネルの有効期限を設定する方法など、プレビューチャンネルの管理について学びます。

Firebase Hostingは、プルリクエストに変更をコミットすると、プレビューURLを自動的に作成して更新するGitHubアクションをサポートしています。このGitHubアクションを設定して使用する方法を学びます。

ステップ3：ライブでデプロイする

変更を世界と共有する準備ができたら、ホスティングコンテンツと設定をライブチャンネルにデプロイします。 Firebaseは、ユースケースに応じて、このステップにいくつかの異なるオプションを提供します（以下のオプションを参照）。

オプション1：プレビューチャンネルからライブチャンネルにクローンを作成する

このオプションにより、プレビューチャネルでテストした正確なコンテンツと構成をライブチャネルに展開しているという確信が得られます。バージョンのクローン作成の詳細をご覧ください。

  1. 任意のディレクトリから、次のコマンドを実行します。

    firebase hosting:clone SOURCE_SITE_ID:SOURCE_CHANNEL_ID TARGET_SITE_ID:live

    各プレースホルダーを次のように置き換えます。

    • SOURCE_SITE_IDおよびTARGET_SITE_ID ：これらはチャネルを含むホスティングサイトのIDです。

      • デフォルトのホスティングサイトには、FirebaseプロジェクトIDを使用します。
      • 同じFirebaseプロジェクトにあるサイト、または異なるFirebaseプロジェクトにあるサイトを指定できます。

    • SOURCE_CHANNEL_ID ：これは、ライブチャンネルにデプロイするバージョンを現在提供しているチャンネルの識別子です。

      • ライブチャネルの場合、チャネルIDとしてliveを使用します。

  2. 変更を表示します（次のステップ）。

オプション2：ローカルプロジェクトディレクトリからライブチャンネルにデプロイする

このオプションを使用すると、ライブチャネルに固有の構成を調整したり、プレビューチャネルを使用していない場合でも展開したりする柔軟性が得られます。

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

    firebase deploy --only hosting

  2. 変更を表示します（次のステップ）。

ステップ4：ライブサイトで変更を表示する

上記の両方のオプションは、ホスティングコンテンツと構成を次のサイトに展開します。

  • デフォルトのホスティングサイトおよび追加のホスティングサイト用にFirebaseがプロビジョニングしたサブドメイン：
    SITE_ID .web.app （ PROJECT_ID .web.app ）
    SITE_ID .firebaseapp.com （ PROJECT_ID .firebaseapp.com ）

  • ホスティングサイトに接続したカスタムドメイン

デプロイを特定のホスティングサイトに制限するには、CLIコマンドでデプロイターゲットを指定します。

その他のデプロイアクティビティと情報

デプロイのコメントを追加する

オプションで、デプロイにコメントを追加できます。このコメントは、Firebaseコンソールのホスティングダッシュボードに他のデプロイ情報とともに表示されます。例えば：

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

デプロイ前およびデプロイ後のスクリプトタスクを追加する

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

デプロイされたコンテンツのキャッシュ

静的コンテンツがリクエストされると、FirebaseHostingはコンテンツをCDNに自動的にキャッシュします。サイトのコンテンツを再デプロイすると、FirebaseはCDN全体でキャッシュされたすべての静的コンテンツを自動的にクリアして、新しいリクエストが新しいコンテンツを受信できるようにします。

動的コンテンツのキャッシュを構成できることに注意してください。

HTTPS経由でサービスを提供

Firebase Hostingでホストされていないすべての外部リソースが、外部スクリプトを含め、SSL（HTTPS）経由で読み込まれていることを確認してください。ほとんどのブラウザでは、ユーザーが「混合コンテンツ」（SSLおよび非SSLトラフィック）をロードすることを許可していません。

次のステップ