App Hosting で monorepos を使用する

モノレポを使用すると、複数のプロジェクトを 1 つのディレクトリで整理して管理できます。このガイドでは、App Hosting を使用して 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

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

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

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

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

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