App Hosting과 함께 모노레포 사용

모노레포를 사용하면 단일 디렉터리에서 여러 프로젝트를 구성하고 관리할 수 있습니다. 이 가이드에서는 App Hosting를 사용하여 Nx 기반 앱을 배포하는 방법을 설명합니다.

Firebase CLI로 모노 저장소 배포

모노레포 지원은 Firebase CLI 명령어 apphosting:backends:create로 호출되는 백엔드 설정 흐름에 내장되어 있습니다. 이 흐름을 시작하고 선택한 GitHub 저장소를 지정하면 저장소를 기준으로 앱의 루트 디렉터리를 지정하라는 메시지가 표시됩니다. 이 프롬프트에서 모노레포 내에서 배포할 애플리케이션의 경로를 전달합니다.

$ firebase apphosting:backends:create --project [project-name] --location us-central1
i  === Import a GitHub repository
✔  Connected with GitHub successfully

? Which GitHub repo do you want to deploy? gh-username/nx-monorepo
? Specify your app's root directory relative to your repository path/to/app

예를 들어 다음 Nx 프로젝트 구조와 빌드 및 배포하려는 애플리케이션으로 'target-app'을 사용하면 배포되는 애셋은 다음과 같습니다.

.
    ├── lib
    ├── apps
    │   └── target-app
    │       ├── project.json
    │       └── src
    │           └── ...
    ├── nx.json
    ├── package-lock.json
    └── package.json

저장소를 기준으로 한 앱의 루트 디렉터리는 apps/target-app입니다.

Firebase Console로 모노레포 배포

모노레포 지원은 Firebase Console의 그래픽 백엔드 설정 흐름에 내장되어 있습니다. '배포 설정'에서 '루트 디렉터리'를 묻는 메시지가 표시되면 모노레포 내부에서 배포하려는 애플리케이션의 경로를 지정합니다.

Console 백엔드 생성 뷰의 스크린샷

모노레포 배포 문제 해결

  • 백엔드 설정 중에 '루트 디렉터리' 필드를 비워 두면 관련 nx.json 구성 파일의 defaultProject에 지정된 경우에도 앱 호스팅에서 사용자의 타겟 프로젝트를 빌드하고 배포할 수 있습니다.
  • '루트 디렉터리' 필드나 defaultProject를 지정하지 않으면 빌드가 실패하고 App Hosting가 Nx 모노레포 내에서 타겟팅할 프로젝트를 찾을 수 없다는 메시지가 표시됩니다.
  • Nx + Angular 애플리케이션의 경우 Angular 애플리케이션 빌더를 사용하여 애플리케이션을 빌드해야 합니다. Angular 애플리케이션 빌더는 project.json에 지정됩니다.