全部產品
Search

搜尋本產品

    Container Service for Kubernetes：基於Flowise構建網頁通用聊天助手

    文件中心

    Container Service for Kubernetes：基於Flowise構建網頁通用聊天助手

    更新時間：Jun 09, 2026

    使用Flowise服務，您可以輕鬆編排個人化的對話流程。通過直觀的圖形介面和靈活的工作流程設計，無論您是開發人員還是非技術人員，都能輕鬆建立複雜的互動式聊天應用，並將其整合到業務情境中，從而提升日常研發和管理效率。此外，在ACK叢集上部署服務，還支援根據業務需求的變化，即時且平滑地進行擴充，助力業務持續發展。

    方案概覽

    方案最終效果為在網頁中嵌入一個藍色聊天助手浮動按鈕，使用者訪問網站時可通過該按鈕與通用聊天助手進行互動。

    配置一個通用聊天助手，只需3步：

    1. 安裝flowise組件：通過Container Service建立一個ACK叢集，並安裝flowise組件。

    2. 構建通用聊天助手工作流程：通過訪問Flowise服務，建立通用聊天助手。

    3. 編排個人化聊天流程：最後可以通過設定問答模型和提示詞模板，並使用鏈式模型將其串連。

    flowise

    1. 安裝flowise組件

    Flowise是一個開源且便於使用的架構，旨在協助開發人員快速而靈活地構建大型語言模型（LLM）應用程式。它通過低代碼或無代碼的操作方式，簡化了 LangChain的使用。Flowise提供了一個直觀的使用者介面，允許使用者通過拖拽可視化組件來構建工作流程，從而輕鬆配置大語言模型的應用。這使得開發人員能夠更快地從測試階段過渡到生產階段。

    1.1 環境準備

    1. 已建立ACK Pro叢集，且叢集版本為1.22及以上。具體操作，請參見建立ACK託管叢集和升級叢集。

    2. 已通過kubectl工具串連Kubernetes叢集。具體操作，請參見擷取叢集KubeConfig並通過kubectl工具串連叢集。

    1.2 組件部署

    1. 安裝部署flowise組件。

      1. 登入Container Service管理主控台，在左側導覽列選擇叢集列表。

      2. 單擊目的地組群，進入叢集詳情頁面，按照序號依次單擊，為目的地組群配置flowise組件。

        您無需為組件配置應用程式名稱和命名空間，單擊下一步後會出現一個請確認的彈框，單擊是，即可使用預設的應用程式名稱（flowise）和命名空間（flowise-system）。

        操作路徑：①在左側導覽列選擇應用 > Helm，②單擊建立，③選擇AI&LLM應用情境標籤，④搜尋並選中flowise應用卡片，在參數配置頁面的 YAML 編輯區中，按需修改 config 區塊的 username（預設值 flowiseuser）和 password（預設值 flowisepassword），單擊確定完成部署。

      3. 選擇Chart 版本為最新版本，單擊確定即可完成flowise組件安裝。

        在參數配置頁簽，配置自訂的username和password。

    2. 校正flowise組件是否正常運行。

      執行以下命令，查看flowise-system命名空間下的Pod是否為Running狀態。

      kubectl get pod -n flowise-system

      預期輸出如下，表明flowise組件已經安裝成功。

      NAME                       READY   STATUS    RESTARTS   AGE
flowise-596fb8bf88-7zdlr   1/1     Running   0          3h
flowise-postgresql-0       1/1     Running   0          3h

    2. 建立工作流程編排模板

    2.1 訪問Flowise服務

    1. 為flowise組件開啟公網訪問功能。

      如果您使用的是生產環境，為了您的應用資料安全，建議您開啟訪問控制功能。在Container Service ACK 控制台左側導覽列選擇網路 > 服務，在命名空間下拉框中選擇 flowise-system，找到 flowise 服務並單擊右側更新。在更新服務彈窗中，服務類型選擇負載平衡 (LoadBalancer)，負載平衡類型為傳統型負載平衡 CLB，選擇資源為建立資源，訪問方式選擇公網訪問，存取控制可按需配置，外部流量策略選擇 Local。連接埠映射中名稱為 http、服務連接埠為 3000、容器連接埠為 http、協議為 TCP，單擊確定完成配置。

    2. 配置完成後，您會看到flowise組件的外部 IP 位址（External IP），將該外部IP地址輸入瀏覽器地址欄即可訪問Flowise服務。

      在 Service（服務） 列表頁面中，確認 flowise 服務類型為 LoadBalancer，連接埠映射為 3000:30864/TCP。

    3. 訪問Flowise服務。

      訪問外部 IP 位址（External IP），請根據頁面提示輸入自訂的Username和Password，來使用服務。

      如果在安裝flowise組件時，未自訂username和password的取值，則使用預設值Username=flowiseuser，Password=flowisepassword訪問服務。

    2.2 建立Chatflows

    Flowise的強大功能之一是您可以將流程轉變為工具。例如有一個主要流程來協調何時使用哪些必要的工具，並且每個工具都旨在執行一項特定的任務。

    首先每個子流程工具將獨立執行，並具有單獨的記憶體以提供更清晰的輸出。其次每個子流程的詳細輸出匯總到最終代理，通常會產生更高品質的輸出。

    您可以通過以下方式建立Chatflow。

    1. 輸入username和password登入Flowise服務平台。

    2. 建立新的Chatflow。

      在Flowise服務平台頁面，依次單擊Chatflows > Add New建立新的Chatflow。

    3. 編排個人化聊天流程

    3.1 配置問答模型Chat Models

    在Flowise服務中，可通過建立Node以及構建Node之間的聯絡來編排LLM應用。與積木類似，您可以利用Flowise服務中所有可用的Node，構建一個自訂的大語言模型編排流程、聊天機器人或智能代理等LLM應用。目前Flowise服務支援基於LangChain和LlamaIndex等架構概念，可以從中抽象出Agents、Chains、Chat Models等多種類型的Node。

    1. 單擊進入Chat Models面板，拖拽建立ChatOpenAI Custom節點。然後依次單擊Connect Credential下拉選框 > Create New，輸入千問的API Key建立新的Connect Credential。

    2. 先將Model Name設定為qwen-turbo。然後在Additional Parameters頁面將BasePath設定為https://dashscope.aliyuncs.com/compatible-mode/v1。

      在 Connect Credential 中選擇 通義千問，將 Temperature 設定為 0.9。

    3.2 設定提示詞模板Prompt Template

    進入Prompts面板，拖拽建立Prompt Template節點，配置Template資訊如下。

    Question: {question}
Answer: Let's think step by step.

    3.3 設定鏈式模型LLM Chain

    1. 進入Chains面板，拖拽建立LLM Chain節點。

      建立的 LLM Chain 節點包含以下輸入項：Language Model（必填）、Prompt（必填）、Output Parser、Input Moderation 和 Chain Name（用於命名鏈）；輸出項為 LLM Chain。

    2. 將建立完成的模板的節點串連，即可完成通用型聊天助手的編排。

      編排完成的工作流程包含 ChatOpenAI Custom 節點（模型選擇 qwen-turbo，需配置 Connect Credential）、Prompt Template 節點和 LLM Chain 節點，三者通過連串線聯。

    3.3 驗證效果

    完成Chatflow的編排後單擊頁面右上方儲存按鈕，然後可以通過頁面右上方的Message按鈕進行調試，效果如下。

    畫布中 ChatOpenAI Custom（Connect Credential 選擇 通義千問，Model Name 填寫 qwen-turbo，Temperature 設為 0.9）、Prompt Template（模板內容為 Question: {question} Answer: Let's think step by step.）和 LLM Chain 三個節點依次串連。在右側聊天面板中發送"請介紹你自己"，模型返回一段關於 AI 助手能力的中文自我介紹，驗證對話功能正常。

    總結

    應用到生產環境

    如果您想將開發的AI問答助手引入到您企業或個人的生產環境，可以通過以下2種方式操作。

    1. 您可以將聊天流程作為API使用，並連結到前端應用程式。

      Flowise基於“後端即服務”理念為所有應用提供了API，開發人員可以直接在前端應用中擷取大型語言模型的強大能力，而無需關注複雜的後端架構和部署過程。詳細操作，請參見基於API開發。

    2. 您也可以在您的個人或業務網站上嵌入通用聊天助手。

      只需將所提供的內嵌程式碼複製粘貼到您HTML檔案的標籤中。

      您首先可以使用Flowise服務在幾分鐘內製作屬於您自己的通用聊天助手，並使用Flowise支援的功能將您的AI應用嵌入到業務網站中。詳細操作，請參見嵌入網站。

    樣本（將AI應用嵌入到網站）

    下面將為您詳細介紹如何將開發的LLM應用嵌入到您企業或個人網站，您可以按照以下樣本進行操作。

    本樣本作為示範，為了您的應用資料安全，建議您在生產環境同時開啟訪問控制功能。

    1. 已為flowise組件開啟公網訪問功能，將該外部IP地址輸入瀏覽器地址欄即可訪問Flowise服務。更多操作，請參見訪問Flowise服務。

    2. 在ACK叢集中快速構建簡單的Web應用來調試您的通用聊天助手。

      下面是一個在ACK叢集中部署Web應用的樣本，它會在您的ACK叢集上運行，您可以嵌入在Flowise服務中開發的LLM應用。

      1. 擷取Flowise服務代碼。

        選擇一種方式將聊天應用的對應的代碼嵌入到您的網站中。

        單擊工作流程編輯器右上方的 </> 表徵圖，開啟 Embed in website or use as API 對話方塊。選擇 Embed 選項卡，再選擇嵌入方式子選項卡（Popup Html、Fullpage Html、Popup React 或 Fullpage React）。代碼地區展示包含 chatflowid 和 apiHost 配置的嵌入指令碼，單擊代碼地區右側的複製按鈕將代碼複製到剪貼簿，粘貼至您網站 HTML 檔案的 <body> 標籤內即可。

      2. 在ACK叢集中，建立一個Deployment來運行您的Web應用，並建立Service來暴露應用。

        以下是一個簡單的YAML樣本，展示如何部署一個包含靜態HTML的Nginx伺服器。

        1. 登入Container Service管理主控台，在組態管理 > 配置項頁面，選擇命名空間為default，然後單擊使用YAML建立資源，將下方YAML內容複寫到模板中，並將window.difyChatbotConfig、scr、id修改為已擷取的Flowise服務代碼。

          具體代碼資訊，請參考下方樣本。

          展開查看YAML內容

          apiVersion: apps/v1
kind: Deployment
metadata:
  name: web-deployment
spec:
  replicas: 2
  selector:
    matchLabels:
      app: web
  template:
    metadata:
      labels:
        app: web
    spec:
      containers:
      - name: web
        image: registry.openanolis.cn/openanolis/nginx:1.14.1-8.6
        ports:
        - containerPort: 80
        volumeMounts:
        - name: web-content
          mountPath: /usr/share/nginx/html
      volumes:
      - name: web-content
        configMap:
          name: web-config
  

---
apiVersion: v1
kind: Service
metadata:
  name: web-service
spec:
  selector:
    app: web
  ports:
    - protocol: TCP
      port: 80
      targetPort: 80
  type: LoadBalancer

---
apiVersion: v1
kind: ConfigMap
metadata:
  name: web-config
data:
  index.html: |
    <!DOCTYPE html>
    <html lang="zh">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>The simplest website service</title>
      
    </head>
    <body>
        <h1>Welcome to my website!</h1>
    
    
        <script type="module">
    import Chatbot from "https://cdn.jsdelivr.net/npm/flowise-embed/dist/web.js"
    Chatbot.init({
        chatflowid: "86c03xxx-de3a-4xx3-9xx2-f5d56xxxx0a4",
        apiHost: "http://127.xx.xx.1:8080",
    })
        </script>

    </body>
    </html>

        2. 成功部署截圖：

          在Container Service控制台左側導覽列選擇無狀態，查看web-deployment工作負載詳情。命名空間為default，容器組中2個Pod的鏡像均為registry.openanolis.cn/openanolis/nginx:1.14.1-8.6，狀態均為Running，就緒數2/2，表明部署成功。

        3. 為已部署的服務開啟公網訪問。

          為了您的應用資料安全，建議您在生產環境同時開啟訪問控制功能。

          在左側導覽列選擇網路 > 服務，找到web-service並單擊其操作列的更新。在更新服務對話方塊中，選擇負載平衡 (LoadBalancer)標籤頁，負載平衡類型選擇傳統負載平衡 CLB，選擇資源為建立資源，訪問方式選擇公網訪問，計費方式選擇隨用隨付，然後單擊確定。

          配置完成後，您會看到web-service服務的外部 IP 位址（External IP），將該外部IP地址輸入瀏覽器地址欄即可訪問Web服務。

          重要

          • 如果您想讓其他裝置訪問，請確保您的叢集防火牆或安全性群組中設定允許流量通過80連接埠。具體操作，請參見添加安全性群組規則。

          • 確保您的代碼和第三方代碼是安全的，避免可能的XSS或惡意代碼嵌入。給您提供了一個基本樣本以供示範，您可以根據自己的需求進行擴充和修改。

    持續改進

    如果您想進一步瞭解如何整合定製化的LLM應用，請參見基於Dify構建網頁定製化AI問答助手。

    使用Dify服務您可以實現將企業或個人的知識庫整合到大模型應用中，從而建立出深度定製化的AI問答解決方案，並且可將其整合到您的業務情境，助力您提升日常研發管理效能。

    計費相關

    使用本功能會收取ACK Pro叢集管理費用和阿里雲雲產品資源費用。使用本功能涉及的阿里雲雲產品有：ECS雲端服務器、CLB負載平衡、EIPElastic IP Address、NAS檔案儲存體等，您需要按照各雲產品計費規則為使用的資源付費，費用由各雲產品收取。關於叢集管理費和雲產品資源費用的更多資訊，請參見計費概述。