将 monorepo 与 App Hosting 搭配使用

借助单体代码库,您可以在单个目录中组织和管理多个项目。本指南介绍了如何开始使用 App Hosting 服务部署基于 Turborepo 或 Nx 的应用。

使用 Firebase 控制台部署单体代码库

图形化后端设置流程内置了单体代码库支持,可在 Firebase控制台中找到。当系统在“部署设置”下提示您输入“根目录”时,请指定您要在单体代码库中部署的应用的路径:

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

使用 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

例如,假设您要构建和部署的应用为“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

排查单体代码库部署问题

  • 如果您未为 Nx 指定“根目录”字段,则构建将 失败,并显示一条消息,指出 App Hosting无法在 Nx 单体代码库中找到要定位的项目。 同样,Turborepo 用户必须指定目标应用目录,因为 Turborepo 中没有默认项目的概念。
  • 对于 Nx + Angular 应用,您必须使用 Angular 应用 构建器 来构建应用。Angular 应用构建器在 project.json 中指定