日本語
  • 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 は、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 を無料で試してみてください