Next.js 앱에서 Firebase Genkit 흐름을 서버 작업으로 사용할 수 있습니다. 이 페이지의 나머지 부분에서는 그 방법을 보여줍니다.
요구사항
Node.js 20 이상
절차
다음 명령어를 실행하여 Genkit CLI를 설치합니다.
npm i -g genkit
사용하려는 Next.js 앱이 아직 없다면 앱을 만듭니다.
npx create-next-app@latest
원하는 언어로 TypeScript를 선택합니다.
Next.js 프로젝트에서 Genkit를 초기화합니다.
cd your-nextjs-project
genkit init
- 배포 플랫폼으로 Next.js를 선택합니다.
- 사용할 모델 제공자를 선택합니다.
나머지 프롬프트는 기본값을 수락합니다.
genkit
도구는 자체 AI 흐름 개발을 시작하는 데 도움이 되는 샘플 소스 파일을 만듭니다.배포된 함수에 API 사용자 인증 정보를 사용할 수 있도록 설정합니다. 선택한 모델 제공자에 따라 다음 중 하나를 수행합니다.
Gemini (Google AI)
Gemini (Vertex AI)
Cloud 콘솔에서 프로젝트에 대해 Vertex AI API를 사용 설정합니다.
흐름을 로컬에서 실행하려면 다음 단계와 같이 추가 환경 변수를 설정하고
gcloud
도구를 사용하여 애플리케이션 기본 사용자 인증 정보를 설정합니다.export GCLOUD_PROJECT=<your project ID>
export GCLOUD_LOCATION=us-central1
gcloud auth application-default login
앱을 배포할 때 다음을 수행해야 합니다.
배포된 환경에서
GCLOUD_PROJECT
및GCLOUD_LOCATION
변수를 설정합니다. 정확한 단계는 플랫폼에 따라 다릅니다.Firebase 또는 Google Cloud 환경에 배포하지 않는 경우 워크로드 아이덴티티 제휴(권장) 또는 서비스 계정 키를 사용하여 Vertex AI API의 승인을 설정합니다.
Google Cloud 콘솔의 IAM 페이지에서 Vertex AI API를 호출하는 데 사용하는 ID에 Vertex AI 사용자 역할 (
roles/aiplatform.user
)을 부여합니다.- Cloud Functions 및 Cloud Run에서는 기본 컴퓨팅 서비스 계정입니다.
- Firebase 앱 호스팅에서는 앱의 백엔드 서비스 계정입니다.
- 다른 플랫폼에서는 이전 단계에서 설정한 ID입니다.
이 가이드에서 설정해야 하는 유일한 보안 비밀은 모델 공급자용이지만, 일반적으로 흐름에서 사용하는 각 서비스에 대해 유사한 작업을 수행해야 합니다.
genkit init
명령어가 샘플 흐름을 생성하도록 허용하면 서버 작업으로 사용할 수 있는 Genkit 흐름이 포함된genkit.ts
파일이 생성됩니다. 한번 말해 보세요.먼저
callMenuSuggestionFlow
함수를 약간 변경합니다.export async function callMenuSuggestionFlow(theme: string) { const flowResponse = await runFlow(menuSuggestionFlow, theme); console.log(flowResponse); return flowResponse; }
이 함수에 서버 작업으로 액세스할 수 있습니다. 간단한 예로
page.tsx
의 콘텐츠를 다음으로 바꿉니다.'use client'; import { callMenuSuggestionFlow } from '@/app/genkit'; import { useState } from 'react'; export default function Home() { const [menuItem, setMenu] = useState<string>(''); async function getMenuItem(formData: FormData) { const theme = formData.get('theme')?.toString() ?? ''; const suggestion = await callMenuSuggestionFlow(theme); setMenu(suggestion); } return ( <main> <form action={getMenuItem}> <label> Suggest a menu item for a restaurant with this theme:{' '} </label> <input type="text" name="theme" /> <button type="submit">Generate</button> </form> <br /> <pre>{menuItem}</pre> </main> ); }
Next.js 개발 환경에서 이 스크립트를 실행합니다.
npm run dev
Genkit 개발자 UI에서 흐름을 실행하고 탐색할 수도 있습니다.
genkit start