Firebase Studio でアプリを公開する

Firebase Studio には複数の公開オプションが用意されているため、プロジェクトのニーズに最適な方法を選択できます。使用できるオプションを大まかに示しています。

  • Firebase App Hosting: App Hosting は、動的 Next.js アプリケーションと Angular アプリケーションの公開に最適であり、組み込みフレームワークのサポート、GitHub との統合、Firebase AuthenticationCloud FirestoreFirebase AI Logic などの他の Firebase プロダクトとの統合を提供します。

    App Prototyping agent を使用して Next.js アプリを開発した場合は、数回クリックするだけで Firebase Studio から直接公開できます。

  • Firebase Hosting: ウェブアプリと静的ウェブ コンテンツ(HTML、CSS、JavaScript、画像、その他の静的アセット)およびシングルページ アプリのホスティングに適しています。Firebase Hosting は、グローバル CDN、無料の SSL 証明書、カスタム ドメインのサポートを通じて、高速なコンテンツ配信を実現します。

    Firebase Studio で静的ウェブアプリまたは単一ページ型ウェブアプリを開発した場合は、Firebase Studio から直接公開できます。そのためには Gemini in Firebase にアプリの公開を求めるプロンプトを入力します。

  • Cloud Run: コンテナ化されたアプリケーションをデプロイするには、Cloud Run を使用します。任意のプラットフォームで実行できるスケーラブルでポータブルなアプリケーションを公開する場合に適しています。

  • その他のデプロイ オプション: 他のプラットフォームや独自のサーバーなど、選択したホスティング ソリューションにデプロイします。

Firebase App Hosting を使用してアプリを公開、モニタリングする

アプリをテストしてワークスペースで問題がなければ、Firebase App Hosting を使用してウェブに公開できます。

App Hosting を設定すると、Firebase Studio によって Firebase プロジェクトが作成されます(Gemini API キーの自動生成またはその他のバックエンド サービスによってまだ作成されていない場合)。また、Cloud Billing アカウントのリンク手順が示されます。

アプリを公開するには:

  1. [公開] をクリックして Firebase プロジェクトを設定し、アプリを公開します。[アプリを公開する] ペインが表示されます。

  2. [Firebase プロジェクト] の手順で、App Prototyping agent にワークスペースに関連付けられている Firebase プロジェクトが表示されます。Firebase プロジェクトがまだ存在しない場合は、App Prototyping agent によって新しいプロジェクトが作成されます。続行するには、[次へ] をクリックします。

  3. [Cloud Billing アカウントをリンク] の手順では、次のいずれかを選択します。

    • Firebase プロジェクトにリンクする Cloud Billing アカウントを選択します。

    • Cloud Billing アカウントをお持ちでない場合、または新しいアカウントを作成したい場合は、[Cloud Billing アカウントを作成] をクリックします。そうすると、Google Cloud コンソールが開き、そこで 新しいセルフサービス Cloud Billing アカウントを作成できます。アカウントを作成したら、Firebase Studio に戻り、[Cloud Billing をリンク] リストからアカウントを選択します。

  4. [次へ] をクリックします。Firebase Studio は、ワークスペースに関連付けられたプロジェクトに請求先アカウントをリンクします。このプロジェクトは、Gemini API キーを自動生成したとき、または [公開] をクリックしたときに作成されます。

  5. [サービスを設定] をクリックします。アプリ プロトタイピング エージェントが Firebase サービスのプロビジョニングを開始します。

  6. [今すぐ公開] をクリックします。Firebase Studio は Firebase サービスを設定し、App Hosting のロールアウトを開始します。完了まで数分かかることがあります。裏側で行われていることの詳細については、App Hosting ビルドプロセスをご覧ください。

  7. 公開ステップが完了すると、App Hosting オブザーバビリティを備えた URL とアプリ分析情報とともに [アプリの概要] が表示されます。Firebase で生成されたドメインの代わりに、カスタム ドメイン(example.com や app.example.com など)を使用するには、Firebase コンソールでカスタム ドメインを追加します。

App Hosting の詳細については、App Hosting とその仕組みを理解するをご覧ください。

Cloud Firestore のみ)本番環境でセキュリティ ルールを検証する

公開が完了し、アプリが Firebase にデプロイされると、Cloud FirestoreFirebase Authentication は本番環境でテストできるようになります。

Firebase コンソールで Cloud FirestoreFirebase Authentication のデータを表示する

アプリを公開すると、Firebase コンソールでアプリのライブデータを確認できます。

  • ライブ Cloud Firestore データベースを表示するには、Firebase コンソールを開き、ナビゲーション メニューから [Build] > [Firestore Database] を選択します。

    ここから、保存されたデータの検査、セキュリティ ルールの表示とテスト、インデックスの作成を行うことができます。詳しくは、Cloud Firestore をご覧ください。

  • Firebase Authentication のライブデータを表示するには、Firebase コンソールを開き、ナビゲーション メニューから [Build] > [Authentication] を選択します。

    ここから、認証構成とアプリユーザーを検査できます。詳しくは、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 AuthenticationCloud Firestore などの Firebase サービスの有効化ステータスを表示します。

アプリの概要パネルを閉じた場合は、[公開] をクリックしていつでも再び開くことが可能です。

App Hosting ロールアウトの管理とモニタリングについての詳細は、ロールアウトとリリースを管理するをご覧ください。

App Hosting サイトをロールバックする

アプリの連続バージョンを App Hosting にデプロイした場合は、以前のバージョンのいずれかにロールバックできます。これを削除することもできます。

  • 公開済みのサイトをロールバックするには:

    1. Firebase コンソールで App Hosting を開きます。

    2. アプリのバックエンドを見つけて、[表示]、[ロールアウト] の順にクリックします。

    3. ロールバックするデプロイの横にある [その他] をクリックし、[このビルドにロールバックする] を選択して、確認します。

    詳細については、ロールアウトとリリースを管理するをご覧ください。

  • ウェブから App Hosting ドメインを削除するには:

    1. Firebase コンソールApp Hosting を開き、Firebase Studio アプリ セクションで [表示] をクリックします。

    2. [バックエンド情報] セクションで [管理] をクリックします。[ドメイン] ページが読み込まれます。

    3. ドメインの横にある [その他] をクリックし、[ドメインを無効にする] を選択して、確認します。

    これにより、ドメインがウェブから削除されます。App Hosting バックエンドを完全に削除するには、バックエンドを削除するの手順に沿って操作します。

Firebase Hosting

静的ウェブアプリと単一ページ型ウェブアプリは、Firebase Studio ワークスペースから Firebase Hosting に公開できます。

必要な Firebase プロジェクトの権限がない場合は、Firebase コンソールの [ユーザーと権限] ページで該当するロールを割り当ててもらうよう Firebase プロジェクト オーナーに依頼してください。オーナーの確認や割り当てなど、Firebase プロジェクトへのアクセスについてご不明な点がある場合は、Firebase プロジェクトに対する権限とアクセスをご覧ください。

Gemini in Firebase で公開する

  1. Gemini in Firebase チャットに「アプリを公開して」などのプロンプトを入力します。

  2. Gemini in Firebase が必要な手順を案内します。この手順には、Firebase プロジェクトの作成とアプリの登録も含まれます(まだ行っていない場合)。

Firebase Studio パネルから公開する

Firebase Hosting は、静的サイトとシングルページ アプリケーション向けに最適化されています。プロジェクトに動的コンテンツが含まれている場合、Gemini in Firebase が公開フローを開始しないことがあります。このような場合でも Firebase Hosting を使用したい場合は、Firebase Studio パネルからプロジェクトを公開します。

  1. Firebase プロジェクトを作成してアプリを登録します(まだ行っていない場合)。

  2. Firebase Studio ワークスペースを開きます。

    • App Prototyping agent を使用している場合は、コード切り替えアイコン [コードに切り替え] をクリックして Code ビューを開きます。
  3. ナビゲーション パネルで Firebase Studio アイコンをクリックしてパネルを開き、[Firebase Hosting] セクションを展開します。

  4. [Firebase を認証] をクリックし、ターミナル ウィンドウのプロンプトに従って Firebase アカウントを認証します。

  5. [Firebase Hosting を初期化] をクリックし、ターミナル ウィンドウのプロンプトに従って、デプロイ構成を設定します。

  6. アプリをデプロイするには、Firebase Studio パネルの [Firebase Hosting] セクションで [プロダクションにデプロイ] または [チャンネルにデプロイ] をクリックします。

Cloud Run

Cloud Run を使用してデプロイする前に、Google Cloud プロジェクトを設定し、Cloud Billing を有効にしてください

  1. Firebase Studio ワークスペースを開きます。App Prototyping agent を使用している場合は、コード切り替えアイコン [コードに切り替え] をクリックして Code ビューを開きます。

  2. ナビゲーション パネルで Firebase Studio アイコンをクリックして Firebase Studio パネルを開き、[Cloud Run にデプロイ] をクリックします。

  3. [このワークスペースに、自分の Google アカウントを使用して Google Cloud リソースにアクセスすることを許可する] を選択してから、ダイアログ ウィンドウで課金が有効になっている Google Cloud プロジェクトを選択します。

  4. Firebase Studio パネルの [Cloud Run] セクションで [認証] をクリックし、プロンプトに従って認証します。

  5. [デプロイ] をクリックし、プロンプトに従ってデプロイ構成を設定してアプリをデプロイします。

次のステップ