Firebase Cloud Functions가 포함된 Genkit

Firebase Genkit에는 Firebase Cloud Functions에 흐름을 배포하는 데 도움이 되는 플러그인이 포함되어 있습니다. 예를 들어 이 페이지에서는 Firebase에 기본 샘플 흐름을 배포하는 과정을 안내합니다.

흐름을 Cloud 함수로 배포

  1. 필요한 도구를 설치합니다.

    1. Node.js 버전 20 이상을 사용하고 있는지 확인합니다 (node --version를 실행하여 확인).

    2. Firebase CLI 설치

  2. Firebase Console을 사용하여 새 Firebase 프로젝트를 만들거나 기존 프로젝트를 선택합니다.

    Cloud Functions를 배포하는 데 필요한 Blaze 요금제로 프로젝트를 업그레이드합니다.

  3. Firebase CLI로 로그인합니다.

    firebase login
firebase login --reauth # alternative, if necessary
firebase login --no-localhost # if running in a remote shell

  4. 새 프로젝트 디렉터리를 만듭니다.

    export PROJECT_ROOT=~/tmp/genkit-firebase-project1
mkdir -p $PROJECT_ROOT

  5. 폴더에서 Genkit를 사용하여 Firebase 프로젝트를 초기화합니다.

    cd $PROJECT_ROOT
firebase init genkit
    • 앞서 만든 프로젝트를 선택합니다.
    • 사용할 모델 제공업체를 선택합니다.

    나머지 프롬프트는 기본값을 수락합니다. genkit 도구는 자체 AI 흐름 개발을 시작할 수 있도록 몇 가지 샘플 소스 파일을 만듭니다. 하지만 이 튜토리얼의 나머지 부분에서는 샘플 흐름을 배포하기만 하면 됩니다.

  6. Cloud 함수에 API 사용자 인증 정보를 제공합니다. 선택한 모델 제공업체에 따라 다음 중 하나를 수행합니다.

    Gemini (Google AI)

    1. 거주 지역에서 Google AI를 사용할 수 있는지 확인하세요.

    2. Google AI Studio를 사용하여 Gemini API를 위한 API 키를 생성합니다.

    3. 키에 GOOGLE_GENAI_API_KEY 환경 변수를 설정합니다.

      export GOOGLE_GENAI_API_KEY=<your API key>

    4. src/index.ts를 수정하고 기존 가져오기 뒤에 다음을 추가합니다.

    import {defineSecret} from "firebase-functions/params";
defineSecret("GOOGLE_GENAI_API_KEY");

    이제 이 함수를 배포하면 API 키가 Cloud Secret Manager에 저장되고 Cloud Functions 환경에서 사용할 수 있습니다.

    Gemini (Vertex AI)

    1. Cloud Console에서 Firebase 프로젝트에 Vertex AI API를 사용 설정합니다.

    2. IAM 페이지에서 기본 컴퓨팅 서비스 계정에 Vertex AI 사용자 역할이 부여되었는지 확인합니다.

    3. 선택사항: 다음 단계에서와 같이 흐름을 로컬에서 실행하려면 몇 가지 추가 환경 변수를 설정하고 gcloud 도구를 사용하여 애플리케이션 기본 사용자 인증 정보를 설정합니다.

      export GCLOUD_PROJECT=<your project ID>
export GCLOUD_LOCATION=us-central1
gcloud auth application-default login

    이 가이드에서 설정해야 하는 유일한 보안 비밀은 모델 제공자용이지만 일반적으로 흐름에 사용되는 각 서비스에 대해 유사한 작업을 수행해야 합니다.

  7. 웹 앱에서 흐름에 액세스하는 경우 (다음 섹션에서 수행) httpsOptions 매개변수에서 CORS 정책을 설정합니다.

    export const menuSuggestionFlow = onFlow(
  {
    name: "menuSuggestionFlow",
    // ...
    httpsOptions: {cors: true}, // Add this line.
  },
  async (subject) => {
    // ...
  }
);

    프로덕션 앱에는 더 제한적인 정책이 필요할 수 있지만 이 가이드에서는 이 방식이 적용됩니다.

  8. 선택사항: 개발자 UI에서 흐름을 시도해 보세요.

    1. UI를 시작합니다.

      cd $PROJECT_ROOT/functions
genkit start

    2. 개발자 UI (http://localhost:4000/)에서 흐름을 실행합니다.

      1. menuSuggestionFlow를 클릭합니다.

      2. JSON 입력 탭에서 모델의 제목을 입력합니다.

        "AI app developers"

      3. Auth JSON 탭에서 시뮬레이션된 인증 객체를 제공합니다.

        {
  "uid": 0,
  "email_verified": true
}

      4. 실행을 클릭합니다.

  9. 지금까지 모든 것이 예상대로 작동하면 흐름을 배포할 수 있습니다.

    cd $PROJECT_ROOT
firebase deploy --only functions

이제 흐름을 Cloud 함수로 배포했습니다. 하지만 흐름의 승인 정책으로 인해 curl 또는 이와 유사한 명령어를 사용하여 배포된 엔드포인트에 액세스할 수 없습니다. 다음 섹션으로 이동하여 흐름에 안전하게 액세스하는 방법을 알아보세요.

배포된 흐름 사용해 보기

배포하는 모든 흐름에서 승인 정책을 설정하는 것이 중요합니다. 생성형 AI가 없으면 비용이 많이 드는 생성형 AI 흐름을 누구나 호출할 수 있습니다.

기본 샘플 흐름에는 다음과 같은 승인 정책이 있습니다.

firebaseAuth((user) => {
  if (!user.email_verified) {
    throw new Error('Verified email required to run flow');
  }
});

이 정책은 firebaseAuth() 도우미를 사용하여 확인된 이메일 주소로 앱에 등록된 사용자에게만 액세스를 허용합니다. 클라이언트 측에서 Authorization: Bearer 헤더를 정책을 충족하는 Firebase ID 토큰으로 설정해야 합니다. Cloud Functions 클라이언트 SDK는 이를 자동화하는 호출 가능 함수 메서드를 제공합니다.

흐름 엔드포인트를 사용해 보려면 다음과 같은 간단한 예시 웹 앱을 배포하면 됩니다.

  1. Firebase Console의 프로젝트 설정 섹션에서 새 웹 앱을 추가하고 호스팅도 설정하는 옵션을 선택합니다.

  2. Firebase Console의 인증 섹션에서 이 예시에서 사용할 Google 제공업체를 사용 설정합니다.

  3. 프로젝트 디렉터리에서 Firebase 호스팅을 설정하여 샘플 앱을 배포합니다.

    cd $PROJECT_ROOT
firebase init hosting

    모든 프롬프트에서 기본값을 수락합니다.

  4. public/index.html를 다음으로 바꿉니다.

    <!doctype html>
<html>
  <head>
    <title>Genkit demo</title>
  </head>
  <body>
    <div id="signin" hidden>
      <button id="signinBtn">Sign in with Google</button>
    </div>
    <div id="callGenkit" hidden>
      Subject: <input type="text" id="subject" />
      <button id="suggestMenuItem">Suggest a menu theme</button>
      <p id="menuItem"></p>
    </div>
    <script type="module">
      import { initializeApp } from 'https://www.gstatic.com/firebasejs/10.10.0/firebase-app.js';
      import {
        getAuth,
        onAuthStateChanged,
        GoogleAuthProvider,
        signInWithPopup,
      } from 'https://www.gstatic.com/firebasejs/10.10.0/firebase-auth.js';
      import {
        getFunctions,
        httpsCallable,
      } from 'https://www.gstatic.com/firebasejs/10.10.0/firebase-functions.js';

      const firebaseConfig = await fetch('/__/firebase/init.json');
      initializeApp(await firebaseConfig.json());

      async function generateMenuItem() {
        const menuSuggestionFlow = httpsCallable(
          getFunctions(),
          'menuSuggestionFlow'
        );
        const subject = document.querySelector('#subject').value;
        const response = await menuSuggestionFlow(subject);
        document.querySelector('#menuItem').innerText = response.data;
      }

      function signIn() {
        signInWithPopup(getAuth(), new GoogleAuthProvider());
      }

      document
        .querySelector('#signinBtn')
        .addEventListener('click', signIn);
      document
        .querySelector('#suggestMenuItem')
        .addEventListener('click', generateMenuItem);

      const signinEl = document.querySelector('#signin');
      const genkitEl = document.querySelector('#callGenkit');

      onAuthStateChanged(getAuth(), (user) => {
        if (!user) {
          signinEl.hidden = false;
          genkitEl.hidden = true;
        } else {
          signinEl.hidden = true;
          genkitEl.hidden = false;
        }
      });
    </script>
  </body>
</html>

  5. 웹 앱 및 Cloud 함수를 배포합니다.

    cd $PROJECT_ROOT
firebase deploy

deploy 명령어로 출력된 URL로 이동하여 웹 앱을 엽니다. 이 앱을 사용하려면 Google 계정으로 로그인해야 하며, 그 후에 엔드포인트 요청을 시작할 수 있습니다.

Firebase 로컬 에뮬레이터 도구 모음을 사용하여 개발

Firebase는 Genkit와 함께 사용할 수 있는 로컬 개발용 에뮬레이터 도구 모음을 제공합니다.

Firebase 에뮬레이터 도구 모음과 함께 Genkit를 사용하려면 다음과 같이 Firebase 에뮬레이터를 시작합니다.

GENKIT_ENV=dev firebase emulators:start --inspect-functions

그러면 에뮬레이터에서 코드가 실행되고 개발 모드에서 Genkit 프레임워크가 실행되어 Genkit Reflection API가 시작되고 노출됩니다 (개발자 UI는 아님).

그런 다음 --attach 옵션으로 Genkit Dev UI를 실행하여 Firebase 에뮬레이터 내에서 실행되는 코드에 연결합니다.

genkit start --attach http://localhost:3100 --port 4001

Dev UI에서 Firestore의 트레이스를 보려면 검사 탭으로 이동하여 'Dev/Prod' 스위치를 전환하면 됩니다. 'prod'로 전환하면 Firestore에서 trace가 로드됩니다.