Surveiller et protéger les applications Web

Une fois vos applications publiées, vous devez les surveiller et les sécuriser :

Surveiller les performances de votre site avec App Hosting observabilité

Le panneau Aperçu de l'application dans Firebase Studio fournit des métriques et des informations clés sur votre application. Vous pouvez ainsi surveiller les performances de votre application Web à l'aide des outils d'observabilité intégrés de App Hosting. Une fois votre site déployé, vous pouvez accéder à l'aperçu en cliquant sur Publier. Dans ce panneau, vous pouvez effectuer les opérations suivantes :

  • Cliquez sur Publier pour publier une nouvelle version de votre application.
  • Partagez le lien vers votre application ou ouvrez-la directement dans Accéder à votre application.
  • Consultez un résumé des performances de votre application au cours des sept derniers jours, y compris le nombre total de requêtes et l'état de votre dernier déploiement. Cliquez sur Afficher les détails pour accéder à encore plus d'informations dans la Firebase console.
  • Affichez un graphique du nombre de requêtes reçues par votre application au cours des dernières 24 heures, ventilées par code d'état HTTP.
  • Affichez l'état d'activation des services Firebase tels que Firebase Authentication et Cloud Firestore.

Si vous fermez le panneau "Aperçu de l'application", vous pouvez le rouvrir à tout moment en cliquant sur Publier.

Pour en savoir plus sur la gestion et la surveillance des déploiements App Hosting, consultez Gérer les déploiements et les versions.

Genkit surveillance pour vos fonctionnalités déployées

Vous pouvez surveiller les étapes, les entrées et les sorties de votre fonctionnalité Genkit en activant la télémétrie dans le code de votre flux d'IA. La fonctionnalité de télémétrie de Genkit vous permet de surveiller les performances et l'utilisation de vos flux d'IA. Ces données peuvent vous aider à identifier les axes d'amélioration, à résoudre les problèmes, à optimiser vos prompts et vos flux pour améliorer les performances et l'efficacité des coûts, et à suivre l'utilisation de vos flux au fil du temps.

Pour configurer la surveillance dans Genkit, ajoutez la télémétrie aux flux d'IA Genkit puis affichez les résultats dans la console Firebase.

Étape 1 : Ajouter la télémétrie au code de votre flux Genkit dans Firebase Studio

Pour configurer la surveillance dans votre code :

  1. Si vous n'êtes pas déjà en Code view, cliquez sur Icône de changement de langue Passer au code pour l'ouvrir.

  2. Vérifiez package.json pour vous assurer de la version de Genkit installée.

  3. Ouvrez le terminal (Ctrl-Shift-C ou Cmd-Shift-C sous macOS).

  4. Cliquez dans le terminal et installez le plug-in Firebase à l'aide de la version correspondant à votre fichier package.json. Par exemple, si les Genkit packages de votre package.json sont en version 1.0.4, vous devez exécuter la commande suivante pour installer le plug-in :

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

  5. Dans Explorer, développez src > ai > flows. Un ou plusieurs fichiers TypeScript contenant vos Genkit flux s'affichent dans le dossier flows.

  6. Cliquez sur l'un des flux pour l'ouvrir.

  7. Au bas de la section des importations du fichier, ajoutez les éléments suivants pour importer et activer FirebaseTelemetry :

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

enableFirebaseTelemetry();

Étape 2 : Configurer les autorisations

Firebase Studio a activé les API requises lorsque vous avez configuré votre projet Firebase, mais vous devez également fournir des autorisations au App Hosting compte de service.

Pour configurer les autorisations :

  1. Dans la console Google Cloud, accédez à la page IAM et sélectionnez votre projet Firebase.

  2. Attribuez les rôles suivants au compte de service App Hosting :

    • Rédacteur de métriques Monitoring (roles/monitoring.metricWriter)
    • Agent Cloud Trace (roles/cloudtrace.agent)
    • Rédacteur de journaux (roles/logging.logWriter)

  3. Republiez votre application sur App Hosting.

  4. Une fois la publication terminée, chargez votre application et commencez à l'utiliser. Au bout de cinq minutes, votre application devrait commencer à enregistrer des données de télémétrie.

Étape 3 : Surveiller vos fonctionnalités d'IA générative dans la console Firebase

Lorsque la télémétrie est configurée, Genkit enregistre le nombre de requêtes, le taux de réussite et la latence de tous vos flux. Pour chaque flux spécifique, Genkit collecte des métriques de stabilité, affiche des graphiques détaillés et enregistre les traces capturées.

Pour surveiller vos fonctionnalités d'IA implémentées avec Genkit :

  1. Au bout de cinq minutes, dans la console Firebase, accédez à Services d'IA > Genkit pour examiner les prompts et les réponses de Genkit.

  2. Vous pouvez examiner les métriques de stabilité suivantes compilées par Genkit :

    • Nombre total de requêtes : nombre total de requêtes reçues par votre flux.
    • Taux de réussite : pourcentage de requêtes traitées avec succès.
    • Latence au 95e centile : latence au 95e centile de votre flux, qui correspond au temps nécessaire au traitement de 95% des requêtes.

    • Utilisation des jetons :

      • Jetons d'entrée : nombre de jetons envoyés au modèle dans le prompt.
      • Jetons de sortie : nombre de jetons générés par le modèle dans la réponse.

    • Utilisation des images :

      • Images d'entrée : nombre d'images envoyées au modèle dans le prompt.
      • Images de sortie : nombre d'images générées par le modèle dans la réponse.

  3. Vous pouvez développer les métriques de stabilité pour afficher les graphiques détaillés suivants :

    • Volume des requêtes au fil du temps.
    • Taux de réussite au fil du temps.
    • Jetons d'entrée et de sortie au fil du temps.
    • Latence (95e et 50e centiles) au fil du temps.

Pour en savoir plus sur Genkit, consultez leur documentation.

Protégez votre application avec Firebase App Check

Si vous avez intégré des services Firebase ou Google Cloud à votre application, Firebase App Check vous aide à protéger vos backends d'application contre toute utilisation abusive en empêchant les clients non autorisés d'accéder à vos ressources Firebase. Il fonctionne à la fois avec les services Google (y compris les services Firebase et Google Cloud) et vos propres backends personnalisés pour protéger vos ressources.

Nous vous recommandons d'ajouter App Check à toute application que vous publiez publiquement pour protéger vos ressources backend contre toute utilisation abusive.

Cette section vous explique comment configurer App Check dans Firebase Studio à l'aide de reCAPTCHA Enterprise pour une application Web créée par le App Prototyping agent. Toutefois, vous pouvez configurer App Check dans n'importe quelle application qui implémente des services Firebase et peut implémenter des fournisseurs personnalisés. Pour en savoir plus, consultez Firebase App Check.

reCAPTCHA Enterprise fournit jusqu'à 10 000 évaluations sans frais.

Étape 1 : Configurer reCAPTCHA Enterprise pour votre application

  1. Ouvrez la section reCAPTCHA EnterpriseGoogle Cloud de la console.

  2. Sélectionnez le nom de votre projet Firebase dans le sélecteur de projet de la console Google Cloud.

  3. Si vous êtes invité à activer l'API reCAPTCHA Enterprise, faites-le.

  4. Cliquez sur Commencer, puis ajoutez un nom à afficher pour votre clé de site reCAPTCHA.

  5. Acceptez la clé Type d'application Web par défaut.

  6. Cliquez sur Ajouter un domaine , puis ajoutez un domaine. Vous devez ajouter votre App Hosting domaine (par exemple, studio--PROJECT_ID.REGION.hosted.app) et tous les domaines personnalisés que vous utilisez ou prévoyez d'utiliser avec votre application.

  7. Cliquez sur Étape suivante.

  8. Laissez l'option Utiliserez-vous des défis ? désélectionnée.

  9. Cliquez sur Créer une clé.

  10. Copiez et enregistrez votre ID de clé , puis passez à Configurer App Check.

Étape 2 : Configurer App Check

  1. Ouvrez la Firebase console et cliquez sur Créer > App Check dans le menu de navigation.

  2. Cliquez sur Commencer, puis sur Enregistrer à côté de votre application.

  3. Cliquez pour développer reCAPTCHA et collez l'ID de clé que vous avez généré pour reCAPTCHA Enterprise.

  4. Cliquez sur Enregistrer.

Étape 3 : Ajouter App Check à votre code

  1. Revenez à Firebase Studio et, en mode Code, ajoutez la clé de site que vous avez générée à votre fichier .env :

    NEXT_PUBLIC_RECAPTCHA_SITE_KEY=RECAPTCHA_SITE_KEY

  2. Si votre configuration Firebase n'est pas déjà enregistrée dans .env, récupérez-la :

    • Dans la console, ouvrez Paramètres du projet et recherchez-la dans la section correspondant à votre application.Firebase

    • Dans le terminal en mode Code :

      1. Connectez-vous à Firebase : firebase auth login
      2. Sélectionnez votre projet : firebase use FIREBASE_PROJECT_ID
      3. Obtenez la configuration Firebase : firebase apps:sdkconfig

  3. Ajoutez la configuration à votre fichier .env pour qu'il ressemble à ceci :

    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. Ajoutez App Check au code de votre application. Vous pouvez demander à Gemini d'ajouter App Check avec reCAPTCHA Enterprise à votre application (veillez à spécifier "reCAPTCHA Enterprise" et à vérifier !), ou suivez les étapes décrites dans Initialiser App Check.

  5. Republiez votre site sur App Hosting. Essayez de tester votre base de données et vos fonctionnalités d'authentification pour générer des données.

  6. Vérifiez que App Check reçoit des requêtes dans la Firebase console en ouvrant Créer > App Check.

  7. Cliquez pour inspecter Cloud Firestore. Une fois que vous avez vérifié que les requêtes arrivent, cliquez sur Appliquer pour appliquer App Check.

  8. Répétez la validation et l'application pour Firebase Authentication.

Si, après avoir enregistré votre application pour App Check, vous souhaitez exécuter votre application dans un environnement que App Check ne classerait normalement pas comme valide, par exemple localement lors du développement ou à partir d'un environnement d'intégration continue (CI), vous pouvez créer une version de débogage de votre application qui utilise le fournisseur de débogage App Check au lieu d'un véritable fournisseur d'attestation. Pour en savoir plus at Use App Check with the debug provider in web apps.

Étapes suivantes