Google は、黒人コミュニティのための人種的公平の促進に取り組んでいます。詳細をご覧ください。
このページは Cloud Translation API によって翻訳されました。
Switch to English

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

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

あなたが始める前に

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

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

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

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

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

ホスティングはFirebaseLocal Emulator Suiteの一部であり、アプリがエミュレートされたホスティングコンテンツと設定、およびオプションでエミュレートされたプロジェクトリソース（関数、データベース、ルール）とやり取りできるようにします。 Local 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:SOURCE_CHANNEL_ID TARGET_SITE:live

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

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

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

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

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

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

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

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

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

    firebase deploy --only hosting

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

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

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

  • デフォルトのホスティングサイトとその他のホスティングサイト用にFirebaseでプロビジョニングされたサブドメイン：
    SITE_NAME .web.app （ PROJECT_ID .web.app ）
    SITE_NAME .firebaseapp.com （ PROJECT_ID .firebaseapp.com ）

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

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

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

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

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

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

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

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

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

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

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

HTTPS経由でサービスを提供

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

次のステップ