Surveiller et protéger les applications Web

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

• Si vous publiez avec Firebase Hosting, vous pouvez associer votre projet Firebase à Cloud Logging pour surveiller l'utilisation et accéder aux journaux des requêtes Web. Pour en savoir plus, consultez Afficher, rechercher et filtrer vos journaux de requêtes Web avec Cloud Logging.

• Si vous utilisez App Prototyping agent pour publier avec Firebase App Hosting, vous pouvez utiliser ses fonctionnalités d'observabilité pour surveiller les performances de votre site Web. Vous pouvez également écrire des journaux dans Cloud Logging et afficher les journaux et les métriques dans la console Firebase.

• Si vous utilisez l'IA dans votre application avec Genkit, vous pouvez surveiller le fonctionnement de vos fonctionnalités d'IA générative en production.

• Si votre application inclut des services Firebase, sécurisez-les avec Firebase App Check.

Surveiller les performances de votre site avec l'observabilité App Hosting

Le panneau Présentation de l'application dans Firebase Studio fournit des métriques et des informations clés sur votre application, ce qui vous permet de 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. Depuis ce panneau, vous pouvez :

• Cliquez sur Publier pour lancer une nouvelle version de votre application.
• Partagez le lien vers votre application ou ouvrez-la directement dans Accéder à votre application.
• Consultez un récapitulatif 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 console Firebase.
• 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.

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 Surveiller 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 pour 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 requêtes 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, vous devez ajouter la télémétrie aux flux d'IA Genkit, puis afficher les résultats dans la console Firebase.

Important : Genkit Monitoring s'appuie sur des données de télémétrie écrites dans Google Cloud Logging, Metrics et Trace, qui sont des services payants. Consultez la page Tarifs de Google Cloud Observability pour en savoir plus sur les tarifs et les limites du niveau sans frais.

Étape 1 : Ajoutez 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 vue Code, cliquez sur Passer au code pour l'ouvrir.

2. Vérifiez package.json pour connaître 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 en utilisant la version qui correspond à votre fichier package.json. Par exemple, si les packages Genkit de votre package.json sont à la 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 l'explorateur, développez src > ai > flows. Un ou plusieurs fichiers TypeScript contenant vos flux Genkit s'affichent dans le dossier flows.

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

   Conseil : Notez la section prompt du fichier. Vous pouvez la modifier manuellement pour affiner les réponses de Gemini.

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();
   

   Conseil : Pour en savoir plus sur les options de télémétrie avancées dans Genkit, consultez Configuration avancée.

Étape 2 : Configurez les autorisations

Firebase Studio a activé les API requises pour vous lors de la configuration de votre projet Firebase, mais vous devez également accorder des autorisations au compte de service App Hosting.

Pour configurer les autorisations :

1. Ouvrez la console IAM Google Cloud, sélectionnez votre projet, puis 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)

2. Republiez votre application sur App Hosting.

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

Étape 3 : Surveillez 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 pour 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, ouvrez Genkit dans la console Firebase et examinez les requêtes et les réponses de Genkit.

   Genkit compile les métriques de stabilité suivantes :

   • Nombre total de requêtes : nombre total de requêtes reçues par votre flux.
   • Taux de réussite : pourcentage de demandes traitées avec succès.
   • Latence au 95e centile : latence au 95e centile de votre flux, c'est-à-dire le 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 la requête.
     • 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 la requête.
     • Images de sortie : nombre d'images générées par le modèle dans la réponse.

   Si vous développez les métriques de stabilité, des graphiques détaillés sont disponibles :

   • 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 (50e et 95e centiles) au fil du temps.

En savoir plus sur Genkit sur Genkit

Protéger 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 les backends de votre 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 Firebase et les services Google Cloud) et avec vos propres backends personnalisés pour protéger vos ressources.

Nous vous recommandons d'ajouter App Check à toutes les applications que vous publiez publiquement pour protéger vos ressources de backend contre les utilisations abusives.

Cette section vous explique comment configurer App Check dans Firebase Studio à l'aide de reCAPTCHA Enterprise pour une application Web créée par 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 propose jusqu'à 10 000 évaluations sans frais.

Étape 1 : Configurer reCAPTCHA Enterprise pour votre application

1. Ouvrez la section reCAPTCHA Enterprise de la console Google Cloud.

2. Sélectionnez le nom de votre projet Firebase dans l'outil de sélection de projets de la console Google Cloud.

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

4. Cliquez sur Get started (Commencer), puis ajoutez un Display name (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 domaine App Hosting (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. Ne sélectionnez pas Allez-vous utiliser des tests ?.

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 console Firebase, puis 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, puis collez l'ID de clé que vous avez généré pour reCAPTCHA Enterprise.

4. Cliquez sur Enregistrer.

Étape 3 : Ajoutez App Check à votre code

1. Revenez à Firebase Studio et, dans la vue 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 vous n'avez pas encore enregistré votre configuration Firebase dans .env, obtenez-la :

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

   • Dans le terminal de la vue 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 à ce qui suit :

   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 (assurez-vous de spécifier "reCAPTCHA Enterprise" et de bien vérifier l'orthographe), ou suivez les étapes décrites dans Initialiser App Check.

5. Republiez votre site sur App Hosting. Essayez de tester vos fonctionnalités Firebase pour générer des données.

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

7. Cliquez pour inspecter les services Firebase. Après avoir 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 l'exécuter dans un environnement que App Check ne classerait normalement pas comme valide (par exemple, localement pendant le 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, consultez Utiliser App Check avec le fournisseur de débogage dans les applications Web.

Étapes suivantes

• Personnalisez votre espace de travail Firebase Studio.

• Développez, publiez et surveillez une application Web full stack avec App Prototyping agent.