App Hosting で monorepos を使用する

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

Firebase コンソールを使用して monorepo をデプロイする

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

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

Firebase CLI を使用して monorepo をデプロイする

モノリポのサポートは、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 monorepo 内でターゲットとするプロジェクトを見つけられないというメッセージが表示されます。同様に、Turborepo にはデフォルト プロジェクトのコンセプトがないため、Turborepo ユーザーはターゲット アプリ ディレクトリを指定する必要があります。
  • Nx + Angular アプリケーションの場合、Angular アプリケーション ビルドシステムを使用してアプリケーションをビルドする必要があります。Angular アプリケーション ビルダーは project.json で指定されています。