日本語
  • 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
Charles
Developer

ユーザー認証に何週間も費やすのはもうやめましょう
Logto でより速く安全なアプリをリリース。数分で認証を統合し、コア製品に集中できます。
始めましょう
Product screenshot

背景

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 パイプラインの構築に特に有用です。では、詳しく見ていきましょう！

前提条件

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

  1. Logto Cloud のサブスクリプションプランを持っていること。
  2. Logto テナントで管理 API 権限を持ったマシンツーマシンアプリケーションがあること。
  3. プロジェクトのソースコードが GitHub にホストされていること。
  4. プロジェクトに @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 リポジトリのシークレットとして保存すべきです：

  1. GitHub リポジトリにアクセスします。
  2. 「Settings」をクリックします。
  3. 「Secrets and variables > Actions」にナビゲートします。
  4. 新しいリポジトリシークレットをクリックし、以下のシークレットを追加します：
  • 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 を無料で試す