Firebase Studio には複数の公開オプションが用意されているため、プロジェクトのニーズに最適な方法を選択できます。使用できるオプションを大まかに示しています。
Firebase App Hosting: App Hosting は、動的 Next.js アプリケーションと Angular アプリケーションの公開に最適であり、組み込みフレームワークのサポート、GitHub との統合、Firebase Authentication、Cloud Firestore、Firebase AI Logic などの他の Firebase プロダクトとの統合を提供します。
App Prototyping agent を使用して Next.js アプリを開発した場合は、数回クリックするだけで Firebase Studio から直接公開できます。
Firebase Hosting: ウェブアプリと静的ウェブ コンテンツ(HTML、CSS、JavaScript、画像、その他の静的アセット)およびシングルページ アプリのホスティングに適しています。Firebase Hosting は、グローバル CDN、無料の SSL 証明書、および カスタム ドメインのサポートを通じて、高速な コンテンツ配信を実現します。
Firebase Studio で静的ウェブアプリまたはシングルページ型ウェブアプリを開発した場合は、Firebase Studio から直接公開できます。Gemini にアプリの公開を求めてください。
Cloud Run: コンテナ化されたアプリケーションをデプロイするには、Cloud Run を使用します。任意のプラットフォームで実行できるスケーラブルでポータブルなアプリケーションを公開する場合に適しています。
その他のデプロイ オプション: 他のプラットフォームや独自のサーバーなど、選択したホスティング ソリューションにデプロイします。
Firebase App Hosting を使用してアプリを公開、モニタリングする
アプリをテストしてワークスペースで問題がなければ、Firebase App Hosting を使用してウェブに公開できます。
App Hosting を設定すると、Firebase Studio によって Firebase プロジェクトが作成されます(Gemini API キーの自動生成またはその他のバックエンド サービスによってまだ作成されていない場合)。また、Cloud Billing アカウントのリンク手順が示されます。
アプリを公開するには:
[公開] をクリックして Firebase プロジェクトを設定し、アプリを公開します。[アプリを公開する] ペインが表示されます。
[Firebase プロジェクト] の手順で、App Prototyping agent にワークスペースに関連付けられている Firebase プロジェクトが表示されます。Firebase プロジェクトがまだ存在しない場合は、App Prototyping agent によって新しいプロジェクトが作成されます。続行するには、[次へ] をクリックします。
[Cloud Billing アカウントをリンク] の手順では、次のいずれかを選択します。
Firebase プロジェクトにリンクする Cloud Billing アカウントを選択します。
Cloud Billing アカウントをお持ちでない場合、または新しいアカウントを作成したい場合は、[Cloud Billing アカウントを作成] をクリックします。そうすると、Google Cloud コンソールが開き、そこで 新しいセルフサービス Cloud Billing アカウントを作成できます。アカウントを作成したら、Firebase Studio に戻り、[Cloud Billing をリンク] リストからアカウントを選択します。
[次へ] をクリックします。Firebase Studio は、ワークスペースに関連付けられたプロジェクトに請求先アカウントをリンクします。このプロジェクトは、Gemini API キーを自動生成したとき、または [公開] をクリックしたときに作成されます。
[サービスを設定] をクリックします。App Prototyping agent が Firebase サービスのプロビジョニングを開始します。
[今すぐ公開] をクリックします。Firebase Studio は Firebase サービスを設定し、App Hosting のロールアウトを開始します。完了まで数分かかることがあります。裏側で行われていることの詳細については、App Hosting ビルドプロセスをご覧ください。
公開ステップが完了すると、App Hosting オブザーバビリティを備えた URL とアプリ分析情報とともに [アプリの概要] が表示されます。Firebase で生成されたドメインの代わりに、カスタム ドメイン(example.com や app.example.com など)を使用するには、Firebase コンソールでカスタム ドメインを追加します。
App Hosting の詳細については、App Hosting とその仕組みを理解するをご覧ください。
(Cloud Firestore のみ)インデックスを追加して本番環境でセキュリティ ルールを検証する
公開が完了し、アプリが Firebase にデプロイされると、Cloud Firestore と Firebase Authentication は本番環境でテストできるようになります。
Cloud Firestore データベースのインデックスを生成する
アプリを Cloud Firestore にデプロイしても、インデックスは自動的に生成されません。つまり、公開後にクエリのインデックスの生成が必要になる場合があります。
このことが、エラー メッセージやブラウザのデベロッパー コンソールに表示されることがあります。
公開後にインデックスを生成するには:
公開済みアプリの場合: [アプリの概要] ペインで(表示されていない場合は [公開] をクリック)、[アプリにアクセスする] リンクを見つけてクリックします。
Firebase Studio プレビューの場合: ブラウザのデベロッパー コンソールを開き、Cloud Firestore が生成するエラー 200 メッセージを見つけます。
アプリ内のすべてのフローをテストします。次のようなエラー メッセージ「レシピの読み込みエラー。クエリにはインデックスが必要です。こちらから作成できます。」が、Firebase コンソールへのリンクとともに表示されることがあります。
リンクをクリックすると、Firebase コンソールに移動し、推奨インデックスが表示されます。
[保存] をクリックして、推奨インデックスを受け入れます。
アプリに戻ってページを再読み込みします。
引き続きアプリのすべてのフローをテストし、必要に応じてインデックスを追加します。
詳細については、Cloud Firestore でインデックスを管理するをご覧ください。
Firebase コンソールで Cloud Firestore と Firebase Authentication のデータを表示する
アプリを公開すると、Firebase コンソールでアプリのライブデータを確認できます。
ライブ Cloud Firestore データベースを表示するには、Firebase コンソールを開き、ナビゲーション メニューから [ビルド] > [Firestore データベース] を選択します。
ここから、保存されたデータの検査、セキュリティ ルールの表示とテスト、インデックスの作成を行うことができます。詳しくは、Cloud Firestore をご覧ください。
Firebase Authentication のライブデータを表示するには、Firebase コンソールを開き、ナビゲーション メニューから [ビルド] > [認証] を選択します。
ここから、認証構成とアプリユーザーを検査できます。詳しくは、Firebase Authentication をご覧ください。
本番環境で Cloud Firestore ルールをテストする
アプリを公開したら、本番環境に対して Cloud Firestore セキュリティ ルールを再度テストする必要があります。これにより、承認されたユーザーがデータにアクセスでき、不正アクセスから保護されます。
ルールは、次のすべての方法でテストできます。
アプリケーション テスト: デプロイされたアプリケーションを操作し、さまざまなユーザーロールまたは状態に対してさまざまなデータアクセス パターン(読み取り、書き込み、削除)をトリガーするオペレーションを実行します。この実環境でのテストにより、ルールが実際に正しく適用されていることを確認できます。
ルール プレイグラウンド: ターゲットを絞ったチェックを行うには、Firebase コンソールのルール プレイグラウンドを使用します。このツールを使用すると、本番環境ルールを使用して Cloud Firestore データベースに対するリクエスト(読み取り、書き込み、削除)をシミュレートできます。ユーザー認証の状態、データへのパス、オペレーションのタイプを指定して、ルールが意図したとおりにアクセスを許可または拒否するかどうかを確認できます。
単体テスト: より包括的なテストを行うには、セキュリティ ルールの単体テストを作成します。Firebase Local Emulator Suite を搭載した Firebase Studio プレビュー バックエンドを使用すると、これらのテストをローカルで実行し、本番環境ルールの動作をシミュレートできます。これは、複雑なルールロジックを検証し、さまざまなシナリオのカバレッジを確認する堅牢な方法です。デプロイ後、エミュレータを使用する単体テストが想定どおりに動作し、すべてのシナリオを網羅していることを再確認する必要があります。
App Hosting オブザーバビリティでアプリをモニタリングする
Firebase Studioの [アプリの概要] パネルには、アプリに関する主な指標と情報が表示されます。App Hosting に組み込まれたオブザーバビリティ ツールを使用して、ウェブアプリのパフォーマンスをモニタリングできます。サイトがロールアウトされたら、[公開] をクリックして概要にアクセスできます。このパネルでは次のことができます。
- [公開] をクリックして、アプリの新しいバージョンをリリースします。
- アプリへのリンクを共有するか、[アプリにアクセスする] でアプリを直接開きます。
- リクエストの合計数や最新のロールアウトのステータスなど、過去 7 日間のアプリのパフォーマンスの概要を確認します。[詳細を表示] をクリックすると、Firebase コンソールでさらに詳細な情報にアクセスできます。
- 過去 24 時間にアプリが受信したリクエスト数を HTTP ステータス コード別にグラフで表示します。
- Firebase Authentication や Cloud Firestore などの Firebase サービスの有効化ステータスを表示します。
アプリの概要パネルを閉じた場合は、[公開] をクリックしていつでも再び開くことが可能です。
App Hosting ロールアウトの管理とモニタリングについての詳細は、ロールアウトとリリースを管理するをご覧ください。
App Hosting サイトをロールバックする
アプリの連続バージョンを App Hosting にデプロイした場合は、以前のバージョンのいずれかにロールバックできます。これを削除することもできます。
公開済みのサイトをロールバックするには:
Firebase コンソールで App Hosting を開きます。
アプリのバックエンドを見つけて、[表示]、[ロールアウト] の順にクリックします。
ロールバックするデプロイの横にある [その他] をクリックし、[このビルドにロールバックする] を選択して、確認します。
詳細については、ロールアウトとリリースを管理するをご覧ください。
ウェブから App Hosting ドメインを削除するには:
Firebase コンソールで App Hosting を開き、Firebase Studio アプリ セクションで [表示] をクリックします。
[バックエンド情報] セクションで [管理] をクリックします。[ドメイン] ページが読み込まれます。
ドメインの横にある [その他] をクリックし、[ドメインを無効にする] を選択して、確認します。
これにより、ドメインがウェブから削除されます。App Hosting バックエンドを完全に削除するには、バックエンドを削除するの手順に沿って操作します。
Firebase Hosting
静的ウェブアプリと単一ページ型ウェブアプリは、Firebase Studio ワークスペースから Firebase Hosting に公開できます。
必要な Firebase プロジェクトの権限がない場合は、Firebase コンソールの [ユーザーと権限] ページで該当するロールを割り当ててもらうよう Firebase プロジェクト オーナーに依頼してください。オーナーの確認や割り当てなど、Firebase プロジェクトへのアクセスについてご不明な点がある場合は、Firebase プロジェクトに対する権限とアクセスをご覧ください。
Gemini のサポートを受けて公開する
Gemini とのチャットで、「アプリを公開して」などのプロンプトを入力します。
Gemini が必要な手順を案内します。この手順には、Firebase プロジェクトの作成とアプリの登録も含まれます(まだ行っていない場合)。
Firebase Studio パネルから公開する
Firebase Hosting は、静的サイトとシングルページ アプリケーション向けに最適化されています。 プロジェクトに動的コンテンツが含まれている場合、Gemini が公開フローを開始しないことがあります。このような場合でも Firebase Hosting を使用したい場合は、Firebase Studio パネルからプロジェクトを公開します。
Firebase プロジェクトを作成してアプリを登録します(まだ行っていない場合)。
Firebase Studio ワークスペースを開きます。
- App Prototyping agent を使用している場合は、
[コードに切り替え] をクリックして Code ビューを開きます。
- App Prototyping agent を使用している場合は、
ナビゲーション パネルで Firebase Studio アイコンをクリックしてパネルを開き、[Firebase Hosting] セクションを展開します。
[Firebase を認証] をクリックし、ターミナル ウィンドウのプロンプトに従って Firebase アカウントを認証します。
[Firebase Hosting を初期化] をクリックし、ターミナル ウィンドウのプロンプトに従って、デプロイ構成を設定します。
アプリをデプロイするには、Firebase Studio パネルの [Firebase Hosting] セクションで [プロダクションにデプロイ] または [チャンネルにデプロイ] をクリックします。
Cloud Run
Cloud Run を使用してデプロイする前に、Google Cloud プロジェクトを設定し、Cloud Billing を有効にしてください
Firebase Studio ワークスペースを開きます。App Prototyping agent を使用している場合は、
[コードに切り替え] をクリックして Code ビューを開きます。
ナビゲーション パネルで Firebase Studio アイコンをクリックして Firebase Studio パネルを開き、[Cloud Run にデプロイ] をクリックします。
[このワークスペースに、自分の Google アカウントを使用して Google Cloud リソースにアクセスすることを許可する] を選択してから、ダイアログ ウィンドウで課金が有効になっている Google Cloud プロジェクトを選択します。
Firebase Studio パネルの [Cloud Run] セクションで [認証] をクリックし、プロンプトに従って認証します。
[デプロイ] をクリックし、プロンプトに従ってデプロイ構成を設定してアプリをデプロイします。