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を使用すると、変更をローカルで表示およびテストし、エミュレートされたバックエンドプロジェクトリソースとやり取りできます。チームメイトが変更を表示およびテストする必要がある場合、ホスティングはサイトの共有可能な一時プレビューURLを作成できます。私たちもサポートしてGitHubの統合プルリクエストから展開することを。

あなたが始める前に

記載されている手順完了ホスティング取得の開始ページ、具体的には以下の作業を:

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

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

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

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

ホスティングの一部であるFirebaseローカルエミュレータスイートだけでなく、必要に応じて、あなたのエミュレートされたプロジェクトの資源(機能、データベース、およびルール)、あなたのエミュレートホスティングコンテンツと設定と対話するためにアプリを可能にします。

  1. (オプション)デフォルトでは、ローカルにホストされたアプリは、実際エミュレートされていない、プロジェクトのリソース(機能、データベース、ルールなど)と相互に作用します。代わりに、必要に応じて、あなたが設定した任意のエミュレートされたプロジェクトのリソースを使用するようにアプリを接続することができます。詳細情報:リアルタイムデータベース|クラウドFirestore |クラウド機能

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

    firebase emulators:start
  3. CLIによって返されるローカルURLでウェブアプリを開きます(通常http://localhost:5000 )。

  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_IDTARGET_SITE_ID :これらは、チャンネルが含まれているホスティングサイトのIDです。

      • デフォルトのホスティングサイトには、FirebaseプロジェクトIDを使用します。
      • 同じFirebaseプロジェクトまたは異なるFirebaseプロジェクトにあるサイトを指定できます。
    • SOURCE_CHANNEL_ID :これは現在、あなたのライブチャネルに展開するバージョンを提供しているチャネルのための識別子ですです。

      • ライブチャネルの場合は、使用liveチャンネルIDなど。
  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

  • 任意のカスタムドメインあなたのホスティングサイトに接続したことを(S)

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

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

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

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

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

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

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

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

要求は、静的コンテンツのために作られた場合、Firebaseは自動的にホスティングCDN上のコンテンツをキャッシュします。あなたのサイトのコンテンツを再デプロイした場合、Firebaseは自動的に新しい要求が新しいコンテンツを受け取ることができるように、CDN全体ですべてのキャッシュされた静的コンテンツをクリアします。

あなたが設定できることに注意してください動的コンテンツのキャッシングを

HTTPS経由でサービスを提供

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

次のステップ