使用 GitHub Actions 工作流程自動化你的自訂登入 UI 部署

背景#

Logto 是你的最佳客戶身份和訪問管理 (CIAM) 解決方案選擇。最近，我們在 Logto Cloud 上推出了「Bring your own UI」功能，讓開發者可以完全自訂其登入 UI。

在之前的博客文章中，我們還提供了有關創建自訂登入 UI 的步驟指南，包括：

• 使用代碼範例來開發自訂登入頁面
• 設定 @logto/tunnel CLI 進行本地調試
• 構建並壓縮自訂 UI 資產文件
• 上傳壓縮包，並通過控制台 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 工作流程的解釋#

• 觸發器：每次推送到 main 分支時觸發工作流程。
• 任務：部署任務在最新的 Ubuntu 環境中運行，並執行以下步驟。
• 步驟：
  • 檢出代碼：此步驟檢出你的儲存庫代碼。
  • 設置 Node.js：此步驟設置 Node.js 環境。
  • 安裝依賴項：此步驟安裝你的專案依賴項。
  • 構建：此步驟將你的專案源代碼構建為 HTML 資產。假設輸出文件夾名為根目錄中的 dist。
  • 部署到 Logto Cloud：此步驟運行 Tunnel CLI 命令，將 ./dist 目錄中的 HTML 資產部署到 Logto Cloud 租戶中。它使用環境變量來處理敏感信息。

有關 GitHub Actions 的更多信息，請訪問 GitHub Actions 文檔。

第2步：在 GitHub 中配置操作機密#

為了保持憑證的安全，你應將其存儲為儲存庫中的機密信息：

1. 進入你的 GitHub 儲存庫。
2. 點擊「設定」。
3. 導航到「機密和變量 > 操作」
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。

結論#

通過將 @logto/tunnel CLI 命令集成到你的 GitHub Actions 工作流程中，你可以精簡將自訂登入 UI 部署到 Logto Cloud 的過程。此自動化允許你專注於開發，同時確保你的更改在實時環境中不斷測試。

祝你編程愉快！