App Hosting で monorepos を使用する

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

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

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

$ 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 コンソールを使用して monorepos をデプロイする

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

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

• バックエンドの設定時に「root ディレクトリ」フィールドを空白のままにしても、関連する nx.json 構成ファイルの defaultProject にユーザーのターゲット プロジェクトが指定されている場合は、App Hosting でそのプロジェクトをビルドしてデプロイできることがあります。
• [root directory] フィールドと defaultProject のどちらも指定しない場合、ビルドは失敗し、App Hosting が Nx モノレポ内のターゲット プロジェクトを見つけられないというメッセージが表示されます。
• Nx + Angular アプリケーションの場合は、Angular アプリケーション ビルダーを使用してアプリケーションをビルドする必要があります。Angular アプリケーション ビルダーは project.json で指定します。