ライブサイトにデプロイする前に、変更を表示してテストすることをお勧めします。 Firebase Hostingを使用すると、変更をローカルで表示およびテストし、エミュレートされたバックエンドプロジェクトリソースとやり取りできます。チームメイトが変更を表示およびテストする必要がある場合、ホスティングはサイトの共有可能な一時プレビューURLを作成できます。プルリクエストからデプロイするためのGitHub統合もサポートしています。
あなたが始める前に
[ホスティングの開始]ページに記載されている手順、具体的には次のタスクを完了します。
- FirebaseCLIをインストールするか最新バージョンに更新します。
- ローカルプロジェクトディレクトリ(アプリのコンテンツを含む)をFirebaseプロジェクトに接続します。
オプションでアプリのホスティングコンテンツと設定をデプロイできますが、このページの手順の前提条件ではありません。
ステップ1:ローカルでテストする
迅速な反復を行う場合、またはアプリがエミュレートされたバックエンドプロジェクトリソースと対話する場合は、ホスティングコンテンツと構成をローカルでテストできます。ローカルでテストする場合、FirebaseはローカルでホストされているURLでウェブアプリを提供します。
ホスティングはFirebaseLocal Emulator Suiteの一部であり、アプリがエミュレートされたホスティングコンテンツと設定、およびオプションでエミュレートされたプロジェクトリソース(関数、データベース、ルール)とやり取りできるようにします。 Local Emulator Suiteは、エミュレートされたクラウドストレージをまだサポートしていないことに注意してください。
(オプション)デフォルトでは、ローカルでホストされているアプリは、エミュレートされていない実際のプロジェクトリソース(関数、データベース、ルールなど)と対話します。代わりに、オプションでアプリを接続して、構成したエミュレートされたプロジェクトリソースを使用できます。詳細: リアルタイムデータベース|クラウドファイヤーストア|クラウド機能
ローカルプロジェクトディレクトリのルートから、次のコマンドを実行します。
firebase emulators:start
CLIから返されたローカルURL(通常は
http://localhost:5000
)でWebアプリを開きます。ローカルURLを変更して更新するには、ブラウザを更新してください。
他のローカルデバイスからテストする
デフォルトでは、エミュレーターはlocalhost
からの要求にのみ応答します。つまり、ホストされているコンテンツには、コンピューターのWebブラウザーからはアクセスできますが、ネットワーク上の他のデバイスからはアクセスできません。他のローカルデバイスからテストする場合は、 firebase.json
ように構成します。
"emulators": {
// ...
"hosting": {
"port": 5000
"host": "0.0.0.0"
}
}
firebase serve
を使用firebase serve
場合、アプリはホスティングコンテンツと構成(およびオプションで関数)のエミュレートされたバックエンドと対話しますが、他のすべてのプロジェクトリソースの実際のバックエンドと対話します。
ローカルプロジェクトディレクトリのルートから、次のコマンドを実行します。
firebase serve --only hosting
CLIから返されたローカルURL(通常は
http://localhost:5000
)でWebアプリを開きます。ローカルURLを変更して更新するには、ブラウザを更新してください。
firebase serve
使用して他のローカルデバイスからテストする
デフォルトでは、 firebase serve
はlocalhost
からのリクエストにのみ応答します。つまり、ホストされているコンテンツには、コンピューターのWebブラウザーからはアクセスできますが、ネットワーク上の他のデバイスからはアクセスできません。他のローカルデバイスからテストする場合は、次のように--host
フラグを使用します。
firebase serve --host 0.0.0.0 // accepts requests to any host
ステップ2:プレビューして共有する
公開する前に他の人にWebアプリの変更を表示してもらいたい場合は、プレビューチャネルを使用できます。
プレビューチャネルにデプロイすると、Firebaseは共有可能な一時URLである「プレビューURL」でウェブアプリを提供します。プレビューURLを使用する場合、Webアプリはすべてのプロジェクトリソースの実際のバックエンドと対話します。
プレビューURLは(ランダムハッシュが含まれているため)推測するのは困難ですが、公開されていることに注意してください。したがって、URLを知っている人なら誰でもアクセスできます。
ローカルプロジェクトディレクトリのルートから、次のコマンドを実行します。
firebase hosting:channel:deploy CHANNEL_ID
CHANNEL_IDを、スペースを含まない文字列に置き換えます(たとえば、
feature_mission-2-mars
)。このIDは、プレビューチャネルに関連付けられたプレビューURLを作成するために使用されます。CLIから返されたプレビューURLでWebアプリを開きます。 :それは次のようなものになります
PROJECT_ID -- CHANNEL_ID - RANDOM_HASH .web.app
プレビューURLを変更して更新するには、同じコマンドを再度実行します。コマンドには必ず同じ
CHANNEL_ID
を指定してください。
チャネルの有効期限を設定する方法など、プレビューチャネルの管理について学習します。
Firebase Hostingは、プルリクエストへの変更をコミットすると、プレビューURLを自動的に作成および更新するGitHubアクションをサポートしています。このGitHubアクションを設定して使用する方法を学びます。
ステップ3:ライブでデプロイする
変更を世界と共有する準備ができたら、ホスティングコンテンツと設定をライブチャンネルにデプロイします。 Firebaseは、ユースケースに応じて、このステップにいくつかの異なるオプションを提供します(以下のオプションを参照)。
オプション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
を使用します。
- ライブチャネルの場合、チャネルIDとして
変更を表示します(次のステップ)。
オプション2:ローカルプロジェクトディレクトリからライブチャネルにデプロイする
このオプションを使用すると、ライブチャネルに固有の構成を調整したり、プレビューチャネルを使用していない場合でも展開したりする柔軟性が得られます。
ローカルプロジェクトディレクトリのルートから、次のコマンドを実行します。
firebase deploy --only hosting
変更を表示します(次のステップ)。
ステップ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
コマンドに接続して、 firebase deploy
前またはデプロイ後のタスクを実行できます。たとえば、デプロイ後のフックは、新しいサイトコンテンツのデプロイを管理者に通知できます。詳細については、 FirebaseCLIのドキュメントを参照してください。
デプロイされたコンテンツのキャッシュ
静的コンテンツがリクエストされると、FirebaseHostingはコンテンツをCDNに自動的にキャッシュします。サイトのコンテンツを再デプロイすると、FirebaseはCDN全体でキャッシュされたすべての静的コンテンツを自動的にクリアして、新しいリクエストが新しいコンテンツを受信できるようにします。
動的コンテンツのキャッシュを構成できることに注意してください。
HTTPS経由でサービスを提供
Firebase Hostingでホストされていないすべての外部リソースが、外部スクリプトを含め、SSL(HTTPS)経由で読み込まれていることを確認してください。ほとんどのブラウザでは、ユーザーが「混合コンテンツ」(SSLおよび非SSLトラフィック)をロードすることを許可していません。
次のステップ
GitHubと統合し、GitHubアクションを設定して、プレビューされたコンテンツを繰り返します。
さらなるホスティング機能について学ぶ:
FirebaseCLIの完全なドキュメントをご覧ください。
アプリを起動する準備をします。
- Google CloudConsoleでプロジェクトの予算アラートを設定します。
- Firebaseコンソールで使用状況と課金のダッシュボードを監視して、複数のFirebaseサービスにわたるプロジェクトの使用状況の全体像を把握します。使用状況の詳細については、ホスティング使用状況ダッシュボードにアクセスすることもできます。
- Firebaseの起動チェックリストを確認します。