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 証明書、カスタム ドメインのサポートにより、高速なコンテンツ配信を提供します。

  • 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 が表示されます。Gemini API 鍵の生成中にプロジェクトが作成されなかった場合は、新しいプロジェクトが作成されます。続行するには、[次へ] をクリックします。

  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 ビルドプロセスをご覧ください。

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

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

App Hosting オブザーバビリティでアプリをモニタリングする

Firebase Studioの [アプリの概要] パネルには、アプリに関する主な指標と情報が表示されます。App Hosting に組み込まれたオブザーバビリティ ツールを使用して、ウェブアプリのパフォーマンスをモニタリングできます。サイトがロールアウトされたら、[公開] をクリックして概要にアクセスできます。このパネルでは次のことができます。

  • [公開] をクリックして、アプリの新しいバージョンをリリースします。
  • アプリへのリンクを共有するか、[アプリにアクセスする] でアプリを直接開きます。
  • リクエストの合計数や最新のロールアウトのステータスなど、過去 7 日間のアプリのパフォーマンスの概要を確認します。[詳細を表示] をクリックすると、Firebase コンソールでさらに詳細な情報にアクセスできます。
  • 過去 24 時間にアプリが受信したリクエスト数を HTTP ステータス コード別にグラフで表示します。

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

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 Hosting に公開する前に、Firebase プロジェクトを作成してアプリを登録します。

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

Firebase Studio から Firebase Hosting にアプリをデプロイするには:

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

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

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

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

  5. アプリをデプロイするには、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. [デプロイ] をクリックし、プロンプトに従ってデプロイ構成を設定してアプリをデプロイします。

次のステップ