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 프로젝트를 만들거나 기존 프로젝트를 선택합니다.

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

  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. Cloud Secret Manager에 API 키를 저장합니다.

      firebase functions:secrets:set GOOGLE_GENAI_API_KEY

      이 단계는 실수로 API 키가 유출되는 것을 방지하기 위해 이 API는 잠재적으로 측정되는 서비스에 대한 액세스 권한을 부여합니다.

      민감한 구성 정보 저장 및 액세스를 참고하세요. 참조하세요.

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

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

      그런 다음 흐름 정의에서 Cloud 함수에 이 보안 비밀 값에 대한 액세스 권한:

      export const menuSuggestionFlow = onFlow(
  {
    name: "menuSuggestionFlow",
    // ...
    httpsOptions: {
      secrets: [googleAIapiKey],  // Add this line.
    },
  },
  async (subject) => {
    // ...
  }
);

    이제 이 함수를 배포하면 API 키가 Cloud Secret Manager(Cloud Functions에서 사용 가능) 환경입니다

    Gemini(Vertex AI)

    1. Cloud 콘솔에서 Vertex AI API 사용 설정 생성합니다.

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

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

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

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

    프로덕션 앱에 대해 더 제한적인 정책을 원할 수 있지만 살펴보겠습니다

  8. 선택사항: 개발자 UI에서 흐름을 사용해 봅니다.

    1. API 사용자 인증 정보를 로컬에서 사용할 수 있도록 합니다. 다음 중 하나를 수행합니다. 선택할 수 있습니다.

      Gemini(Google AI)

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

      export GOOGLE_GENAI_API_KEY=<your API key>

      Gemini(Vertex AI)

      몇 가지 추가 환경 변수를 설정하고 gcloud 도구를 사용하여 설정 애플리케이션 기본 사용자 인증 정보를 로컬에서 가져올 수 있습니다

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

    2. UI를 시작합니다.

      cd $PROJECT_ROOT/functions
genkit start

    3. 개발자 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 흐름은 누구든지 쉽게 찾을 수 있습니다.

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

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

이 정책은 firebaseAuth() 도우미를 사용하여 등록된 액세스만 허용합니다. 앱 사용자를 식별할 수 있습니다. 클라이언트 측에서 Authorization: Bearer 헤더를 정책 Cloud Functions 클라이언트 SDK는 호출 가능 함수 자동화하는 방법도 있습니다

흐름 엔드포인트를 사용해 보려면 다음과 같은 간단한 예시 웹 버전을 배포할 수 있습니다. 앱:

  1. 프로젝트 설정 섹션에서 새 웹 앱을 추가하고 호스팅도 설정합니다

  2. 인증 섹션에서 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 계정으로 로그인해야 합니다. 그 후 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의 trace를 보려면 검사 탭으로 이동하여 'Dev/Prod'를 전환하면 됩니다. 전환 '프로덕션'으로 전환된 경우 Firestore에서 트레이스를 로드합니다