日本語

github actions workflow
CI/CD
automated deployment
streamline-deployment
bring your own UI
custom sign-in UI
@logto/tunnel

GitHub Actions ワークフローでカスタムサインイン UI のデプロイを自動化する

GitHub Actions ワークフローを使用して、カスタムサインイン UI を DevOps パイプライン内で Logto Cloud に自動デプロイする方法を紹介します。

Charles

Developer

9/13/2024

ユーザー認証に何週間も費やすのはもうやめましょう

Logto でより速く安全なアプリをリリース。数分で認証を統合し、コア製品に集中できます。

始めましょう

背景

Logto は、Customer Identity and Access Management (CIAM) ソリューションのより良い選択肢です。最近、Logto Cloud で「独自 UI を持ち込む」機能をリリースし、開発者がサインイン UI を完全にカスタマイズできるようにしました。

以前のブログ記事では、独自のサインイン UI を作成するためのステップバイステップガイドを提供しました。内容は次の通りです：

コードサンプルを使ってカスタムサインインページを開発すること
ローカルデバッグ用に @logto/tunnel CLI をセットアップすること
カスタム UI アセットをビルドし zip 圧縮すること
zip パッケージをアップロードし、Console UI 経由で Logto Cloud にデプロイすること

しかし、DevOps 的な思考を持ったアプリ開発者として、カスタムサインインページを変更する際にこのプロセスは面倒だと感じるかもしれません。全プロセスを自動化する方法はないのでしょうか？

皆さんからのフィードバックに耳を傾け、新しい deploy CLI コマンドを @logto/tunnel に導入しました。このコマンドを使用すると、ターミナルでコマンドを実行することで、または GitHub Actions ワークフローに統合することで、デプロイメントプロセスを自動化できます。CI/CD パイプラインの構築に特に有用です。では、詳しく見ていきましょう！

前提条件

セットアップに入る前に、以下をご確認ください：

Logto Cloud のサブスクリプションプランを持っていること。
Logto テナントで管理 API 権限を持ったマシンツーマシンアプリケーションがあること。
プロジェクトのソースコードが GitHub にホストされていること。
プロジェクトに @logto/tunnel CLI ツールを開発依存としてインストールすること。

ステップ 1: GitHub Actions ワークフローを作成する

GitHub リポジトリで新しいワークフローファイルを作成します。.github/workflows/ に移動し、deploy.yml というファイルを作成します。

GitHub Actions ワークフローの説明

トリガー：メインブランチへのプッシュごとにワークフローがトリガーされます。
ジョブ：デプロイジョブは最新の Ubuntu 環境で実行され、次のステップを実行します。
ステップ：
- コードをチェックアウト：このステップではリポジトリのコードをチェックアウトします。
- Node.js をセットアップ：このステップで Node.js 環境をセットアップします。
- 依存関係をインストール：このステップでプロジェクトの依存関係をインストールします。
- ビルド：このステップでプロジェクトのソースコードを html アセットにビルドします。出力フォルダはルートディレクトリ内の dist と仮定します。
- Logto Cloud にデプロイ：このステップでは、Tunnel CLI コマンドを実行して ./dist ディレクトリ内の html アセットを Logto Cloud テナントにデプロイします。機密情報には環境変数を使用します。

GitHub Actions の詳細については、GitHub Actions ドキュメントをご覧ください。

ステップ 2: GitHub でアクションシークレットを設定する

資格情報を安全に保つために、それらを GitHub リポジトリのシークレットとして保存すべきです：

GitHub リポジトリにアクセスします。
「Settings」をクリックします。
「Secrets and variables > Actions」にナビゲートします。
新しいリポジトリシークレットをクリックし、以下のシークレットを追加します：

LOGTO_AUTH：Logto の M2M アプリケーション資格情報を <m2m-app-id>:<m2m-app-secret> の形式で。
LOGTO_ENDPOINT：Logto Cloud エンドポイント URI。
LOGTO_RESOURCE：あなたの Logto 管理 API リソースインジケータ。「API リソース -> Logto 管理 API」で見つけることができます。Logto Cloud テナントでカスタムドメインが有効になっている場合に必要です。

ステップ 3: ワークフローをテストする

ワークフローを設定し、シークレットを設定したら、PR をマスターブランチにマージしてテストできます。GitHub Actions ワークフローが自動的にトリガーされ、カスタムサインイン UI が Logto Cloud にデプロイされます。

GitHub Actions を使用した Logto Cloud への成功したデプロイ

結論

@logto/tunnel CLI コマンドを GitHub Actions ワークフローに統合することで、カスタムサインイン UI の Logto Cloud へのデプロイプロセスを合理化できます。この自動化により、開発に集中しつつ、変更がライブ環境で継続的にテストされることを保証します。

ハッピーコーディング！

Logto Cloud を無料で試す

背景#

前提条件#

ステップ 1: GitHub Actions ワークフローを作成する#

GitHub Actions ワークフローの説明#

ステップ 2: GitHub でアクションシークレットを設定する#

ステップ 3: ワークフローをテストする#

結論#

背景#

前提条件#

ステップ 1: GitHub Actions ワークフローを作成する#

GitHub Actions ワークフローの説明#

ステップ 2: GitHub でアクションシークレットを設定する#

ステップ 3: ワークフローをテストする#

結論#

背景

前提条件

ステップ 1: GitHub Actions ワークフローを作成する

GitHub Actions ワークフローの説明

ステップ 2: GitHub でアクションシークレットを設定する

ステップ 3: ワークフローをテストする

結論

背景

前提条件

ステップ 1: GitHub Actions ワークフローを作成する

GitHub Actions ワークフローの説明

ステップ 2: GitHub でアクションシークレットを設定する

ステップ 3: ワークフローをテストする

結論