CLI を使用してカスタム UI アセットをアップロードする
カスタムサインイン UI を開発した後、それを Logto Cloud にデプロイしてテナントユーザーに提供できます。 "Bring your UI" ドキュメントで既に紹介したように、Logto Console で圧縮された UI アセットをアップロードすることでこれを実現できます。
ここでは、CLI コマンドを使用して Cloud に UI アセットをデプロイする別のオプションを提供します。これは、デプロイメントプロセスを NPM スクリプトや CI/CD パイプラインに統合したい場合に便利です。
手順
カスタムサインイン UI アセットが /path/to/your/custom/ui/dist ディレクトリに構築されていると仮定します。
デプロイコマンドは、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
注意：
- デフォルトの Logto ドメインを使用する場合、このオプションは省略できます。CLI がリソースを自動的に推測できるためです。
- エンドポイントとしてカスタムドメインまたはデフォルトの 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 |
環境変数を使用する
- CLI のルートディレクトリ、または CLI が配置されている任意の親ディレクトリに
.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
- または、コマンドを実行する際にこれらの環境変数を直接指定します。
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