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 コンソールでモノレポジトリをデプロイする

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

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

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

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