ウェブアプリをモニタリングして保護する

アプリを公開した後は、アプリをモニタリングして保護する必要があります。

App Hosting オブザーバビリティでサイトのパフォーマンスをモニタリングする

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

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

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

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

デプロイされた機能のための Genkit モニタリング

AI フローコードへのテレメトリーを有効にすると、Genkit の機能のステップ、入力、出力をモニタリングできます。Genkit のテレメトリー機能を使用すると、AI フローのパフォーマンスと使用状況をモニタリングできます。このデータは、改善の余地がある部分の特定、問題のトラブルシューティング、プロンプトとフローの最適化によるパフォーマンスと費用対効果の向上、フローの使用状況の経時的な追跡に役立ちます。

Genkit でモニタリングを設定するには、Genkit AI フローにテレメトリーを追加してから、Firebase コンソールで結果を表示します。

ステップ 1: Firebase Studio の Genkit フローコードにテレメトリーを追加する

コード内でモニタリングを設定するには:

  1. Code ビューにまだ表示されていない場合は、コード切り替え アイコン [コードに切り替える] をクリックして開きます。

  2. package.json を確認して、インストールされている Genkit のバージョンを検証します。

  3. ターミナルを開きます（Ctrl-Shift-C、macOS では Cmd-Shift-C）。

  4. ターミナル内でクリックし、package.json ファイルと一致するバージョンを使用して Firebase プラグインをインストールします。たとえば、package.json の Genkit パッケージが 1.0.4 の場合、次のコマンドを実行してプラグインをインストールする必要があります。

    npm i --save @genkit-ai/firebase@1.0.4

  5. [エクスプローラ] で src > ai > flows を開きます。Genkit フローを含む TypeScript ファイルが flows フォルダに 1 つ以上表示されます。

  6. いずれかのフローをクリックして開きます。

  7. ファイルのインポート セクションの一番下に、以下を追加し FirebaseTelemetry をインポートして有効にします。

    import { enableFirebaseTelemetry } from '@genkit-ai/firebase';

enableFirebaseTelemetry();

ステップ 2: 権限を設定する

Firebase Studio は Firebase プロジェクトの設定時に必要な API を有効にしましたが、App Hosting サービス アカウントに権限を付与する必要があります。

権限を設定するには:

  1. Google Cloud IAM コンソールを開き、プロジェクトを選択して、App Hosting サービス アカウントに次のロールを付与します。

    • モニタリング指標の書き込み（roles/monitoring.metricWriter）
    • Cloud Trace エージェント（roles/cloudtrace.agent）
    • ログ書き込み（roles/logging.logWriter）

  2. App Hosting にアプリを再公開します。

  3. 公開が完了したら、アプリを読み込んで使用を開始します。5 分後に、アプリがテレメトリー データのロギングを開始します。

ステップ 3: Firebase コンソールで生成 AI 機能をモニタリングする

テレメトリーが構成されている場合、Genkit はすべてのフローのリクエスト数、成功数、レイテンシを記録します。また、特定のフローごとに、Genkit は安定性指標を収集して、詳細なグラフを表示し、キャプチャされたトレースをログに記録します。

Genkit で実装された AI 機能をモニタリングするには:

  1. 5 分後、Firebase コンソールで Genkit を開き、Genkit のプロンプトとレスポンスを確認します。

    Genkit は、次の安定性指標をコンパイルします。

    • 合計リクエスト数: フローによって受信されたリクエストの合計数。
    • 成功率: 正常に処理されたリクエストの割合。
    • 95%のレイテンシ: フローの 95% のレイテシ、これは 95% のリクエストが処理されるまでにかかる時間です。

    • トークン使用量:

      • 入力トークン: プロンプトでモデルに送信されたトークン数。
      • 出力トークン: レスポンスでモデルによって生成されたトークンの数。

    • 画像の使用:

      • 入力画像: プロンプトでモデルに送信される画像の数。
      • 出力画像: レスポンスでモデルによって生成された画像の数。

    安定性指標を開くと、詳細なグラフが表示されます。

    • リクエスト数の推移。
    • 成功率の推移。
    • 入力トークンと出力トークンの推移。
    • レイテンシ（95 パーセンタイルおよび 50 パーセンタイル）の推移。

Genkit について詳しくは Genkit をご覧ください。

Firebase App Check でアプリを保護する

Firebase サービスまたは Google Cloud サービスをアプリに統合している場合、Firebase App Check は、未承認のクライアントが Firebase リソースにアクセスするのを防ぐことで、アプリのバックエンドを不正使用から保護します。Google サービス（Firebase や Google Cloud サービスを含む）と独自のカスタマイズされたバックエンドの両方と連携して、リソースを安全に保ちます。

バックエンド リソースを不正使用から保護するため、一般公開するアプリには App Check を追加することをおすすめします。

このセクションでは、App Prototyping agent によって作成されたウェブアプリで reCAPTCHA Enterprise を使用して Firebase Studio 内に App Check を設定する方法について説明します。ただし、Firebase サービスを実装し、カスタム プロバイダを実装できる任意のアプリ内で App Check を設定できます。詳しくは、Firebase App Checkをご覧ください。

reCAPTCHA Enterprise では、最大 10,000 件のアセスメントを無料で利用できます。

ステップ 1: アプリに reCAPTCHA Enterprise を設定する

  1. Google Cloud コンソールの [reCAPTCHA Enterprise] セクションを開きます。

  2. Google Cloud コンソールのプロジェクト選択ツールから Firebase プロジェクトの名前を選択します。

  3. reCAPTCHA Enterprise API を有効にするよう求めるメッセージが表示された場合は、有効にします。

  4. [使ってみる] をクリックし、reCAPTCHA サイトキーの表示名を追加します。

  5. デフォルトの [ウェブ] [アプリケーションの種類] キーを受け入れます。

  6. [ドメインを追加] をクリックしてドメインを追加します。App Hosting ドメイン（studio--PROJECT_ID.REGION.hosted.app など）と、アプリで使用している、または使用を予定しているカスタム ドメインを追加します。

  7. [次のステップ] をクリックします。

  8. [チャレンジを使用する] は選択しないでください。

  9. [鍵を作成] をクリックします。

  10. Key ID をコピーして保存し、App Check を構成するに進みます。

ステップ 6: App Check を設定する

  1. Firebase コンソールを開き、ナビゲーション メニューから [ビルド] > [App Check] をクリックします。

  2. [使ってみる] をクリックし、アプリの横にある [登録] をクリックします。

  3. [ReCAPTCHA] をクリックして展開し、reCAPTCHA Enterprise 用に生成した Key ID を貼り付けます。

  4. [保存] をクリックします。

ステップ 3: コードに App Check を追加する

  1. Firebase Studio に戻り、Code ビューで、生成したサイトキーを .env ファイルに追加します。

    NEXT_PUBLIC_RECAPTCHA_SITE_KEY=RECAPTCHA_SITE_KEY

  2. Firebase 構成を .env に保存していない場合は、次のように取得します。

    • Firebase コンソールで [プロジェクトの設定] を開き、アプリに対応するセクションで探します。

    • Code ビューのターミナルから:

      1. Firebase にログインする：firebase auth login
      2. プロジェクトを選択する: firebase use FIREBASE_PROJECT_ID
      3. Firebase 構成を取得する:firebase apps:sdkconfig

  3. 構成を .env ファイルに追加して、次のようにします。

    NEXT_PUBLIC_FIREBASE_API_KEY=FIREBASE_API_KEY
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=FIREBASE_AUTH_DOMAIN
NEXT_PUBLIC_FIREBASE_PROJECT_ID=FIREBASE_PROJECT_ID
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=FIREBASE_STORAGE_BUCKET
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=FIREBASE_MESSAGING_SENDER_ID
NEXT_PUBLIC_FIREBASE_APP_ID=FIREBASE_APP_ID
NEXT_PUBLIC_RECAPTCHA_SITE_KEY=RECAPTCHA_SITE_KEY

  4. アプリコードに App Check を追加します。Gemini に、reCAPTCHA Enterprise を使用して App Check をアプリに追加するよう依頼できます（必ず「reCAPTCHA Enterprise」を指定し、必ず再確認してください）。または、App Check を初期化するの手順に沿って操作します。

  5. サイトを App Hosting に再公開します。Firebase の機能をテストしてデータを生成してみましょう。

  6. Firebase コンソールで [Build] > [App Check] を開き、App Check がリクエストを受信していることを確認します。

  7. クリックして Firebase サービスを検査します。リクエストが届いていることを確認したら、[適用] をクリックして App Check を適用します。

  8. Firebase Authentication の検証と適用を繰り返します。

アプリを App Check に登録した後に、App Check が通常は有効として分類しない環境（ローカルの開発環境や継続的インテグレーション（CI）環境など）でアプリを実行する場合は、実際の証明書プロバイダの代わりに App Check デバッグ プロバイダを使用するアプリのデバッグビルドを作成できます。 詳しくは、ウェブアプリのデバッグ プロバイダで App Check を使用するをご覧ください。

次のステップ