Next.js 앱을 사용하여 Firebase App Hosting에 배포

1. 시작하기 전에

이 Codelab에서는 식당 리뷰 웹사이트인 Friendly Eats라는 Next.js 웹 앱을 사용하여 Firebase App Hosting에 배포하는 방법을 알아봅니다.

Friendly Eats 웹 앱

완성된 웹 앱은 Firebase가 Next.js 앱을 빌드하는 데 어떻게 도움이 되는지 보여주는 유용한 기능을 제공합니다.

  • 자동 빌드 및 배포: 이 Codelab에서는 구성된 브랜치로 푸시할 때마다 Firebase App Hosting을 사용하여 Next.js 코드를 자동으로 빌드하고 배포하는 방법을 보여줍니다.
  • 로그인 및 로그아웃: 완성된 웹 앱을 통해 사용자는 Google 계정으로 로그인/로그아웃할 수 있습니다. 사용자 로그인 및 지속성은 Firebase 인증을 통해 완전히 관리됩니다.
  • 이미지: 완성된 웹 앱을 통해 로그인한 사용자는 레스토랑 이미지를 업로드할 수 있습니다. 이미지 애셋은 Firebase용 Cloud Storage에 저장됩니다. Firebase JavaScript SDK는 업로드된 이미지의 공개 URL을 제공합니다. 이 공개 URL은 Cloud Firestore의 관련 레스토랑 문서에 저장됩니다.
  • 필터: 완성된 웹 앱을 통해 로그인한 사용자는 카테고리, 위치, 가격에 따라 레스토랑 목록을 필터링할 수 있습니다. 사용되는 정렬 방법을 맞춤설정할 수도 있습니다. 데이터는 Cloud Firestore에서 액세스되며 사용된 필터를 기반으로 Firestore 쿼리가 적용됩니다.
  • 리뷰: 완성된 웹 앱을 통해 로그인한 사용자가 별표 평점과 텍스트 기반 메시지로 구성된 레스토랑 리뷰를 게시할 수 있습니다. 리뷰 정보는 Cloud Firestore에 저장됩니다.
  • 리뷰 요약: 완성된 웹 앱은 Gemini 모델을 사용하여 리뷰를 자동으로 요약합니다. AI 생성 요약은 Cloud Firestore에 저장됩니다.

기본 요건

  • Next.js 및 JavaScript에 대한 지식

학습할 내용

  • Next.js 앱 라우터 및 서버 측 렌더링과 함께 Firebase를 사용하는 방법
  • 서버 측 전용 보안 비밀을 사용하여 Gemini API 호출을 승인하는 방법

필요한 사항

  • 원하는 브라우저(예: Chrome)
  • IDX.dev (웹 기반 작업공간)에 대한 액세스
  • Firebase 프로젝트 생성 및 관리를 위한 Google 계정
  • GitHub 계정 (위의 이메일 계정과 동일하지 않아도 됨)

2. 개발 환경 및 GitHub 저장소 설정

이 Codelab에서는 앱의 스타터 코드베이스를 제공하며 Firebase CLI와 IDX.dev를 사용합니다.

새 GitHub 저장소를 만들고 IDX로 가져오기

Firebase App Hosting을 사용하면 구성된 브랜치에 푸시할 때마다 Next.js 코드를 빌드하고 배포하도록 GitHub 저장소를 설정할 수 있습니다.

  1. 이 Codelab의 새 GitHub 저장소(https://github.com/new)를 만듭니다. 원하는 이름을 지정합니다(예: MyFriendlyEatsCodelab).
  2. 새 저장소 URL을 복사합니다. 다음과 같이 표시됩니다.
    https://github.com/USER_NAME/REPOSITORY_NAME.git
  3. https://idx.google.com으로 이동하여 로그인합니다.
  4. 저장소 가져오기를 클릭하고 복사한 GitHub URL을 붙여넣습니다.
    IDX에서 GitHub에 연결하라는 메시지가 표시되면 빈 저장소를 클론합니다.

코드랩의 소스 코드 저장소 보기

https://github.com/firebase/friendlyeats-web에서 Codelab 소스를 확인하세요. friendlyeats-web 저장소에는 여러 플랫폼용 샘플 프로젝트가 있습니다.

이 Codelab에서는 Firebase App Hosting과 Gemini API에만 중점을 두며 전체 Codelab 'Next.js 앱과 Firebase 통합'의 단축 버전입니다. 이 단축된 Codelab에서는 friendlyeats-web 저장소의 #io-connect 브랜치에 있는 소스 코드, 특히 nextjs-step10 디렉터리만 사용해야 합니다.

friendlyeats-web 저장소의 다음 추가 디렉터리를 참고하세요. 이 Codelab에서는 이러한 디렉터리가 필요하지 않지만 이러한 디렉터리가 무엇인지 알아두면 도움이 됩니다.

새 저장소에 Codelab 소스 복사

nextjs-step10 디렉터리를 자체 저장소에 복사하는 방법은 다음과 같습니다.

  1. IDX에서 메뉴 > 터미널 > 새 터미널을 사용하여 터미널을 엽니다.
  2. giget npm 패키지를 사용하여 io-connect 브랜치에서 nextjs-step10 디렉터리만 가져옵니다.
    npx giget@latest gh:firebase/friendlyeats-web/nextjs-step10#io-connect . --force
  3. git을 사용하여 로컬에서 변경사항을 추적합니다.
    git add -A
git commit -m "codelab starting point"
git branch -M main
git push -u origin main

이제 GitHub 저장소에 시작 코드가 표시됩니다.

3. 시작 코드베이스 검토

이 섹션에서는 이 Codelab에서 기능을 추가할 앱의 스타터 코드베이스의 몇 가지 영역을 검토합니다.

폴더 및 파일 구조

다음 표에는 앱의 폴더 및 파일 구조가 간략하게 설명되어 있습니다.

폴더 및 파일

설명

src/components

필터, 헤더, 레스토랑 세부정보, 리뷰용 React 구성요소

src/lib

React 또는 Next.js에 바인딩되지 않은 유틸리티 함수

src/lib/firebase

Firebase 관련 코드 및 Firebase 구성

public

웹 앱의 정적 애셋(예: 아이콘)

src/app

Next.js 앱 라우터를 사용한 라우팅

src/app/restaurant

API 경로 핸들러

package.json 및 package-lock.json

npm을 사용한 프로젝트 종속 항목

next.config.js

Next.js 관련 구성(서버 작업이 사용 설정됨)

jsconfig.json

JavaScript 언어 서비스 구성

서버 및 클라이언트 구성요소

이 앱은 App Router를 사용하는 Next.js 웹 앱입니다. 서버 렌더링은 앱 전체에서 사용됩니다. 예를 들어 src/app/page.js 파일은 기본 페이지를 담당하는 서버 구성요소입니다. src/components/RestaurantListings.jsx 파일은 파일 시작 부분에 있는 "use client" 지시문으로 표시된 클라이언트 구성요소입니다.

Import 문

일부 파일에는 다음과 같은 import 문이 표시될 수 있습니다.

import RatingPicker from "@/src/components/RatingPicker.jsx";

앱은 투박한 상대 가져오기 경로를 피하기 위해 @ 기호를 사용하며, 경로 별칭을 사용할 수 있습니다.

Firebase 관련 API

모든 Firebase API 코드는 src/lib/firebase 디렉터리에 래핑됩니다. 그런 다음 개별 React 구성요소는 Firebase 함수를 직접 가져오는 대신 src/lib/firebase 디렉터리에서 래핑된 함수를 가져옵니다.

모의 데이터

모의 레스토랑 및 리뷰 데이터는 src/lib/randomData.js 파일에 포함되어 있습니다. 이 파일의 데이터는 src/lib/fakeRestaurants.js 파일의 코드에 조합됩니다.

4. Firebase 프로젝트 설정

이 섹션에서는 Firebase 프로젝트를 설정하고 Firebase 웹 앱을 연결합니다. 샘플 웹 앱에서 사용하는 Firebase 서비스도 설정합니다.

Firebase 프로젝트 만들기

  1. 이전 단계에서 사용한 것과 동일한 Google 계정을 사용하여 Firebase 콘솔에 로그인합니다.
  2. 버튼을 클릭하여 새 프로젝트를 만든 다음 프로젝트 이름 (예: FriendlyEats Codelab)을 입력합니다.
  3. 계속을 클릭합니다.
  4. 메시지가 표시되면 Firebase 약관을 검토하고 이에 동의한 다음 계속을 클릭합니다.
  5. (선택사항) Firebase Console에서 AI 지원('Firebase의 Gemini'라고 함)을 사용 설정합니다.
  6. 이 Codelab에서는 Google 애널리틱스가 필요하지 않으므로 Google 애널리틱스 옵션을 사용 중지합니다.
  7. 프로젝트 만들기를 클릭하고 프로젝트가 프로비저닝될 때까지 기다린 다음 계속을 클릭합니다.

Firebase 요금제 업그레이드

Firebase App Hosting 및 Firebase용 Cloud Storage를 사용하려면 Firebase 프로젝트가 사용한 만큼만 지불하는 (Blaze) 요금제를 사용해야 합니다. 즉, Cloud Billing 계정에 연결되어 있어야 합니다.

  • Cloud Billing 계정에는 신용카드와 같은 결제 수단이 필요합니다.
  • Firebase와 Google Cloud를 처음 사용하는 경우 $300 크레딧과 무료 체험판 Cloud Billing 계정을 받을 자격이 되는지 확인하세요.
  • 이 Codelab을 이벤트의 일환으로 진행하는 경우 주최자에게 사용 가능한 Cloud 크레딧이 있는지 문의하세요.

프로젝트를 Blaze 요금제로 업그레이드하려면 다음 단계를 따르세요.

  1. Firebase Console에서 요금제 업그레이드를 선택합니다.
  2. Blaze 요금제를 선택합니다. 화면에 표시된 안내에 따라 Cloud Billing 계정을 프로젝트에 연결합니다.
    이 업그레이드의 일환으로 Cloud Billing 계정을 만들어야 하는 경우 업그레이드를 완료하기 위해 Firebase Console의 업그레이드 흐름으로 돌아가야 할 수 있습니다.

5. App Hosting 백엔드 만들기

이 섹션에서는 Git 저장소의 브랜치를 모니터링하는 App Hosting 백엔드를 설정합니다. 백엔드와 통신할 모든 서비스도 구성합니다.

이 섹션이 끝나면 GitHub의 저장소에 연결된 App Hosting 백엔드가 생성됩니다. 이 백엔드는 main 브랜치에 새 커밋을 푸시할 때마다 앱의 새 버전을 자동으로 다시 빌드하고 출시합니다.

백엔드 만들기

  1. Firebase 콘솔에서 App Hosting 페이지로 이동합니다.'시작하기' 버튼이 있는 App Hosting 콘솔의 제로 상태
  2. 시작하기를 클릭하여 백엔드 생성 흐름을 시작합니다.
  3. 메시지에 따라 이전에 만든 GitHub 저장소를 가져오고 연결합니다.
  4. 배포 설정을 지정합니다.
    • 루트 디렉터리를 /로 유지
    • 라이브 브랜치를 main으로 설정합니다.
    • 자동 출시 사용 설정
  5. 백엔드 이름을 friendlyeats-codelab (또는 원하는 백엔드 이름)으로 지정합니다. 이 이름은 백엔드에 액세스하는 데 사용되는 도메인의 일부가 됩니다.
    이 워크플로에서는 Firebase 프로젝트에 Firebase 웹 앱도 자동으로 생성됩니다. 이 Codelab의 뒷부분에서 이 웹 앱의 구성 값을 사용하여 코드베이스를 Firebase 프로젝트에 연결합니다.
  6. 완료 및 배포를 클릭합니다. 잠시 후 새 App Hosting 백엔드의 상태를 확인할 수 있는 새 페이지로 이동합니다.
  7. App Hosting 대시보드에서 새 도메인을 복사합니다.
    BACKEND_ID--PROJECT_ID.REGION.hosted.app와 같은 패턴이 있습니다. 나중에 Firebase 인증을 설정하려면 이 도메인이 필요합니다.

DNS 전파 및 SSL 인증서 생성으로 인해 도메인이 작동하기까지 몇 분 정도 걸릴 수 있습니다. 백엔드가 생성되는 동안 나머지 Firebase 프로젝트를 설정하고 백엔드를 구성합니다 (이 Codelab의 다음 단계).

GitHub 저장소의 main 브랜치에 새 커밋을 푸시할 때마다 Firebase 콘솔에서 새 빌드 및 출시가 시작되고 출시가 완료되면 사이트가 자동으로 업데이트됩니다.

6. 다른 Firebase 서비스 설정

이 Codelab에서는 Firebase App Hosting과 Gemini API에만 중점을 두지만, 작동하는 웹 앱에는 다른 Firebase 서비스가 필요합니다. 앱에서 이러한 모든 서비스가 작동하도록 하는 코드는 자체 GitHub 저장소에 복사한 코드베이스의 일부이지만 Firebase 프로젝트에서 이러한 서비스를 설정해야 합니다.

인증 설정

  1. Firebase Console에서 인증으로 이동합니다.
  2. 시작하기를 클릭합니다.
  3. 추가 제공업체 열에서 Google > 사용 설정을 클릭합니다.
    1. 프로젝트의 공개용 이름 텍스트 상자에 My FriendlyEatsCodelab app과 같은 이름을 입력합니다.
    2. 프로젝트 지원 이메일 드롭다운에서 이메일 주소를 선택합니다.
    3. 저장을 클릭합니다.
  4. 인증 페이지에서 설정 탭을 클릭합니다.
    1. 화면의 왼쪽 메뉴에서 승인된 도메인을 클릭합니다.
    2. 도메인 추가를 클릭한 다음 새로 만든 App Hosting 도메인 (.hosted.app로 끝남)을 추가합니다.
    3. 추가를 클릭하여 저장합니다.

Cloud Firestore 설정

  1. Firebase Console의 왼쪽 패널에서 빌드를 펼친 다음 Firestore 데이터베이스를 선택합니다.
  2. 데이터베이스 만들기를 클릭합니다.
  3. 데이터베이스 ID는 (default)로 설정된 채로 둡니다.
  4. 데이터베이스의 위치를 선택한 다음 다음을 클릭합니다.
    실제 앱의 경우 사용자와 가까운 위치를 선택하는 것이 좋습니다.
  5. 테스트 모드로 시작을 클릭합니다. 보안 규칙에 관한 면책조항을 읽습니다.
    이 Codelab의 후반부에서 데이터를 보호하는 보안 규칙을 추가합니다. 데이터베이스에 대한 보안 규칙을 추가하지 않은 채 앱을 공개적으로 배포하거나 노출하지 마세요.
  6. 만들기를 클릭합니다.

Firebase용 Cloud Storage 설정

  1. Firebase Console의 왼쪽 패널에서 빌드를 펼친 다음 스토리지를 선택합니다.
  2. 시작하기를 클릭합니다.
  3. 기본 스토리지 버킷의 위치를 선택합니다.
    US-WEST1, US-CENTRAL1, US-EAST1의 버킷은 Google Cloud Storage의 '항상 무료' 등급을 활용할 수 있습니다. 다른 모든 위치의 버킷은 Google Cloud Storage 가격 책정 및 사용량을 따릅니다.
  4. 테스트 모드로 시작을 클릭합니다. 보안 규칙에 관한 면책조항을 읽습니다.
    이 Codelab의 후반부에서 데이터를 보호하는 보안 규칙을 추가합니다. 스토리지 버킷에 대한 보안 규칙을 추가하지 않은 채 앱을 공개적으로 배포하거나 노출하지 마세요.
  5. 만들기를 클릭합니다.

7. 웹 앱 구성

이제 Firebase 프로젝트를 만들고 앱에서 사용되는 모든 Firebase 서비스를 사용 설정했으므로 IDX에서 웹 앱이 이러한 서비스를 사용하도록 구성할 수 있습니다.

IDX 내에서 Firebase CLI에 로그인

IDX에는 Node.js와 Firebase CLI가 이미 설치되어 있으므로 설치를 건너뛰고 CLI 설정을 시작하면 됩니다.

  1. IDX 내 터미널에서 다음 명령어를 실행하여 이전에 만든 Firebase 프로젝트를 사용하도록 CLI를 구성합니다.
    firebase login --no-localhost
firebase use --add
    별칭을 입력하라는 메시지가 표시되면 codelab를 입력합니다.
  2. Firebase에서 데이터를 수집할지 여부에 따라 Y 또는 N을 입력합니다. 이 Codelab에서는 두 옵션 모두 사용할 수 있습니다.
  3. 브라우저에서 Google 계정을 선택한 다음 허용을 클릭합니다.

보안 규칙 및 색인 배포

GitHub 저장소에 복사한 코드에는 이미 Firestore (firestore.rules) 및 Firebase용 Cloud Storage (storage.rules)의 보안 규칙이 설정되어 있습니다. 보안 규칙을 배포하면 데이터베이스와 버킷의 데이터가 오용으로부터 더 잘 보호됩니다.

CLI를 사용하여 Firestore (firestore.indexes.json)의 색인 집합을 배포하여 고급 쿼리를 사용 설정할 수도 있습니다.

  1. IDX 내 터미널에서 다음 명령어를 실행하여 보안 규칙과 색인을 배포합니다.
    firebase deploy --only firestore,storage
  2. "Cloud Storage for Firebase needs an IAM Role to use cross-service rules. Grant the new role?"이라는 메시지가 표시되면 Enter을 눌러 예를 선택합니다.

웹 앱 코드에 Firebase 구성 추가

  1. Firebase Console에서 다음을 수행합니다.
    1. 프로젝트 설정으로 이동합니다.
    2. 내 앱 섹션까지 아래로 스크롤한 다음 App Hosting 백엔드와 이름이 같은 앱을 선택합니다.
    3. SDK 설정 및 구성에서 구성 옵션을 선택한 다음 firebaseConfig 변수의 속성과 값을 복사합니다.
  2. IDX에서 다음을 수행합니다.
    1. apphosting.yaml 파일을 엽니다. 여기에 App Hosting의 환경 변수, 보안 비밀, 런타임 구성을 설정합니다.
    2. 제공된 환경 변수 값을 Firebase 콘솔에서 복사한 구성 값으로 채웁니다. 예를 들면 다음과 같습니다 (자체 값으로 대체).
      runConfig:
    minInstances: 0
    maxInstances: 2
env:
    # Get these values from the Firebase console
    - variable: NEXT_PUBLIC_FIREBASE_API_KEY
        value: xxxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxxxxxxx
    - variable: NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN
        value: project-id.firebaseapp.com
    - variable: NEXT_PUBLIC_FIREBASE_PROJECT_ID
        value: project-id
    - variable: NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET
        value: project-id.firebasestorage.app
    - variable: NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID
        value: 111111111111
    - variable: NEXT_PUBLIC_FIREBASE_APP_ID
        value: 1:111111111111:web:aaaaaaaaaaaaaaaaaaaaaa
    3. 파일을 저장합니다. 그런 다음 IDX 내 터미널에서 다음 명령어를 실행하여 변경사항을 GitHub로 푸시합니다.
      git commit -a -m "Setup Firebase Config"

git push
  3. Firebase Console로 돌아가 App Hosting 페이지로 다시 이동한 후 다음 단계를 따르세요.
    1. 백엔드의 대시보드 보기를 클릭합니다.
    2. git 푸시로 새 빌드가 트리거되었는지 확인합니다. 빌드하고 Cloud Run에 출시하는 데 약 3분 정도 걸립니다. build-ID 칩을 클릭하여 진행 상황을 모니터링할 수 있습니다.
    3. 콘솔 페이지를 새로고침하여 출시가 완료되었는지 확인합니다. 완료되면 도메인 아래에서 도메인 링크 (.hosted.app로 끝남)를 클릭하여 열고 새로 배포된 앱을 확인합니다.

축하합니다. 초기 웹 앱을 배포했습니다. 좀 더 자세히 살펴보겠습니다.

8. 브라우저에서 웹 앱 사용해 보기

Firebase 인증으로 로그인할 수 있는지 확인

  1. 브라우저에서 웹 앱이 표시된 페이지를 새로고침합니다.
  2. Google 계정으로 로그인을 클릭합니다.
  3. 로그아웃하고 다시 로그인하세요. 페이지 새로고침 없이 페이지가 실시간으로 업데이트됩니다. 다른 사용자로 이 단계를 반복할 수 있습니다.
  4. 선택사항: 브라우저에서 웹 앱을 새로고침합니다. 웹 앱을 마우스 오른쪽 버튼으로 클릭하고 페이지 소스 보기를 선택한 다음 표시 이름을 검색합니다. 서버에서 반환된 원시 HTML 소스에 표시됩니다.

레스토랑 정보 보기

웹 앱에는 레스토랑 및 리뷰에 대한 모의 데이터가 포함되어 있습니다.

Cloud Firestore 데이터베이스에 모의 레스토랑 데이터를 삽입하려면 2cf67d488d8e6332.png > Add sample restaurants를 선택합니다.

서버 런타임에 레스토랑 목록이 로드되는지 확인

Next.js 프레임워크를 사용하면 서버 런타임 또는 클라이언트 측 런타임에 데이터가 로드되는지 명확하지 않을 수 있습니다.

서버 런타임에 레스토랑 목록이 로드되는지 확인하려면 다음 단계를 따르세요.

  1. 웹 앱에서 DevTools를 열고 JavaScript를 사용 중지합니다.DevTools에서 JavaScript 사용 중지
  2. 웹 앱을 새로고침합니다. 레스토랑 목록이 계속 로드됩니다. 레스토랑 정보는 서버 응답에 반환됩니다. JavaScript가 사용 설정되면 클라이언트 측 JavaScript 코드를 통해 레스토랑 정보가 하드레이션됩니다.
  3. DevTools에서 JavaScript를 다시 사용 설정합니다.
  4. 웹 앱에서 27ca5d1e8ed8adfe.png > 샘플 레스토랑 추가를 선택합니다. 스냅샷 기능이 올바르게 구현되면 페이지를 새로고침하지 않아도 레스토랑이 실시간으로 표시됩니다.

레스토랑 리뷰 추가

리뷰를 추가하고 Cloud Firestore에 삽입되었는지 확인하려면 다음 단계를 따르세요.

  1. 웹 앱을 새로고침하고 홈페이지에서 레스토랑을 선택합니다.
  2. 레스토랑 페이지에서 3e19beef78bb0d0e.png를 클릭합니다.
  3. 별표 평점을 선택합니다.
  4. 리뷰를 작성합니다.
  5. 제출을 클릭합니다. 리뷰가 리뷰 목록 상단에 표시됩니다.

9. 생성형 AI로 음식점 리뷰 요약하기

이 섹션에서는 사용자가 모든 리뷰를 읽지 않고도 레스토랑에 대한 모든 사람의 의견을 빠르게 파악할 수 있도록 리뷰 요약 기능을 추가합니다.

Cloud Secret Manager에 Gemini API 키 저장

App Hosting은 Cloud Secret Manager와 통합되어 API 키와 같은 민감한 값을 안전하게 저장할 수 있습니다.

  1. Gemini API를 사용하려면 API 키가 필요합니다. Google AI Studio에서 키를 만듭니다.
    메시지가 표시되면 이 Codelab에서 사용한 것과 동일한 프로젝트를 선택합니다 (내부적으로 Firebase 프로젝트는 Google Cloud 프로젝트임).
  2. IDX 내 터미널에서 다음 명령어를 실행하여 새 보안 비밀을 만듭니다.
    firebase apphosting:secrets:set gemini-api-key
  3. 보안 비밀 값을 입력하라는 메시지가 표시되면 Google AI Studio에서 Gemini API 키를 복사하여 붙여넣습니다.
  4. "To use this secret, your backend's service account must be granted access. Would you like to grant access now?"이라는 메시지가 표시되면 Enter을 눌러 예를 선택합니다.
  5. 새 보안 비밀을 apphosting.yaml에 추가할지 묻는 메시지가 표시되면 Y를 입력하여 수락한 다음 Enter를 눌러 GEMINI_API_KEY를 환경 변수 이름으로 선택합니다.

이제 Gemini API 키가 Cloud Secret Manager에 안전하게 저장되며 App Hosting 백엔드에서 액세스할 수 있습니다. Google Cloud 콘솔의 Secrets Manager 대시보드에서 값을 확인할 수도 있습니다.

  1. apphosting.yaml 파일을 열고 보안 비밀의 이름은 기록되었지만 값은 기록되지 않았음을 확인합니다. 다음과 같이 표시됩니다.
    runConfig:
    minInstances: 0
    maxInstances: 2
env:
    # Get these values from the Firebase console
    - variable: NEXT_PUBLIC_FIREBASE_API_KEY
        value: xxxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxxxxxxx
    - variable: NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN
        value: project-id.firebaseapp.com
    - variable: NEXT_PUBLIC_FIREBASE_PROJECT_ID
        value: project-id
    - variable: NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET
        value: project-id.firebasestorage.app
    - variable: NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID
        value: 111111111111
    - variable: NEXT_PUBLIC_FIREBASE_APP_ID
        value: 1:111111111111:web:aaaaaaaaaaaaaaaaaaaaaa
    - variable: GEMINI_API_KEY
        secret: gemini-api-key

리뷰 요약 구성요소 구현

  1. IDX에서 src/components/Reviews/ReviewSummary.jsx를 엽니다.
  2. GeminiSummary 함수를 코드를 다음 코드로 바꿉니다.
    export async function GeminiSummary({ restaurantId }) {
    const { firebaseServerApp } = await getAuthenticatedAppForUser();
    const reviews = await getReviewsByRestaurantId(
        getFirestore(firebaseServerApp),
        restaurantId
    );

    const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY);
    const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash",
    safety_settings: [
        {
        category: HarmCategory.HARM_CATEGORY_DANGEROUS_CONTENT,
        threshold: HarmBlockThreshold.BLOCK_NONE,
        },
    ],
    });
    const reviewSeparator = "@";
    const prompt = `
        Based on the following restaurant reviews,
        where each review is separated by a '${reviewSeparator}' character,
        create a one-sentence summary of what people think of the restaurant.

        Here are the reviews: ${reviews.map(review => review.text).join(reviewSeparator)}
    `;

    try {
        const result = await model.generateContent(prompt);
        const response = await result.response;
        const text = response.text();

        return (
            <div className="restaurant__review_summary">
                <p>{text}</p>
                <p>✨ Summarized with Gemini</p>
            </div>
        );
    } catch (e) {
        console.error(e);
        return <p>Error contacting Gemini</p>;
    }
}
  3. IDX 내 터미널에서 다음 명령어를 실행하여 커밋을 만들고 GitHub 저장소로 푸시합니다.
    git commit -a -m "Use AI to summarize reviews"

git push
  4. Firebase Console에서 앱 호스팅 페이지를 열고 새 출시가 완료될 때까지 기다립니다.
  5. 브라우저에서 음식점 카드를 클릭합니다. 화면 상단에 레스토랑의 모든 리뷰를 한 문장으로 요약한 내용이 표시됩니다.
  6. 새 리뷰를 추가하고 페이지를 새로고침합니다. 요약이 변경됩니다.

10. 결론

수고하셨습니다. Firebase App Hosting을 사용하여 Next.js 앱을 배포하고 Gemini API를 사용하여 텍스트를 요약하는 방법을 알아봤습니다. 특히 다음을 사용했습니다.

  • Firebase App Hosting을 사용하여 구성된 GitHub 브랜치에 푸시할 때마다 Next.js 코드를 자동으로 빌드하고 배포합니다.
  • Cloud Secret Manager (App Hosting과 통합됨): Gemini API 키를 안전하게 저장하여 앱에서 생성형 AI 기능을 빌드할 수 있습니다.

자세히 알아보기

전체 Codelab 'Firebase를 Next.js 앱과 통합'을 자세히 살펴보고 이 앱에 Firebase 인증, Cloud Firestore, Cloud Storage for Firebase를 추가한 방법을 알아보세요.

다음 Codelab도 확인해 보세요.