Surveiller et protéger les applications Web

Après avoir publié vos applications, 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 l'exécution 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 Vue d'ensemble de l'application de 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 à la vue d'ensemble en cliquant sur Publier. Dans ce panneau, vous pouvez :

• 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 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.
• 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.

Surveillance Genkit pour vos caractéristiques 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 pour Genkit vous permet de surveiller les performances et l'utilisation de vos flux d'IA. Ces données peuvent vous aider à identifier les points à améliorer, à résoudre les problèmes, à optimiser vos requêtes et vos flux pour améliorer les performances et la rentabilité, 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 : La surveillance Genkit 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à dans la vue Code, cliquez sur  Passer au code pour l'ouvrir.

2. Vérifiez package.json pour vérifier 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 apparaissent 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. 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. Après cinq minutes, votre application devrait commencer à consigner 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, de réussites et de latence pour tous vos flux. Pour chaque flux spécifique, Genkit collecte des métriques de stabilité, affiche des graphiques détaillés et consigne les traces capturées.

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

1. Après cinq minutes, dans la console Firebase, accédez à Services d'IA > Genkit pour examiner les requêtes 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 pour que 95 % des requêtes soient traitées.

   • 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 de l'image :

     • 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.

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 sa documentation.

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 vos backends d'application contre les utilisations abusives 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 afin de 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 les 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 : Configurez 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 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 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. Laissez l'option Allez-vous utiliser des tests ? décochée.

9. Cliquez sur Créer une clé.

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

Étape 2 : Configurez App Check

1. Ouvrez la console Firebase, puis cliquez sur Build > 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, dans 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 afin qu'il se présente comme 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 (veillez à spécifier "reCAPTCHA Enterprise" et à vérifier ce point). Vous pouvez également suivre les étapes de la section Initialiser App Check.

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

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

7. Cliquez pour inspecter Cloud Firestore. 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.