Angular Universal 통합

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 Universal을 설정해야 합니다. Firebase CLI에는 Express Engine이 필요합니다.

ng add @nguniversal/express-engine

자세한 내용은 Angular Universal 가이드를 참조하세요.

사전 렌더링 URL 추가

기본적으로 루트 디렉터리만 사전 렌더링됩니다. angular.json에서 사전 렌더링 단계를 찾고 경로를 추가하여 경로를 더 추가할 수 있습니다.

{
  "prerender": {
    "builder": "@nguniversal/builders:prerender",
    "options": {
      "routes": ["/", "ANOTHER_ROUTE", "AND_ANOTHER"]
    },
    "configurations": {
      /* ... */
    },
    "defaultConfiguration": "production"
  }
}

Firebase는 추가로 맞춤설정해야 하는 경우 호스팅 루트의 guessRoutes 또는 routes.txt 파일을 고려합니다. 이러한 옵션에 관한 자세한 내용은 Angular의 사전 렌더링 가이드를 참고하세요.

선택사항: 서버 모듈 추가

배포

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

커스텀 배포

Firebase CLI에서는 프로덕션 구성으로 도표에 서버, 빌드, 사전 렌더링 단계가 있다고 가정합니다.

CLI의 가정을 맞춤설정하려면 ng deploy를 구성하고 angular.json에서 구성을 수정합니다. 예를 들어 SSR을 사용 중지하고 serverTarget을 삭제하여 사전 렌더링된 콘텐츠만 제공할 수 있습니다.

{
  "deploy": {
    "builder": "@angular/fire:deploy",
    "options": {
      "browserTarget": "app:build:production",
      "serverTarget": "app:server:production",
      "prerenderTarget": "app:prerender:production"
    }
  }
}

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