Next.js 앱의 Firebase Genkit

Next.js 앱에서 Firebase Genkit 흐름을 서버 작업으로 사용할 수 있습니다. 이 페이지의 나머지 부분에서는 그 방법을 보여줍니다.

요구사항

Node.js 20 이상

절차

  1. 다음 명령어를 실행하여 Genkit CLI를 설치합니다.

    npm i -g genkit

  2. 사용하려는 Next.js 앱이 아직 없다면 앱을 만듭니다.

    npx create-next-app@latest

    원하는 언어로 TypeScript를 선택합니다.

  3. Next.js 프로젝트에서 Genkit를 초기화합니다.

    cd your-nextjs-project
genkit init
    • 배포 플랫폼으로 Next.js를 선택합니다.
    • 사용할 모델 제공자를 선택합니다.

    나머지 프롬프트는 기본값을 수락합니다. genkit 도구는 자체 AI 흐름 개발을 시작하는 데 도움이 되는 샘플 소스 파일을 만듭니다.

  4. 배포된 함수에 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>

      앱을 배포할 때 이 키를 배포된 환경에서 사용할 수 있도록 해야 합니다. 정확한 단계는 플랫폼에 따라 다릅니다.

    Gemini (Vertex AI)

    1. Cloud 콘솔에서 프로젝트에 대해 Vertex AI API를 사용 설정합니다.

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

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

    3. 앱을 배포할 때 다음을 수행해야 합니다.

      1. 배포된 환경에서 GCLOUD_PROJECT 및 GCLOUD_LOCATION 변수를 설정합니다. 정확한 단계는 플랫폼에 따라 다릅니다.

      2. Firebase 또는 Google Cloud 환경에 배포하지 않는 경우 워크로드 아이덴티티 제휴(권장) 또는 서비스 계정 키를 사용하여 Vertex AI API의 승인을 설정합니다.

      3. Google Cloud 콘솔의 IAM 페이지에서 Vertex AI API를 호출하는 데 사용하는 ID에 Vertex AI 사용자 역할 (roles/aiplatform.user)을 부여합니다.

        • Cloud Functions 및 Cloud Run에서는 기본 컴퓨팅 서비스 계정입니다.
        • Firebase 앱 호스팅에서는 앱의 백엔드 서비스 계정입니다.
        • 다른 플랫폼에서는 이전 단계에서 설정한 ID입니다.

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

  5. genkit init 명령어가 샘플 흐름을 생성하도록 허용하면 서버 작업으로 사용할 수 있는 Genkit 흐름이 포함된 genkit.ts 파일이 생성됩니다. 한번 말해 보세요.

    1. 먼저 callMenuSuggestionFlow 함수를 약간 변경합니다.

      export async function callMenuSuggestionFlow(theme: string) {
  const flowResponse = await runFlow(menuSuggestionFlow, theme);
  console.log(flowResponse);
  return flowResponse;
}

    2. 이 함수에 서버 작업으로 액세스할 수 있습니다. 간단한 예로 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>
  );
}

    3. Next.js 개발 환경에서 이 스크립트를 실행합니다.

      npm run dev

  6. Genkit 개발자 UI에서 흐름을 실행하고 탐색할 수도 있습니다.

    genkit start