使用 GitHub Actions 工作流程自動部署自訂登錄 UI

背景#

Logto 是更好的客戶身份和存取管理 (CIAM) 解決方案。最近，我們在 Logto Cloud 上推出了「Bring your own UI」功能，使開發人員可以完全自訂自己的登錄 UI。

在之前的博客文章中，我們也提供了一個逐步指南，介紹如何創建自己的登錄 UI，包括：

• 使用代碼示例開發自訂登錄頁面
• 設置 @logto/tunnel CLI 進行本地調試
• 編譯並打包你的自訂 UI 資產
• 上載壓縮包並通過控制台 UI 部署到 Logto Cloud

然而，作為一個具有 DevOps 思維的應用程序開發人員，當在自訂登錄頁面中進行更改時，這個過程可能顯得繁瑣。是否有辦法自動化整個過程？

我們聽取了你的反饋，並很高興地介紹在 @logto/tunnel 中推出新的deploy CLI 指令。這個指令允許你通過在終端執行命令或將其集成到 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：此步驟運行隧道 CLI 指令以將 ./dist 目錄中的 html 資產部署到你的 Logto Cloud 租戶中。它使用環境變量來處理敏感信息。

欲瞭解詳情，請訪問 GitHub Actions 文檔。

步驟 2：在 GitHub 上配置動作密鑰#

為了保證憑證的安全性，應將它們存儲為 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 的過程。這種自動化讓你能夠專注於開發，同時確保你的更改在現場環境中得到持續測試。

祝編程愉快！