Firebase Genkit에는 Firebase Cloud Functions에 흐름을 배포하는 데 도움이 되는 플러그인이 포함되어 있습니다. 예를 들어 이 페이지에서는 Firebase에 기본 샘플 흐름을 배포하는 과정을 안내합니다.
흐름을 Cloud 함수로 배포
필요한 도구를 설치합니다.
Node.js 버전 20 이상을 사용하고 있는지 확인합니다 (
node --version
를 실행하여 확인).Firebase CLI 설치
Firebase Console을 사용하여 새 Firebase 프로젝트를 만들거나 기존 프로젝트를 선택합니다.
Cloud Functions를 배포하는 데 필요한 Blaze 요금제로 프로젝트를 업그레이드합니다.
Firebase CLI로 로그인합니다.
firebase login
firebase login --reauth # alternative, if necessary
firebase login --no-localhost # if running in a remote shell
새 프로젝트 디렉터리를 만듭니다.
export PROJECT_ROOT=~/tmp/genkit-firebase-project1
mkdir -p $PROJECT_ROOT
폴더에서 Genkit를 사용하여 Firebase 프로젝트를 초기화합니다.
cd $PROJECT_ROOT
firebase init genkit
- 앞서 만든 프로젝트를 선택합니다.
- 사용할 모델 제공업체를 선택합니다.
나머지 프롬프트는 기본값을 수락합니다.
genkit
도구는 자체 AI 흐름 개발을 시작할 수 있도록 몇 가지 샘플 소스 파일을 만듭니다. 하지만 이 튜토리얼의 나머지 부분에서는 샘플 흐름을 배포하기만 하면 됩니다.Cloud 함수에 API 사용자 인증 정보를 제공합니다. 선택한 모델 제공업체에 따라 다음 중 하나를 수행합니다.
Gemini (Google AI)
거주 지역에서 Google AI를 사용할 수 있는지 확인하세요.
Google AI Studio를 사용하여 Gemini API를 위한 API 키를 생성합니다.
Cloud Secret Manager에 API 키를 저장합니다.
firebase functions:secrets:set GOOGLE_GENAI_API_KEY
이 단계는 잠재적으로 측정 가능한 서비스에 대한 액세스 권한을 부여하는 실수로 API 키가 유출되는 것을 방지하는 데 중요합니다.
보안 비밀 관리에 대한 자세한 내용은 민감한 구성 정보 저장 및 액세스를 참조하세요.
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)
Cloud Console에서 Firebase 프로젝트에 Vertex AI API를 사용 설정합니다.
IAM 페이지에서 기본 컴퓨팅 서비스 계정에 Vertex AI 사용자 역할이 부여되었는지 확인합니다.
이 가이드에서 설정해야 하는 유일한 보안 비밀은 모델 제공자용이지만 일반적으로 흐름에 사용되는 각 서비스에 대해 유사한 작업을 수행해야 합니다.
웹 앱에서 흐름에 액세스하는 경우 (다음 섹션에서 수행)
httpsOptions
매개변수에서 CORS 정책을 설정합니다.export const menuSuggestionFlow = onFlow( { name: "menuSuggestionFlow", // ... httpsOptions: { cors: true, // Add this line. }, }, async (subject) => { // ... } );
프로덕션 앱에는 더 제한적인 정책이 필요할 수 있지만 이 가이드에서는 이 방식이 적용됩니다.
선택사항: 개발자 UI에서 흐름을 시도해 보세요.
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
UI를 시작합니다.
cd $PROJECT_ROOT/functions
genkit start
개발자 UI (http://localhost:4000/)에서 흐름을 실행합니다.
menuSuggestionFlow를 클릭합니다.
JSON 입력 탭에서 모델의 제목을 입력합니다.
"AI app developers"
Auth JSON 탭에서 시뮬레이션된 인증 객체를 제공합니다.
{ "uid": 0, "email_verified": true }
실행을 클릭합니다.
지금까지 모든 것이 예상대로 작동하면 흐름을 배포할 수 있습니다.
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는 이를 자동화하는 호출 가능 함수 메서드를 제공합니다.
흐름 엔드포인트를 사용해 보려면 다음과 같은 간단한 예시 웹 앱을 배포하면 됩니다.
Firebase Console의 프로젝트 설정 섹션에서 새 웹 앱을 추가하고 호스팅도 설정하는 옵션을 선택합니다.
Firebase Console의 인증 섹션에서 이 예시에서 사용할 Google 제공업체를 사용 설정합니다.
프로젝트 디렉터리에서 Firebase 호스팅을 설정하여 샘플 앱을 배포합니다.
cd $PROJECT_ROOT
firebase init hosting
모든 프롬프트에서 기본값을 수락합니다.
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>
웹 앱 및 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가 로드됩니다.