Monitora e proteggi le app web

Dopo aver pubblicato le tue app, devi monitorarle e proteggerle:

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

Il riquadro Panoramica app in Firebase Studio fornisce metriche e informazioni chiave sulla tua app, consentendoti di monitorare il rendimento della tua app web utilizzando gli strumenti di osservabilità integrati di App Hosting. Dopo l'implementazione del sito, puoi accedere alla panoramica facendo clic su Pubblica. Da questo pannello puoi:

  • Fai clic su Pubblica per rilasciare una nuova versione della tua app.
  • Condividi il link alla tua app o aprirla direttamente in Visita la tua app.
  • Esamina un riepilogo del rendimento della tua 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 console Firebase.
  • Visualizza un grafico del numero di richieste ricevute dalla tua app nelle ultime 24 ore, suddivise per codice di stato HTTP.

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

Scopri di più sulla gestione e sul monitoraggio delle implementazioni di App Hosting in Gestire implementazioni e release.

Genkit Monitoraggio delle funzionalità di cui è stato eseguito il deployment

Puoi monitorare i passaggi, gli input e gli output della funzionalità Genkit attivando la telemetria nel codice del flusso di AI. La funzionalità di telemetria di Genkit ti consente di monitorare le prestazioni e l'utilizzo dei tuoi flussi AI. Questi dati possono aiutarti a identificare le aree di miglioramento, risolvere i problemi, ottimizzare i prompt e i flussi per ottenere prestazioni 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 di Genkit AI 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 Cambio 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 pacchetti Genkit 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. In Explorer, espandi src > ai > flows. Uno o più file TypeScript che contengono i tuoi flussi Genkit vengono visualizzati nella cartella flows.

  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 attivare FirebaseTelemetry:

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

enableFirebaseTelemetry();

Passaggio 2: configura le autorizzazioni

Firebase Studio ha abilitato le API richieste per te durante la configurazione del progetto Firebase, ma devi anche fornire le autorizzazioni all'account di servizio App Hosting.

Per configurare le autorizzazioni:

  1. Apri la console IAM di Google Cloud, seleziona il tuo progetto, quindi concedi i seguenti ruoli al service account di App Hosting:

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

  2. Ripubblica la tua app su 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, il successo e la latenza per tutti i tuoi flussi e, per ogni flusso specifico, Genkit raccoglie metriche di stabilità, mostra grafici dettagliati e registra le tracce acquisite.

Per monitorare le funzionalità di AI implementate con Genkit:

  1. Dopo cinque minuti, apri Genkit nella console Firebase e rivedi le richieste e le risposte di Genkit.

    Genkit compila le seguenti metriche di stabilità:

    • Richieste totali:il numero totale di richieste ricevute dal tuo flusso.
    • Tasso di successo:la percentuale di richieste elaborate correttamente.
    • Latenza del 95° percentile: la latenza del 95° percentile del flusso, ovvero il tempo necessario per l'elaborazione del 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 la tua app con Firebase App Check

Se hai integrato i servizi Firebase o Google Cloud nella tua app, Firebase App Check aiuta a proteggere i backend dell'app da comportamenti 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 abusi.

Questa sezione ti guida alla configurazione di App Check all'interno di Firebase Studio utilizzando reCAPTCHA Enterprise per un'app web creata da App Prototyping agent, ma puoi configurare App Check all'interno di qualsiasi app che implementi i servizi Firebase e possa implementare provider personalizzati. Scopri di più all'indirizzo 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. Ti consigliamo di aggiungere il tuo dominio App Hosting (ad esempio, studio--PROJECT_ID.REGION.hosted.app) e tutti i domini personalizzati che utilizzi o 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 vai a Configura App Check.

Passaggio 2: configura App Check

  1. Apri la console Firebase e fai clic su Build > 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 che hai 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 che hai generato al file .env:

    NEXT_PUBLIC_RECAPTCHA_SITE_KEY=RECAPTCHA_SITE_KEY

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

    • Dalla console Firebase, apri Impostazioni progetto e individua la sezione corrispondente alla tua app.

    • Dalla visualizzazione Terminale in Code:

      1. Accedi a Firebase: firebase auth login
      2. Seleziona il tuo progetto: firebase use FIREBASE_PROJECT_ID
      3. Ottieni 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 Inizializza App Check.

  5. Ripubblica il sito su App Hosting. Prova a testare le funzionalità di Firebase per generare alcuni dati.

  6. Verifica che App Check riceva richieste nella console Firebase aprendo Build > App Check.

  7. Fai clic per esaminare i servizi Firebase. 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 la tua app per App Check, vuoi eseguirla in un ambiente che normalmente App Check 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 App Check anziché un vero provider di attestazione. Scopri di più in Utilizzare App Check con il provider di debug nelle app web.

Passaggi successivi