App Hosting で monorepos を使用する

モノレポを使用すると、複数のプロジェクトを 1 つのディレクトリで整理して管理できます。このガイドでは、App Hosting を使用して Turborepo または Nx ベースのアプリのデプロイを開始する方法について説明します。

Firebase コンソールでモノレポをデプロイする

モノレポのサポートは、Firebase コンソールのグラフィカル バックエンド設定フローに組み込まれています。[デプロイ設定] の [ルート ディレクトリ] の入力を求められたら、monorepo 内でデプロイするアプリケーションのパスを指定します。

コンソールのバックエンド作成ビューのスクリーンショット

Firebase CLI を使用してモノリポジトリをデプロイする

モノレポのサポートは、Firebase CLI コマンド apphosting:backends:create によって呼び出されるバックエンド設定フローに組み込まれています。このフローに入り、選択した GitHub リポジトリを指定すると、リポジトリに対するアプリのルート ディレクトリを指定するように求められます。このプロンプトで、モノレポ内にデプロイするアプリケーションのパスを渡します。

$ firebase apphosting:backends:create --project [project-name]
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

たとえば、次のプロジェクト構造で、ビルドしてデプロイするアプリケーションとして「target-app」を指定した場合、デプロイされるアセットは次のようになります。

Nx

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

Turborepo

.
    ├── packages
    ├── apps
    │   └── target-app
    │       ├── package.json
    │       └── src
    │           └── ...
    ├── turbo.json
    ├── package.json
    └── package-lock.json

リポジトリに対するアプリのルート ディレクトリは apps/target-app です。

monorepo デプロイのトラブルシューティング

  • Nx の [ルート ディレクトリ] フィールドを指定しない場合、ビルドは失敗し、App Hosting が Nx モノレポ内のターゲット プロジェクトを見つけられないというメッセージが表示されます。同様に、Turborepo にはデフォルト プロジェクトの概念がないため、Turborepo ユーザーはターゲット アプリ ディレクトリを指定する必要があります。
  • Nx + Angular アプリケーションの場合、アプリケーションをビルドするには Angular アプリケーション ビルダーを使用する必要があります。Angular アプリケーション ビルダーは project.json で指定されます。