将 monorepo 与 App Hosting 搭配使用

借助 monorepo，您可以在单个目录中整理和管理多个项目。本指南介绍了如何开始使用 App Hosting 部署 Turborepo 或基于 Nx 的应用。

使用 Firebase 控制台部署 monorepo

Firebase 控制台中的图形化后端设置流程内置了 Monorepo 支持。当系统在“部署设置”下提示输入“根目录”时，请指定要在 monorepo 中部署的应用的路径：

控制台后端创建视图的屏幕截图

使用 Firebase CLI 部署 monorepo

Monorepo 支持内置于由 Firebase CLI 命令 apphosting:backends:create 调用的后端设置流程中。进入此流程并指定所选 GitHub 代码库后，系统会提示您指定应用相对于代码库的根目录；在此提示下，传递您要在 monorepo 中部署的应用的路径：

$ 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 中指定。