将 monorepo 与 App Hosting 搭配使用

借助 monorepo,您可以在单个中组织和管理多个项目 目录。本指南介绍了如何使用 App Hosting。

使用 Firebase CLI 部署 monorepo

在 Firebase 调用的后端设置流程中内置了 Monorepo 支持 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

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

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

排查 monorepo 部署问题

  • 如果您离开“根目录”在后端设置期间将字段留空,应用 在以下情况下,Hosting 可能仍然可以构建和部署用户的目标项目: 在相关 nx.json 的 defaultProject 中指定 配置 文件
  • 如果您既不指定“根目录”字段或 defaultProject,则构建将失败并显示一条消息 App Hosting 在 Nx monorepo 中找不到要定位的项目。
  • 对于 Nx + Angular 应用,您必须使用 Angular 应用 Builder 来构建应用。通过 Angular 应用构建器在 project.json 中指定