웹 앱 모니터링 및 보호

앱을 게시한 후에는 앱을 모니터링하고 보호해야 합니다.

App Hosting 모니터링 가능성으로 사이트 성능 모니터링

Firebase Studio의 앱 개요 패널에서는 앱에 대한 주요 측정항목과 정보를 제공하므로 App Hosting의 기본 제공 모니터링 가능성 도구를 사용하여 웹 앱 성능을 모니터링할 수 있습니다. 사이트가 출시되면 게시를 클릭하여 개요에 액세스할 수 있습니다. 이 패널에서 다음을 수행할 수 있습니다.

  • 게시를 클릭하여 새 버전의 앱을 출시합니다.
  • 앱 방문에서 앱 링크를 공유하거나 앱을 직접 엽니다.
  • 요청 총개수와 최신 출시 상태를 포함하여 지난 7일 간의 앱 성능 요약을 검토합니다. 세부정보 보기를 클릭하여 Firebase Console에서 더 많은 정보에 액세스합니다.
  • 지난 24시간 동안 앱에서 수신한 요청 수를 HTTP 상태 코드별로 분류한 그래프를 봅니다.

앱 개요 패널을 닫은 경우 언제든지 게시를 클릭하여 다시 열 수 있습니다.

출시 및 버전 관리에서 App Hosting 출시 관리 및 모니터링을 자세히 알아보세요.

Genkit 배포된 기능 모니터링

AI 플로우 코드에 원격 분석을 사용 설정하여 Genkit 기능 단계, 입력, 출력을 모니터링할 수 있습니다. Genkit의 원격 분석 기능을 사용하면 AI 흐름의 성능과 사용량을 모니터링할 수 있습니다. 이 데이터를 통해 개선할 영역을 파악하고 문제를 해결하고 성능과 경제성이 개선될 수 있도록 프롬프트와 흐름을 최적화하고 시간 경과에 따른 흐름 사용량을 추적할 수 있습니다.

Genkit에서 모니터링을 설정하려면 원격 분석을 Genkit AI 흐름에 추가한 후 Firebase Console에서 결과를 봅니다.

1단계: Firebase Studio에서 Genkit 플로우 코드에 원격 분석 추가

코드에서 모니터링을 설정하려면 다음 안내를 따르세요.

  1. 아직 Code 뷰가 아니면 코드 전환 아이콘 코드로 전환을 클릭하여 엽니다.

  2. package.json을 확인하여 설치된 Genkit 버전을 확인합니다.

  3. 터미널(Ctrl-Shift-C 또는 macOS의 경우 Cmd-Shift-C)을 엽니다.

  4. 터미널 내부를 클릭하고 package.json 파일과 일치하는 버전을 사용하여 Firebase 플러그인을 설치합니다. 예를 들어 package.json의 Genkit 패키지가 1.0.4이면 다음 명령어를 실행하여 플러그인을 설치해야 합니다.

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

  5. 탐색기에서 src > ai > flows를 펼칩니다. Genkit 흐름이 포함된 TypeScript 파일 하나 이상이 flows 폴더에 표시됩니다.

  6. 흐름 중 하나를 클릭하여 엽니다.

  7. 파일의 가져오기 섹션 하단에 다음을 추가하여 FirebaseTelemetry를 가져오고 사용 설정합니다.

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

enableFirebaseTelemetry();

2단계: 권한 설정

Firebase Studio는 Firebase 프로젝트를 설정할 때 필요한 API를 자동으로 사용 설정했지만 개발자가 App Hosting 서비스 계정에 권한을 제공해야 합니다.

권한을 설정하려면 다음 안내를 따르세요.

  1. Google Cloud IAM 콘솔을 열고 프로젝트를 선택한 후 App Hosting 서비스 계정에 다음 역할을 부여합니다.

    • 모니터링 측정항목 작성자(roles/monitoring.metricWriter)
    • Cloud Trace 에이전트(roles/cloudtrace.agent)
    • 로그 작성자(roles/logging.logWriter)

  2. App Hosting에 앱을 다시 게시합니다.

  3. 게시가 완료되면 앱을 로드하고 사용합니다. 5분 후 앱에서 원격 분석 데이터를 로깅해야 합니다.

3단계: Firebase Console에서 생성형 AI 기능 모니터링

원격 분석이 구성되면 Genkit은 모든 플로우에 대한 요청 수, 성공 여부, 지연 시간을 기록하고 Genkit은 각 특정 플로우에 대한 안정성 측정항목을 수집하고 세부 그래프를 보여주며 캡처된 trace를 로깅합니다.

Genkit으로 구현된 AI 기능을 모니터링하려면 다음 안내를 따르세요.

  1. 5분 후 Firebase Console에서 Genkit을 열고 Genkit의 프롬프트와 응답을 검토합니다.

    Genkit은 다음 안정성 측정항목을 컴파일합니다.

    • 총 요청 수: 플로우에서 수신한 요청 총개수입니다.
    • 성공률: 성공적으로 처리된 요청의 비율입니다.
    • 95번째 백분위수 지연 시간: 플로우의 95번째 백분위수 지연 시간으로, 요청의 95%가 처리되는 데 걸리는 시간입니다.

    • 토큰 사용량:

      • 입력 토큰: 프롬프트에서 모델로 전송된 토큰 수입니다.
      • 출력 토큰: 모델에서 응답에 생성한 토큰 수입니다.

    • 이미지 사용량:

      • 입력 이미지: 프롬프트에서 모델로 전송된 이미지 수입니다.
      • 출력 이미지: 모델에서 응답에 생성한 이미지 수입니다.

    안정성 측정항목을 펼치면 세부적인 그래프가 제공됩니다.

    • 시간 경과에 따른 요청 볼륨
    • 시간 경과에 따른 성공률
    • 시간 경과에 따른 입력 및 출력 토큰 수
    • 시간 경과에 따른 지연 시간(95번째 및 50번째 백분위수)

Genkit에서 Genkit을 자세히 알아보세요.

Firebase App Check로 앱 보호

Firebase 또는 Google Cloud 서비스를 앱에 통합한 경우 Firebase App Check를 사용하면 승인되지 않은 클라이언트가 Firebase 리소스에 액세스하는 것을 방지하여 앱 백엔드를 악용으로부터 보호할 수 있습니다. Google 서비스(Firebase 및 Google Cloud 서비스 포함)와 자체 커스텀 백엔드와 모두 호환되므로 리소스를 안전하게 보호할 수 있습니다.

백엔드 리소스를 악용으로부터 보호하기 위해 공개적으로 게시하는 앱에 App Check를 추가하는 것이 좋습니다.

이 섹션에서는 App Prototyping agent로 만든 웹 앱에 reCAPTCHA Enterprise를 사용하여 Firebase Studio 내에서 App Check를 설정하는 방법을 안내합니다. 하지만 Firebase 서비스를 구현하고 맞춤 제공자를 구현할 수 있는 모든 앱 내에서 App Check를 설정할 수 있습니다. Firebase App Check에서 자세히 알아보세요.

reCAPTCHA Enterprise는 최대 10,000회의 평가를 무료로 제공합니다.

1단계: 앱에 reCAPTCHA Enterprise 설정

  1. Google Cloud 콘솔의 reCAPTCHA Enterprise 섹션을 엽니다.

  2. Google Cloud 콘솔 프로젝트 선택기에서 Firebase 프로젝트 이름을 선택합니다.

  3. reCAPTCHA Enterprise API를 사용 설정하라는 메시지가 표시되면 사용 설정합니다.

  4. 시작하기를 클릭하고 reCAPTCHA 사이트 키의 표시 이름을 추가합니다.

  5. 기본 웹 애플리케이션 유형 키를 수락합니다.

  6. 도메인 추가를 클릭하고 도메인을 추가합니다. App Hosting 도메인(예: studio--PROJECT_ID.REGION.hosted.app)과 앱에서 사용 중이거나 사용할 계획인 모든 커스텀 도메인을 추가합니다.

  7. 다음 단계를 클릭합니다.

  8. reCAPTCHA 테스트를 사용하시겠어요?를 선택하지 않은 상태로 둡니다.

  9. 키 만들기를 클릭합니다.

  10. 키 ID를 복사하여 저장하고 App Check 구성으로 이동합니다.

2단계: App Check 구성

  1. Firebase Console을 열고 탐색 메뉴에서 빌드 > 앱 체크를 클릭합니다.

  2. 시작하기를 클릭한 다음 앱 옆에 있는 등록을 클릭합니다.

  3. ReCAPTCHA를 클릭하여 펼치고 reCAPTCHA Enterprise용으로 생성한 키 ID를 붙여넣습니다.

  4. 저장을 클릭합니다.

3단계: 코드에 App Check 추가

  1. Firebase Studio로 돌아가 Code 뷰에서 생성한 사이트 키를 .env 파일에 추가합니다.

    NEXT_PUBLIC_RECAPTCHA_SITE_KEY=RECAPTCHA_SITE_KEY

  2. Firebase 구성이 아직 .env에 저장되어 있지 않으면 다음과 같이 가져옵니다.

    • Firebase Console에서 프로젝트 설정을 열고 앱에 해당하는 섹션에서 찾습니다.

    • Code 뷰의 터미널에서 다음을 실행합니다.

      1. Firebase에 로그인: firebase auth login
      2. 프로젝트 선택: firebase use FIREBASE_PROJECT_ID
      3. Firebase 구성 가져오기: firebase apps:sdkconfig

  3. 다음과 같이 .env 파일에 구성을 추가합니다.

    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. 앱 코드에 App Check를 추가합니다. Gemini에 앱에 reCAPTCHA Enterprise가 포함된 App Check를 추가하도록 요청하거나('reCAPTCHA Enterprise'를 지정하고 다시 한번 확인하세요) App Check 초기화의 단계를 따르세요.

  5. App Hosting에 사이트를 다시 게시합니다. Firebase 기능을 테스트하여 데이터를 생성해 보세요.

  6. Firebase Console에서 빌드 > 앱 체크를 열어 App Check가 요청을 수신하는지 확인합니다.

  7. 클릭하여 Firebase 서비스를 검사합니다. 요청이 수신되는지 확인한 후 시행을 클릭하여 App Check를 시행합니다.

  8. Firebase Authentication에 대해 인증 및 시행을 반복합니다.

App Check에 앱을 등록한 후 App Check가 일반적으로 유효한 것으로 분류하지 않는 환경에서 앱을 실행하려는 경우(예: 개발 중 로컬에서 또는 지속적 통합(CI) 환경에서) 실제 증명 제공자 대신 App Check 디버그 제공자를 사용하는 앱의 디버그 빌드를 만들 수 있습니다. 웹 앱에서 디버그 제공자와 함께 App Check 사용에서 자세히 알아보세요.

다음 단계