Angular 통합

정적 콘텐츠 제공

표준 배포 명령어를 사용하여 정적 콘텐츠를 제공할 수 있습니다.

firebase deploy

동적 콘텐츠 사전 렌더링

Angular에서 동적 콘텐츠를 사전 렌더링하려면 Angular SSR을 설정해야 합니다.

ng add @angular/ssr

자세한 내용은 Angular 사전 렌더링(SSG) 가이드를 참고하세요.

선택사항: 서버 모듈 추가

배포

firebase deploy를 사용하여 배포할 때 Firebase는 브라우저 번들 및 서버 번들을 빌드하고 애플리케이션을 사전 렌더링합니다. 이러한 요소는 Hosting 및 Cloud Functions for Firebase에 배포됩니다.

커스텀 배포

Firebase CLI에서는 프로덕션 빌드 구성으로 angular.json에 단일 애플리케이션이 정의되어 있다고 가정합니다.

CLI의 가정을 맞춤설정해야 하는 경우 FIREBASE_FRAMEWORKS_BUILD_TARGET 환경 변수를 사용하거나 AngularFire를 추가하고 angular.json을 수정하면 됩니다.

{
  "deploy": {
    "builder": "@angular/fire:deploy",
    "options": {
      "version": 2,
      "buildTarget": "OVERRIDE_YOUR_BUILD_TARGET"
    }
  }
}

선택사항: Firebase JS SDK와 통합

서버 및 클라이언트 번들에 Firebase JS SDK 메서드를 포함하는 경우 제품을 사용하기 전에 isSupported()를 확인하여 런타임 오류로부터 보호하세요. 일부 제품만 모든 환경에서 지원됩니다.

선택사항: Firebase Admin SDK와 통합

관리자 번들이 브라우저 빌드에 포함되면 실패하게 되므로 서버 모듈에 제공하고 선택적 종속 항목으로 삽입하는 것이 좋습니다.

// your-component.ts
import type { app } from 'firebase-admin';
import { FIREBASE_ADMIN } from '../app.module';

@Component({...})
export class YourComponent {

  constructor(@Optional() @Inject(FIREBASE_ADMIN) admin: app.App) {
    ...
  }
}

// app.server.module.ts
import * as admin from 'firebase-admin';
import { FIREBASE_ADMIN } from './app.module';

@NgModule({
  …
  providers: [
    …
    { provide: FIREBASE_ADMIN, useFactory: () => admin.apps[0] || admin.initializeApp() }
  ],
})
export class AppServerModule {}

// app.module.ts
import type { app } from 'firebase-admin';

export const FIREBASE_ADMIN = new InjectionToken<app.App>('firebase-admin');

SSR로 완전 동적 콘텐츠 제공

선택사항: Firebase 인증과 통합

웹 프레임워크 인식 Firebase 배포 도구는 쿠키를 사용하여 클라이언트 및 서버 상태를 자동으로 동기화합니다. Express res.locals 객체는 필요에 따라 인증된 Firebase 앱 인스턴스(firebaseApp)와 현재 로그인한 사용자(currentUser)를 포함하며, REQUEST 토큰(@nguniversal/express-engine/tokens에서 내보내기)을 통해 모듈에 삽입할 수 있습니다.