Angular 통합

Firebase 프레임워크 인식 CLI를 사용하여 Angular 애플리케이션을 Firebase에 배포하고 동적 콘텐츠를 사용자에게 제공할 수 있습니다.

시작하기 전에

Firebase에 앱을 배포하기 전에 다음 요구사항 및 옵션을 검토하세요.

  • Firebase CLI 버전 12.1.0 이상. 선호하는 방법으로 CLI를 설치하세요.

  • 선택사항: Firebase 프로젝트에서 결제 사용 설정(SSR을 사용하려는 경우는 필수)

  • 선택사항: AngularFire

Firebase 초기화

시작하려면 프레임워크 프로젝트를 위해 Firebase를 초기화하세요. 새 프로젝트에 Firebase CLI를 사용하거나 기존 프로젝트에서 firebase.json을 수정합니다.

새 프로젝트 초기화

  1. Firebase CLI에서 웹 프레임워크 미리보기를 사용 설정합니다. 
    firebase experiments:enable webframeworks

  2. CLI에서 초기화 명령어를 실행한 후 메시지를 따릅니다. 

    firebase init hosting

  3. '웹 프레임워크(실험용)를 사용하시겠어요?'라는 질문에 '예'라고 답하세요.

  4. 호스팅 소스 디렉터리를 선택합니다. 기존 Angular 앱일 수 있습니다.

  5. 메시지가 표시되면 Angular를 선택합니다.

기존 프로젝트 초기화

firebase.json에서 호스팅 구성을 변경하여 public 옵션이 아닌 source 옵션을 갖도록 합니다. 예를 들면 다음과 같습니다.

{
  "hosting": {
    "source": "./path-to-your-angular-workspace"
  }
}

정적 콘텐츠 제공

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

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에서 내보내기)을 통해 모듈에 삽입할 수 있습니다.