Firebase App Hosting는 Node.js용 Firebase JavaScript SDK 및 Firebase Admin SDK로 빌드된 동적 웹 앱에 적합합니다. 모든 기능을 갖춘 웹 앱에서 Authentication, Cloud Firestore, App Check와 같은 Firebase SDK는 중요한 역할을 합니다. 이 가이드에서는 Firebase SDK를 최적화하고 Firebase App Hosting의 웹 앱에 Firebase를 빌드하는 데 도움이 되는 몇 가지 주요 전략을 설명합니다.
Firebase Admin SDK 및 웹 SDK 자동 초기화
Firebase App Hosting와 같은 Google 환경은 빌드 시간 및 런타임에 인수가 없는 생성자 호출을 통해 단순화된 앱 초기화를 제공합니다. 이는 Firebase 기능의 광범위한 영역을 활용하고 웹 앱에서 매우 유용할 수 있는 서버 측 SDK인 Node.js용 Firebase Admin SDK와 Firebase JavaScript SDK의 기능입니다.
initializeApp()를 사용하면 Firebase App Hosting가 웹 앱 구성을 자동으로 채우도록 하면서 기본값을 재정의하려는 경우 특정 값을 세부적으로 제어할 수 있는 옵션을 유지할 수 있습니다.
인수 없이 초기화
Firebase JavaScript SDK 또는 Firebase Admin SDK를 기본 구성 값으로 초기화하려면 인수를 제공하지 않고 initializeApp()를 사용하세요.
Admin SDK
import { initializeApp } from 'firebase-admin/app';
const app = initializeApp();
자바스크립트 SDK
import { initializeApp } from 'firebase/app';
const app = initializeApp();
Admin SDK 초기화를 위한 이 전략은 App Hosting뿐만 아니라 Cloud Run, App Engine, Cloud Functions를 비롯한 다른 Google 서버 환경에서도 작동합니다. JavaScript SDK의 경우 이 전략은 App Hosting에서 작동합니다.
자동 입력된 값 재정의
자동으로 삽입되는 기본 구성을 재정의할 수 있습니다. 이러한 옵션은 Admin SDK와 JavaScript SDK 간에 다릅니다.
Admin SDK 재정의
필요에 따라 실시간 데이터베이스, Cloud Storage 또는 Cloud Functions와 같은 서비스의 맞춤 초기화 옵션을 지정하려면 FIREBASE_CONFIG 환경 변수를 사용하세요. FIREBASE_CONFIG 변수의 내용이 { 문자로 시작하면 JSON 객체로 파싱됩니다. 그렇지 않은 경우 SDK는 문자열이 옵션을 포함하는 JSON 파일의 경로라고 가정합니다.
# apphosting.yaml
env:
- variable: FIREBASE_CONFIG
value: '{"credential: applicationDefault()","databaseURL":"https://project-id-default-rtdb.firebaseio.com"}'
JavaScript SDK 재정의
App Hosting가 JavaScript SDK 초기화를 위해 삽입하는 기본 FIREBASE_WEBAPP_CONFIG 값을 재정의하려면 apphosting.yaml에서 값을 지정하면 됩니다.
# apphosting.yaml
env:
- variable: FIREBASE_WEBAPP_CONFIG
value: '{"apiKey":"myApiKey","appId":"app:123","authDomain":"project-id.firebaseapp.com","databaseURL":"https://project-id-default-rtdb.firebaseio.com","messagingSenderId":"0123456789","projectId":"project-id","storageBucket":"project-id.firebasestorage.app"}'
다른 환경에서 자동 초기화 사용
자동 초기화는 Firebase JavaScript SDK를 설치할 때 npm postinstall 스크립트로 설정됩니다. 설치 후 스크립트는 App Hosting Cloud Build 환경에서 자동으로 설정되는 환경 변수 FIREBASE_WEBAPP_CONFIG를 찾습니다.
Cloud Build 외부에서 JS SDK를 설치하는 경우(예: Firebase 에뮬레이터 모음과 함께 사용하기 위해 로컬에서) Firebase JavaScript SDK를 설치할 때 이 환경 변수를 직접 설정해야 합니다.
설치 시 환경을 수동으로 설정하려면 다음 단계를 따르세요.
Firebase Console에서 Firebase 웹 앱 구성 객체를 복사합니다.
터미널에서
npm install명령어를 실행하기 전에FIREBASE_WEBAPP_CONFIG환경 변수를 설정합니다.
FIREBASE_WEBAPP_CONFIG="{...}" npm install firebase
Firebase 프로젝트 또는 웹 앱을 변경할 때마다 이 명령어를 다시 실행합니다.
SSR에 FirebaseServerApp 사용
웹 앱 개발 시 Firebase JS SDK 또는 다른 Firebase 클라이언트 SDK를 사용해 본 적이 있다면 FirebaseApp 인터페이스와 이를 사용하여 앱 인스턴스를 구성하는 방법을 잘 알고 있을 것입니다. 서버 측에서 유사한 작업을 용이하게 하기 위해 Firebase는 FirebaseServerApp을 제공합니다.
FirebaseServerApp은 서버 측 렌더링 (SSR) 환경에서 사용하기 위한 FirebaseApp의 변형입니다. 클라이언트 측 렌더링 (CSR) / 서버 측 렌더링 구분을 넘나드는 Firebase 세션을 계속하는 도구가 포함되어 있습니다.
FirebaseServerApp를 사용하여 다음을 수행합니다.
- 전체 관리 권한이 있는 Firebase Admin SDK와 달리 사용자 컨텍스트 내에서 서버 측 코드를 실행합니다.
- SSR 환경에서 App Check 사용을 사용 설정합니다.
- 클라이언트에서 생성된 Firebase 인증 세션을 계속합니다.
이러한 목적으로 FirebaseServerApp를 사용하는 방법에 관한 자세한 내용은 SSR을 사용하는 동적 웹 앱에서 Firebase 사용을 참고하세요.
웹 앱에서 App Check 사용 설정
App Check를 사용하여 App Hosting에서 동적 웹 앱의 보안을 강화할 수 있습니다. SSR을 사용하는 동적 웹 앱에서 Firebase 사용에 설명된 특정 서버 측 전략을 구현하면 App Hosting 백엔드가 악용되지 않도록 보호할 수 있습니다.