Google は、黒人コミュニティのための人種的公平の促進に取り組んでいます。詳細をご覧ください。

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

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

あなたが始める前に

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

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

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

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

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

Hosting はFirebase Local Emulator Suite の一部です。これにより、アプリはエミュレートされたHosting コンテンツと構成、およびオプションでエミュレートされたプロジェクト リソース (関数、データベース、ルール) と対話できます。

  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」で Web アプリを提供します。プレビュー URL を使用する場合、Web アプリはすべてのプロジェクト リソースの実際のバックエンドと対話します。

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

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

    firebase hosting:channel:deploy CHANNEL_ID

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

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

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

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

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

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

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

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

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

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

    firebase hosting:clone SOURCE_SITE_ID:SOURCE_CHANNEL_ID TARGET_SITE_ID:live

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

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

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

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

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

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

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

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

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

    firebase deploy --only hosting

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

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

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

  • デフォルトの Hosting サイトおよび追加の Hosting サイト用に Firebase がプロビジョニングするサブドメイン:
    SITE_ID .web.app ( PROJECT_ID .web.app )
    SITE_ID .firebaseapp.com （ PROJECT_ID .firebaseapp.com ）

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

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

その他の展開アクティビティと情報

デプロイにコメントを追加

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

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

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

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

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

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

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

HTTPS 経由で提供する

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

次のステップ