Firebase Summit で発表されたすべての情報をご覧ください。Firebase を使用してアプリ開発を加速し、自信を持ってアプリを実行する方法を紹介しています。詳細

Web アプリをローカルでテストし、変更を他のユーザーと共有してから、ライブでデプロイします

コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

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

あなたが始める前に

Hosting Get Started ページに記載されている手順、具体的には次のタスクを完了します。

  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」でウェブアプリを提供します。プレビュー 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 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 です。

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

    • 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 )

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

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

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

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

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

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

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

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

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

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

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

HTTPS 経由での配信

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

次のステップ