Monitorar e proteger apps da Web

Depois de publicar seus apps, monitore e proteja-os:

Monitorar o desempenho do site com a observabilidade do App Hosting

O painel Visão geral do app no Firebase Studio fornece métricas e informações importantes sobre seu app, permitindo que você monitore o desempenho do seu app da Web usando as ferramentas de observação integradas do App Hosting. Depois que o site for lançado, acesse a visão geral clicando em Publicar. Neste painel, é possível:

  • Clique em Publicar para lançar uma nova versão do app.
  • Compartilhar o link do aplicativo ou abri-lo diretamente em Acessar seu app.
  • Analisar um resumo do desempenho do aplicativo nos últimos sete dias, incluindo o número total de solicitações e o status do lançamento mais recente. Clique em Ver detalhes para acessar ainda mais informações no console do Firebase.
  • Veja um gráfico com o número de solicitações que seu aplicativo recebeu nas últimas 24 horas, dividido por código de status HTTP.
  • Confira o status de ativação dos serviços do Firebase, como Firebase Authentication e Cloud Firestore.

Se você fechar o painel de visão geral do aplicativo, poderá reabri-lo a qualquer momento clicando em Publicar.

Saiba mais sobre como gerenciar e monitorar lançamentos do App Hosting em Gerenciar lançamentos e versões.

Monitoramento do Genkit para seus recursos implantados

É possível monitorar as etapas, entradas e saídas de recursos do Genkit ativando a telemetria no código do seu fluxo de IA. O recurso de telemetria do Genkit permite monitorar o desempenho e o uso dos fluxos de IA. Esses dados podem ajudar a identificar áreas para melhoria, resolver problemas, otimizar comandos e fluxos para melhorar o desempenho e a economia e acompanhar o uso dos fluxos ao longo do tempo.

Para configurar o monitoramento no Genkit, adicione a telemetria aos fluxos de IA do Genkit e confira os resultados no console do Firebase.

Etapa 1: adicionar a telemetria ao código do fluxo do Genkit no Firebase Studio

Para configurar o monitoramento no seu código:

  1. Se você ainda não estiver na visualização do Code, clique em Ícone de Mudar para o Code Mudar para o Code para abri-lo.

  2. Verifique o package.json para confirmar a versão do Genkit que está instalada.

  3. Abra o terminal (Ctrl-Shift-C ou Cmd-Shift-C no macOS).

  4. Clique no terminal e instale o plug-in do Firebase usando a versão que corresponde ao arquivo package.json. Por exemplo, se os pacotes do Genkit no package.json estiverem na versão 1.0.4, execute o comando abaixo para instalar o plug-in:

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

  5. No Explorador, expanda src > ai > flows. Um ou mais arquivos TypeScript que contêm seus fluxos do Genkit aparecem na pasta flows.

  6. Clique em um dos fluxos para abri-lo.

  7. Na parte inferior da seção de importações do arquivo, faça as adições a seguir para importar e ativar o FirebaseTelemetry:

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

enableFirebaseTelemetry();

Etapa 2: configurar permissões

O Firebase Studio ativou as APIs necessárias para você ao configurar seu projeto do Firebase, mas você também precisa fornecer permissões à conta de serviço do App Hosting.

Para configurar as permissões:

  1. Abra o console do Google Cloud IAM, selecione seu projeto e conceda os seguintes papéis à conta de serviço do App Hosting:

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

  2. Republique seu app no App Hosting.

  3. Quando a publicação for concluída, carregue o aplicativo e comece a usá-lo. Após cinco minutos, o aplicativo começará a registrar dados de telemetria.

Etapa 3: monitorar os recursos de IA generativa no console do Firebase

Quando a telemetria está configurada, o Genkit registra o número de solicitações, o sucesso e a latência de todos os fluxos. Para cada fluxo específico, o Genkit coleta métricas de estabilidade, mostra gráficos detalhados e registra os traces capturados.

Para monitorar os recursos de IA implementados com o Genkit:

  1. Após cinco minutos, abra o Genkit no console do Firebase e analise os comandos e as respostas do Genkit.

    O Genkit compila as seguintes métricas de estabilidade:

    • Solicitações totais: é o número total de solicitações recebidas pelo seu fluxo.
    • Taxa de sucesso: a porcentagem de solicitações que foram processadas com êxito.
    • Latência do 95º percentil: a latência do 95º percentil do fluxo, que é o tempo necessário para processar 95% das solicitações.

    • Uso de tokens:

      • Tokens de entrada: o número de tokens enviados ao modelo no comando.
      • Tokens de saída: o número de tokens gerados pelo modelo na resposta.

    • Uso de imagens:

      • Imagens de entrada: o número de imagens enviadas ao modelo no comando.
      • Imagens de saída: o número de imagens geradas pelo modelo na resposta.

    Se você expandir as métricas de estabilidade, gráficos detalhados estarão disponíveis:

    • Volume de solicitações ao longo do tempo.
    • Taxa de sucesso ao longo do tempo.
    • Tokens de entrada e saída ao longo do tempo.
    • Latência (95º e 50º percentil) ao longo do tempo.

Saiba mais sobre o Genkit no Genkit.

Proteger seu app com o Firebase App Check

Se você integrou os serviços do Firebase ou do Google Cloud ao seu app, o Firebase App Check ajuda a proteger os back-ends do app contra abusos, impedindo que clientes não autorizados acessem seus recursos do Firebase. Ele funciona com os Serviços do Google (incluindo o Firebase e o Google Cloud) e com seus próprios back-ends personalizados para manter seus recursos seguros.

Recomendamos adicionar App Check a qualquer app que você publicar publicamente para proteger seus recursos de back-end contra abuso.

Esta seção orienta você a configurar App Check no Firebase Studio usando o reCAPTCHA Enterprise para um app da Web criado pelo App Prototyping agent. No entanto, é possível configurar App Check em qualquer app que implemente serviços do Firebase e possa implementar provedores personalizados. Saiba mais no Firebase App Check.

O reCAPTCHA Enterprise oferece até 10.000 avaliações sem custos.

Etapa 1: configurar o reCAPTCHA Enterprise para seu app

  1. Abra a seção reCAPTCHA Enterprise do console do Google Cloud.

  2. Selecione o nome do seu Projeto do Firebase no seletor de projetos do console do Google Cloud.

  3. Se você precisar ativar a API reCAPTCHA Enterprise, faça isso.

  4. Clique em Começar e adicione um Nome de exibição para a chave do site do reCAPTCHA.

  5. Aceite a chave padrão Tipo de aplicativo da Web.

  6. Clique em Adicionar um domínio e selecione uma opção. Adicione o domínio App Hosting (por exemplo, studio--PROJECT_ID.REGION.hosted.app) e todos os domínios personalizados que você usa ou planeja usar com o app.

  7. Clique em Próxima etapa.

  8. Deixe a opção Você vai usar desafios? desmarcada.

  9. Clique em Criar chave.

  10. Copie e salve o ID da chave e prossiga para Configurar App Check.

Etapa 2: configurar o App Check

  1. Abra o console do Firebase e clique em Build > App Check no menu de navegação.

  2. Clique em Começar e em Registrar ao lado do app.

  3. Clique para expandir ReCAPTCHA e cole o ID da chave que você gerou para o reCAPTCHA Enterprise.

  4. Clique em Salvar.

Etapa 3: adicionar o App Check ao código

  1. Volte para o Firebase Studio e, na visualização Code, adicione a chave do site gerada ao arquivo .env:

    NEXT_PUBLIC_RECAPTCHA_SITE_KEY=RECAPTCHA_SITE_KEY

  2. Se você ainda não tiver a configuração do Firebase salva em .env, faça o seguinte:

    • No console do Firebase, abra Configurações do projeto e localize-o na seção que corresponde ao seu app.

    • Na visualização Code do terminal:

      1. Faça login no Firebase: firebase auth login
      2. Selecione o projeto: firebase use FIREBASE_PROJECT_ID
      3. Receba a configuração do Firebase: firebase apps:sdkconfig

  3. Adicione a configuração ao arquivo .env para que ele fique assim:

    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. Adicione o App Check ao código do app. Você pode pedir ao Gemini para adicionar App Check com o reCAPTCHA Enterprise ao seu app. Especifique "reCAPTCHA Enterprise" e confira novamente. Siga as etapas em Inicializar App Check.

  5. Republique seu site no App Hosting. Teste seus recursos de banco de dados e autenticação para gerar alguns dados.

  6. Para verificar se o App Check está recebendo solicitações no console Firebase, abra Build > App Check.

  7. Clique para inspecionar Cloud Firestore. Depois de verificar se as solicitações estão chegando, clique em Aplicar para aplicar o App Check.

  8. Repita a verificação e a aplicação para o Firebase Authentication.

Se, depois de registrar seu aplicativo no App Check, você quiser executá-lo em um ambiente em que o App Check normalmente não seria classificado como válido, como localmente, durante o desenvolvimento ou em uma integração contínua (CI), crie um build de depuração do seu app que use o provedor de depuração do App Check em vez de um provedor de atestado real. Saiba mais em Usar o App Check com o provedor de depuração em apps da Web.

Próximas etapas