Monitorare e proteggere le app web

Dopo aver pubblicato le app, devi monitorarle e proteggerle:

Monitorare le prestazioni del sito con l'osservabilità App Hosting

Il riquadro Panoramica dell'app in Firebase Studio fornisce metriche e informazioni chiave sulla tua app, consentendoti di monitorare il rendimento della tua app web utilizzando App Hosting's built-in observability tools. Dopo il lancio del sito, puoi accedere alla panoramica facendo clic su Pubblica. Da questo riquadro puoi:

  • Fai clic su Pubblica per rilasciare una nuova versione dell'app.
  • Condividi il link alla tua app o apri l'app direttamente in Visita la tua app.
  • Esamina un riepilogo del rendimento dell'app negli ultimi 7 giorni, incluso il numero totale di richieste e lo stato dell'ultimo lancio. Fai clic su Visualizza dettagli per accedere a ulteriori informazioni nella Firebase console.
  • Visualizza un grafico del numero di richieste ricevute dalla tua app nelle ultime 24 ore, suddivise per codice di stato HTTP.
  • Visualizza lo stato di attivazione dei servizi Firebase come Firebase Authentication e Cloud Firestore.

Se chiudi il riquadro Panoramica dell'app, puoi riaprirlo in qualsiasi momento facendo clic su Pubblica.

Scopri di più sulla gestione e il monitoraggio dei lanci di App Hosting in Gestire lanci e release.

Genkit Monitoraggio per le funzionalità di cui hai eseguito il deployment

Puoi monitorare i passaggi, gli input e gli output delle funzionalità Genkit abilitando la telemetria per il codice del flusso AI. La funzionalità di telemetria di Genkit ti consente di monitorare il rendimento e l'utilizzo dei flussi AI. Questi dati possono aiutarti a identificare le aree di miglioramento, risolvere i problemi, ottimizzare i prompt e i flussi per un rendimento e un'efficienza in termini di costi migliori e monitorare l'utilizzo dei flussi nel tempo.

Per configurare il monitoraggio in Genkit, aggiungi la telemetria ai flussi AI di Genkit e poi visualizza i risultati nella console Firebase.

Passaggio 1: aggiungi la telemetria al codice del flusso Genkit in Firebase Studio

Per configurare il monitoraggio nel codice:

  1. Se non sei già nella visualizzazione Code, fai clic su Icona Cambia codice Passa al codice per aprirla.

  2. Controlla package.json per verificare la versione di Genkit installata.

  3. Apri il terminale (Ctrl-Shift-C o Cmd-Shift-C in macOS).

  4. Fai clic all'interno del terminale e installa il plug-in Firebase utilizzando la versione corrispondente al file package.json. Ad esempio, se i Genkit pacchetti in package.json sono alla versione 1.0.4, devi eseguire il seguente comando per installare il plug-in:

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

  5. Da Explorer, espandi src > ai > flows. Nella cartella flows vengono visualizzati uno o più file TypeScript contenenti i flussi Genkit.

  6. Fai clic su uno dei flussi per aprirlo.

  7. Nella parte inferiore della sezione delle importazioni del file, aggiungi quanto segue per importare e abilitare FirebaseTelemetry:

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

enableFirebaseTelemetry();

Passaggio 2: configura le autorizzazioni

Firebase Studio ha abilitato le API richieste quando ha configurato il tuo progetto Firebase, ma devi anche fornire le autorizzazioni al App Hosting service account.

Per configurare le autorizzazioni:

  1. Apri la console IAM Google Cloud seleziona il tuo progetto e poi assegna i seguenti ruoli al service account di App Hosting:

    • Monitoring Metric Writer (roles/monitoring.metricWriter)
    • Agente Cloud Trace (roles/cloudtrace.agent)
    • Scrittore log (roles/logging.logWriter)

  2. Pubblica di nuovo l'app in App Hosting.

  3. Al termine della pubblicazione, carica l'app e inizia a utilizzarla. Dopo cinque minuti, l'app dovrebbe iniziare a registrare i dati di telemetria.

Passaggio 3: monitora le funzionalità di AI generativa nella console Firebase

Quando la telemetria è configurata, Genkit registra il numero di richieste, successo e latenza per tutti i flussi e, per ogni flusso specifico, Genkit raccoglie le metriche di stabilità, mostra grafici dettagliati e registra le tracce acquisite.

Per monitorare le funzionalità AI implementate con Genkit:

  1. Dopo cinque minuti, apri Genkit nella Firebase console ed esamina i prompt e le risposte di Genkit.

    Genkit compila le seguenti metriche di stabilità:

    • Richieste totali: il numero totale di richieste ricevute dal flusso.
    • Percentuale di successo: la percentuale di richieste elaborate correttamente.
    • Latenza del 95° percentile: la latenza del 95° percentile del flusso, ovvero il tempo necessario per elaborare il 95% delle richieste.

    • Utilizzo dei token:

      • Token di input: il numero di token inviati al modello nel prompt.
      • Token di output: il numero di token generati dal modello nella risposta.

    • Utilizzo delle immagini:

      • Immagini di input: il numero di immagini inviate al modello nel prompt.
      • Immagini di output: il numero di immagini generate dal modello nella risposta.

    Se espandi le metriche di stabilità, sono disponibili grafici dettagliati:

    • Volume delle richieste nel tempo.
    • Percentuale di successo nel tempo.
    • Token di input e output nel tempo.
    • Latenza (95° e 50° percentile) nel tempo.

Scopri di più su Genkit all'indirizzo Genkit.

Proteggere l'app con Firebase App Check

Se hai integrato i servizi Firebase o Google Cloud nella tua app, Firebase App Check ti aiuta a proteggere i backend delle app da utilizzi illeciti impedendo ai client non autorizzati di accedere alle risorse Firebase. Funziona sia con i servizi Google (inclusi i servizi Firebase e Google Cloud) sia con i tuoi backend personalizzati per proteggere le tue risorse.

Ti consigliamo di aggiungere App Check a qualsiasi app che pubblichi pubblicamente per proteggere le risorse di backend da utilizzi illeciti.

Questa sezione ti guida nella configurazione di App Check in Firebase Studio utilizzando reCAPTCHA Enterprise per un'app web creata da App Prototyping agent, ma puoi configurare App Check in qualsiasi app che implementa i servizi Firebase e può implementare provider personalizzati. Scopri di più in Firebase App Check.

reCAPTCHA Enterprise fornisce fino a 10.000 valutazioni senza costi.

Passaggio 1: configura reCAPTCHA Enterprise per la tua app

  1. Apri la sezione reCAPTCHA Enterprise della console Google Cloud.

  2. Seleziona il nome del tuo progetto Firebase dal selettore di progetti della console Google Cloud.

  3. Se ti viene chiesto di abilitare l'API reCAPTCHA Enterprise, fallo.

  4. Fai clic su Inizia e aggiungi un Nome visualizzato per la chiave del sito reCAPTCHA.

  5. Accetta la chiave Tipo di applicazione Web predefinita.

  6. Fai clic su Aggiungi un dominio e aggiungi un dominio. Dovrai aggiungere il tuo App Hosting dominio (ad esempio studio--PROJECT_ID.REGION.hosted.app) e tutti i domini personalizzati che utilizzi o che prevedi di utilizzare con la tua app.

  7. Fai clic su Passaggio successivo.

  8. Lascia deselezionata l'opzione Utilizzerai le verifiche?.

  9. Fai clic su Crea chiave.

  10. Copia e salva il tuo ID chiave e procedi alla configurazione di App Check.

Passaggio 2: configura App Check

  1. Apri la Firebase console e fai clic su Crea > App Check dal menu di navigazione.

  2. Fai clic su Inizia, quindi su Registra accanto alla tua app.

  3. Fai clic per espandere reCAPTCHA e incolla l'ID chiave generato per reCAPTCHA Enterprise.

  4. Fai clic su Salva.

Passaggio 3: aggiungi App Check al codice

  1. Torna a Firebase Studio e, nella visualizzazione Code, aggiungi la chiave del sito generata al file .env:

    NEXT_PUBLIC_RECAPTCHA_SITE_KEY=RECAPTCHA_SITE_KEY

  2. Se non hai ancora salvato la configurazione di Firebase in .env, recuperala:

    • Dalla Firebase console, apri Impostazioni progetto e individuala nella sezione che corrisponde alla tua app.

    • Dal terminale nella visualizzazione Code:

      1. Accedi a Firebase: firebase auth login
      2. Seleziona il tuo progetto: firebase use FIREBASE_PROJECT_ID
      3. Recupera la configurazione di Firebase: firebase apps:sdkconfig

  3. Aggiungi la configurazione al file .env in modo che sia simile alla seguente:

    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. Aggiungi App Check al codice dell'app. Puoi chiedere a Gemini di aggiungere App Check con reCAPTCHA Enterprise alla tua app (assicurati di specificare "reCAPTCHA Enterprise" e di ricontrollare!), oppure segui i passaggi descritti in Inizializzare App Check.

  5. Pubblica di nuovo il sito in App Hosting. Prova a testare le funzionalità di database e autenticazione per generare alcuni dati.

  6. Verifica che App Check stia ricevendo richieste nella Firebase console aprendo Crea > App Check.

  7. Fai clic per ispezionare Cloud Firestore. Dopo aver verificato che le richieste arrivino, fai clic su Applica per applicare App Check.

  8. Ripeti la verifica e l'applicazione per Firebase Authentication.

Se, dopo aver registrato l'app per App Check, vuoi eseguire la tua app in un ambiente che App Check normalmente non classificherebbe come valido, ad esempio localmente durante lo sviluppo o da un ambiente di integrazione continua (CI), puoi creare una build di debug della tua app che utilizza il provider di debug di App Check anziché un provider di attestazione reale. Scopri di più in Utilizzare App Check con il provider di debug nelle app web.

Passaggi successivi