跳到主要内容

使用 CLI 上传自定义 UI 资源

在开发完自定义登录 UI 后,你可以将其部署到 Logto Cloud,以服务于你的租户用户。正如我们在 "Bring your UI" 文档中介绍的那样,你可以通过在 Logto Console 中上传压缩的 UI 资源来实现这一点。

这里我们提供了另一种使用 CLI 命令将 UI 资源部署到 Cloud 的选项,这在你希望将部署过程集成到 NPM 脚本或 CI/CD 流水线时会很有用。

说明

备注:

假设你已在 /path/to/your/custom/ui/dist 目录中构建了自定义登录 UI 资源。

部署命令将自动压缩你的 UI 资源,将其上传到 Logto Cloud,并将自定义 UI 设置为你的租户用户的登录体验。

先决条件

由于此命令与 Logto Management API 交互,因此需要一个机器对机器应用来认证请求。请参考 此文档 了解 Logto Management API 是什么以及如何创建具有所需权限的机器对机器应用。

命令选项

--help                                 显示帮助
--version 打印 CLI 版本
--auth 你的 Logto M2M 应用的认证凭据。例如:<app-id>:<app-secret>
--endpoint 指向你的 Logto Cloud 实例的 Logto 端点 URI。例如:https://<tenant-id>.logto.app/
--path, --experience-path 你的自定义登录体验资源的本地文件夹路径。
--resource, --management-api-resource Logto Management API 资源指示器。如果使用自定义域名,则必需。
--verbose 显示详细输出。[默认值:false]

运行命令

假设你的应用 ID 是 foo,应用密钥是 bar,你的租户 ID 是 baz

npx @logto/tunnel deploy --auth foo:bar --endpoint https://baz.logto.app --experience-path /path/to/your/custom/ui/dist

如果你为 Logto 端点使用自定义域名,则必须指定额外的选项 --management-api-resource(或 --resource)。

鉴于 Logto Management API 资源始终固定为 https://<tenant-id>.logto.app/api。你可以按如下方式运行命令:

npx @logto/tunnel deploy --resource https://baz.logto.app/api --auth foo:bar --endpoint https://your.custom.domain --experience-path /path/to/your/custom/ui/dist

注意:

  1. 使用默认 Logto 域名时可以省略此选项,因为 CLI 可以自动推断资源。
  2. 使用自定义域名或默认 Logto 域名作为端点将产生相同的结果。

或者,如果你已有现成的 zip 文件并希望直接使用它,可以指定 --zip-path 选项。

npx @logto/tunnel deploy --auth foo:bar --endpoint https://baz.logto.app --zip-path /path/to/your/custom/ui/dist.zip

支持的环境变量

部署命令还支持环境变量,并会自动将它们映射到相应的选项。

所有支持的环境变量如下所示,前缀为 LOGTO_

环境变量CLI 选项
LOGTO_AUTH--auth
LOGTO_ENDPOINT--endpoint
LOGTO_EXPERIENCE_PATH--experience-path
LOGTO_PATH--path
LOGTO_MANAGEMENT_API_RESOURCE--management-api-resource
LOGTO_RESOURCE--resource
LOGTO_ZIP_PATH--zip-path

使用环境变量

  1. 你可以在 CLI 根目录或 CLI 所在的任何父目录中创建一个 .env 文件。
.env
LOGTO_AUTH=foo:bar
LOGTO_ENDPOINT=https://your.custom.domain
LOGTO_EXPERIENCE_PATH=/path/to/your/custom/ui/dist
LOGTO_RESOURCE=https://baz.logto.app/api

然后运行命令而不指定选项。

npx @logto/tunnel deploy
  1. 或者,在运行命令时直接指定这些环境变量。
LOGTO_AUTH=foo:bar LOGTO_ENDPOINT=https://your.custom.domain LOGTO_EXPERIENCE_PATH=/path/to/your/custom/ui/dist LOGTO_RESOURCE=https://baz.logto.app/api npx @logto/tunnel deploy