Supervisa y protege las apps web

Después de publicar tus apps, debes supervisarlas y protegerlas:

Supervisa el rendimiento de tu sitio con la observabilidad de App Hosting

El panel Descripción general de la app de Firebase Studio proporciona información y métricas clave sobre tu app, lo que te permite supervisar el rendimiento de tu app web con las herramientas de observabilidad integradas de App Hosting. Después de que se lance tu sitio, podrás hacer clic en Publicar para acceder a la descripción general. En este panel, puedes realizar las siguientes acciones:

  • Haz clic en Publicar para lanzar una versión nueva de tu app.
  • Comparte el vínculo a tu app o ábrela directamente en Visita tu app.
  • Revisa un resumen del rendimiento de tu app en los últimos 7 días, incluida la cantidad total de solicitudes y el estado de tu lanzamiento más reciente. Haz clic en Ver detalles para acceder a aún más información en Firebase console.
  • Consulta un gráfico de la cantidad de solicitudes que recibió tu app en las últimas 24 horas, desglosadas por código de estado HTTP.

Si cierras el panel Descripción general de la app, puedes volver a abrirlo en cualquier momento haciendo clic en Publicar.

Obtén más información para administrar y supervisar los lanzamientos de App Hosting en Administra lanzamientos y versiones.

Genkit Supervisión de tus funciones implementadas

Para supervisar los pasos, las entradas y las salidas de tu función Genkit, habilita la telemetría en el código de flujo de IA. La función de telemetría de Genkit te permite supervisar el rendimiento y el uso de tus flujos de IA. Estos datos pueden ayudarte a identificar áreas de mejora, solucionar problemas, optimizar tus instrucciones y flujos para mejorar el rendimiento y la eficiencia de costos, y hacer un seguimiento del uso de tus flujos a lo largo del tiempo.

Para configurar la supervisión en Genkit, agregas telemetría a los flujos de IA de Genkit y, luego, ves los resultados en Firebase console.

Paso 1: Agrega telemetría a tu código de flujo de Genkit en Firebase Studio

Para configurar la supervisión en tu código, haz lo siguiente:

  1. Si aún no estás en la vista Code, haz clic en Ícono de cambio de código Cambiar al código para abrirla.

  2. Consulta package.json para verificar la versión de Genkit que está instalada.

  3. Abre la terminal (Ctrl-Shift-C o Cmd-Shift-C en macOS).

  4. Haz clic en la terminal e instala el complemento de Firebase con la versión que coincida con tu archivo package.json. Por ejemplo, si los paquetes Genkit de tu package.json están en la versión 1.0.4, debes ejecutar el siguiente comando para instalar el complemento:

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

  5. En Explorador, expande src > ai > flows. Uno o más archivos TypeScript que contienen tus flujos de Genkit aparecen en la carpeta flows.

  6. Haz clic en uno de los flujos para abrirlo.

  7. En la parte inferior de la sección de importaciones del archivo, agrega lo siguiente para importar y habilitar FirebaseTelemetry:

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

enableFirebaseTelemetry();

Paso 2: Configura los permisos

Firebase Studio habilitó las APIs requeridas por ti cuando configuró tu proyecto de Firebase, pero también debes proporcionar permisos a la cuenta de servicio App Hosting.

Para configurar los permisos, sigue estos pasos:

  1. Abre la consola de IAM de Google Cloud, selecciona tu proyecto y, luego, otorga los siguientes roles a la cuenta de servicio de App Hosting:

    • Escritor de métricas de Monitoring (roles/monitoring.metricWriter)
    • Agente de Cloud Trace (roles/cloudtrace.agent)
    • Escritor de registros (roles/logging.logWriter)

  2. Vuelve a publicar tu app en App Hosting.

  3. Cuando se complete la publicación, carga la app y comienza a usarla. Después de cinco minutos, tu app debería comenzar a registrar datos de telemetría.

Paso 3: Supervisa tus funciones potenciadas por IA generativa en Firebase console

Cuando se configura la telemetría, Genkit registra la cantidad de solicitudes, el éxito y la latencia de todos tus flujos y, para cada flujo específico, Genkit recopila métricas de estabilidad, muestra gráficos detallados y registra los seguimientos capturados.

Para supervisar las funciones de IA implementadas con Genkit, haz lo siguiente:

  1. Después de cinco minutos, abre Genkit en Firebase console y revisa las instrucciones y respuestas de Genkit.

    Genkit compila las siguientes métricas de estabilidad:

    • Total de solicitudes: Es la cantidad total de solicitudes que recibió tu flujo.
    • Tasa de éxito: Es el porcentaje de solicitudes que se procesaron correctamente.
    • Latencia del percentil 95: Es la latencia del percentil 95 de tu flujo, que es el tiempo que tarda en procesarse el 95% de las solicitudes.

    • Uso de tokens:

      • Tokens de entrada: Es la cantidad de tokens que se envían al modelo en la instrucción.
      • Tokens de salida: Es la cantidad de tokens que genera el modelo en la respuesta.

    • Uso de imágenes:

      • Imágenes de entrada: Es la cantidad de imágenes que se envían al modelo en la instrucción.
      • Imágenes de salida: Es la cantidad de imágenes que genera el modelo en la respuesta.

    Si expandes las métricas de estabilidad, estarán disponibles los siguientes gráficos detallados:

    • Volumen de solicitudes a lo largo del tiempo
    • Tasa de éxito a lo largo del tiempo
    • Tokens de entrada y salida a lo largo del tiempo.
    • Latencia (percentil 95 y 50) a lo largo del tiempo.

Obtén más información sobre Genkit en Genkit.

Protege tu app con la Firebase App Check

Si integraste servicios de Firebase o Google Cloud en tu app, la Firebase App Check ayuda a proteger los backends de tu app contra todo tipo de abusos, ya que impide que los clientes no autorizados accedan a tus recursos de Firebase. Funciona con servicios de Google (incluidos los servicios de Firebase y Google Cloud) y tus propios backends personalizados para proteger tus recursos.

Te recomendamos que agregues la App Check a cualquier app que publiques de forma pública para proteger tus recursos de backend contra todo tipo de abusos.

En esta sección, se te guía para configurar la App Check en Firebase Studio con reCAPTCHA Enterprise para una app web creada por el App Prototyping agent, pero puedes configurar la App Check en cualquier app que implemente servicios de Firebase y pueda implementar proveedores personalizados. Más información en Firebase App Check

reCAPTCHA Enterprise proporciona hasta 10,000 evaluaciones sin costo.

Paso 1: Configura reCAPTCHA Enterprise para tu app

  1. Abre la sección reCAPTCHA Enterprise de la consola de Google Cloud.

  2. Selecciona el nombre de tu proyecto de Firebase en el selector de proyectos de la consola de Google Cloud.

  3. Habilita la API de reCAPTCHA Enterprise si se te solicita hacerlo.

  4. Haz clic en Comenzar y agrega un Nombre visible para la clave de sitio de reCAPTCHA.

  5. Acepta la clave predeterminada Tipo de aplicación Web.

  6. Haz clic en Agregar un dominio y agrega un dominio. Te recomendamos que agregues tu dominio de App Hosting (por ejemplo, studio--PROJECT_ID.REGION.hosted.app) y cualquier dominio personalizado que uses o que planees usar con tu app.

  7. Haz clic en Próximo paso.

  8. Deja sin seleccionar la opción ¿Usarás desafíos?.

  9. Haz clic en Crear clave.

  10. Copia y guarda tu ID de clave y continúa con Configura la App Check.

Paso 2: Configura la App Check

  1. Abre la consola de Firebase y haz clic en Compilación > Verificación de aplicaciones en el menú de navegación.

  2. Haz clic en Comenzar y, luego, en Registrar junto a tu app.

  3. Haz clic para expandir ReCAPTCHA y pega el ID de clave que generaste para reCAPTCHA Enterprise.

  4. Haz clic en Guardar.

Paso 3: Agrega la App Check a tu código

  1. Regresa a Firebase Studio y, en la vista Code, agrega la clave del sitio que generaste a tu archivo .env:

    NEXT_PUBLIC_RECAPTCHA_SITE_KEY=RECAPTCHA_SITE_KEY

  2. Si aún no tienes tu configuración de Firebase guardada en .env, obténla de la siguiente manera:

    • En la consola de Firebase, abre Configuración del proyecto y búscala en la sección que corresponde a tu app.

    • Desde la terminal en la vista Code, haz lo siguiente:

      1. Accede a Firebase: firebase auth login.
      2. Selecciona tu proyecto: firebase use FIREBASE_PROJECT_ID.
      3. Obtén la configuración de Firebase: firebase apps:sdkconfig.

  3. Agrega la configuración a tu archivo .env para que se vea de la siguiente manera:

    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. Agrega la App Check al código de tu app. Puedes pedirle a Gemini que agregue la App Check con reCAPTCHA Enterprise a tu app (asegúrate de especificar "reCAPTCHA Enterprise" y de verificarlo) o seguir los pasos que se indican en Inicializa la App Check.

  5. Vuelve a publicar tu sitio en App Hosting. Prueba tus funciones de Firebase para generar algunos datos.

  6. Para verificar que la App Check esté recibiendo solicitudes en la consola de Firebase, abre Compilación > Verificación de aplicaciones.

  7. Haz clic para inspeccionar los servicios de Firebase. Después de verificar que lleguen las solicitudes, haz clic en Aplicar para aplicar la App Check.

  8. Repite la verificación y aplicación de políticas para Firebase Authentication.

Si, después de registrar la app en App Check, quieres ejecutarla en un entorno que App Check no suele clasificar como válido, como de forma local durante el desarrollo, o desde un entorno de integración continua (CI), puedes crear una compilación de depuración de la app que use el proveedor de depuración de App Check, en lugar de un proveedor de certificación real. Obtén más información en Cómo usar la App Check con el proveedor de depuración en apps web.

Próximos pasos