Monitorare e proteggere le app web

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

• Se pubblichi con Firebase Hosting, puoi collegare il tuo progetto Firebase a Cloud Logging per monitorare l'utilizzo e accedere ai log delle richieste web. Scopri di più su come visualizzare, cercare e filtrare i log delle richieste web con Cloud Logging.

• Se utilizzi App Prototyping agent per pubblicare con Firebase App Hosting, puoi utilizzare le sue funzionalità di osservabilità per monitorare le prestazioni del tuo sito web. Puoi anche scrivere log in Cloud Logging e visualizzare log e metriche nella console Firebase.

• Se utilizzi l'AI nella tua app con Genkit, puoi monitorare il funzionamento delle funzionalità di AI generativa in produzione.

• Se la tua app include servizi Firebase, proteggili con Firebase App Check.

Monitora 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 le prestazioni 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 riquadro puoi:

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

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 nella pagina Gestisci implementazioni e release.

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

Puoi monitorare i passaggi, gli input e gli output della funzionalità Genkit attivando la telemetria nel codice del flusso AI. La funzionalità di telemetria per Genkit ti consente di monitorare le prestazioni e l'utilizzo dei tuoi flussi di AI. Questi dati possono aiutarti a identificare le aree di miglioramento, risolvere i problemi, ottimizzare i prompt e i flussi per migliorare le prestazioni e l'efficienza dei costi 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.

Importante: il monitoraggio di Genkit si basa sui dati di telemetria scritti in Google Cloud Logging, Metrics e Trace, che sono servizi a pagamento. Visualizza la pagina dei prezzi di Google Cloud Observability per i dettagli sui prezzi e per scoprire i limiti del livello senza costi.

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 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. Nella cartella flows vengono visualizzati uno o più file TypeScript che contengono i flussi Genkit.

6. Fai clic su uno dei flussi per aprirlo.

   Suggerimento: tieni presente la sezione prompt del file, che puoi modificare manualmente per perfezionare le risposte di Gemini.

7. In fondo alla sezione delle importazioni del file, aggiungi quanto segue per importare e attivare FirebaseTelemetry:

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

   Suggerimento: per scoprire di più sulle opzioni di telemetria avanzate in Genkit, consulta Configurazione avanzata.

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 al service account App Hosting.

Per configurare le autorizzazioni:

1. Nella console Google Cloud, vai alla pagina IAM e seleziona il tuo progetto Firebase.

2. Concedi i seguenti ruoli al service account App Hosting:

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

3. Ripubblica l'app su App Hosting.

4. 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 le metriche di stabilità, mostra grafici dettagliati e registra le tracce acquisite.

Per monitorare le funzionalità di AI implementate con Genkit:

1. Dopo cinque minuti, nella console Firebase, vai a Servizi AI > Genkit per esaminare i prompt e le risposte di Genkit.

2. Puoi esaminare le seguenti metriche di stabilità compilate da Genkit:

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

3. Puoi espandere le metriche di stabilità per visualizzare i seguenti grafici dettagliati:

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

Scopri di più su Genkit nella relativa documentazione.

Proteggi la tua 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 tue app da comportamenti illeciti impedendo ai client non autorizzati di accedere alle tue risorse Firebase. Funziona sia con i servizi Google (tra cui Firebase e i servizi Google Cloud) sia con i tuoi backend personalizzati per proteggere le tue risorse.

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

Questa sezione illustra come configurare 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 implementa i servizi Firebase e può 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 richiesto di abilitare l'API reCAPTCHA Enterprise, fallo.

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

5. Accetta la chiave predefinita Web Tipo di applicazione.

6. Fai clic su Aggiungi un dominio e aggiungi un dominio. Dovrai 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 l'ID chiave e procedi con la configurazione di 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 Registrati 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 di Firebase in .env, ottienila:

   • Dalla console Firebase, apri Impostazioni progetto e individua l'ID nella 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 al 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 della tua app. Puoi chiedere a Gemini di aggiungere App Check con reCAPTCHA Enterprise alla tua app (assicurati di specificare "reCAPTCHA Enterprise" e di ricontrollare) o seguire i passaggi descritti in Inizializza App Check.

5. Ripubblica il tuo sito su App Hosting. Prova a testare le funzionalità di database e autenticazione per generare alcuni dati.

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

7. Fai clic per ispezionare Cloud Firestore. Dopo aver verificato che le richieste arrivano, 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 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 utilizzi il provider di debug App Check anziché un provider di attestazione reale. Scopri di più su Utilizza App Check con il provider di debug nelle app web.

Passaggi successivi

• Personalizza l'area di lavoro Firebase Studio.

• Sviluppa, pubblica e monitora un'app web full stack con App Prototyping agent.