Flowise生产环境部署详解PostgreSQL持久化React嵌入完整流程1. 引言为什么需要生产级部署如果你已经用Flowise在本地快速搭建了几个AI工作流比如做个文档问答机器人或者智能客服助手感觉挺顺手。但接下来你可能就会遇到几个现实问题我本地电脑一关服务就没了怎么让团队其他人也能用画布上设计好的工作流怎么集成到我们自己的网站或应用里每次重启服务之前创建的工作流和聊天记录都没了能保存下来吗这就是从“玩一玩”到“真正用起来”的关键一步——生产环境部署。今天我们就来彻底解决这些问题。我会手把手带你完成两件最重要的事数据持久化把Flowise的工作流、对话记录等数据从临时的内存存到专业的PostgreSQL数据库里重启也不丢。前端嵌入把你设计好的AI助手界面无缝集成到你自己的React项目中变成你应用的一部分。整个过程不复杂跟着做半小时就能搞定。我们开始吧。2. 部署前准备理清核心概念在动手之前我们先花一分钟把几个关键点说清楚避免后面踩坑。2.1 Flowise的几种运行模式Flowise本质上是一个Node.js后端服务React前端界面。官方提供了几种运行方式npm直接运行适合本地开发调试数据默认存在内存里。Docker运行最推荐的方式环境隔离一键启动。我们今天就用这个。云平台一键部署比如Railway、Render适合不想管服务器的用户。对于生产环境Docker 外部数据库是标准答案。2.2 为什么要用PostgreSQLFlowise支持多种数据库来保存你的“知识”工作流、聊天记录、凭证等SQLite默认选项简单但并发性能差不适合多人使用。MySQL/MariaDB常见稳定。PostgreSQL官方推荐用于生产环境。理由很简单更稳定、功能更强大、社区支持好。我们选它。2.3 嵌入前端是什么意思Flowise启动后本身提供了一个完整的Web界面默认localhost:3000。但如果你想把那个聊天机器人窗口直接放在公司官网。把AI工作流的管理界面整合进内部管理系统。 那么你就需要把Flowise的前端React组件拿出来放到你自己的React项目里。后端API服务Flowise和前端界面你的网站可以分开部署通过API通信。好了概念清楚了我们进入实战环节。3. 第一步使用Docker Compose部署带PostgreSQL的Flowise这是最核心的一步。我们将使用Docker Compose同时启动Flowise服务和PostgreSQL数据库并让它们连接起来。3.1 准备docker-compose.yml文件在你的服务器上比如/opt/flowise目录创建一个名为docker-compose.yml的文件然后把下面的内容复制进去。version: 3.8 services: flowise: image: flowiseai/flowise container_name: flowise-app restart: unless-stopped ports: - 3000:3000 environment: - DATABASE_TYPEpostgres - DATABASE_HOSTpostgres-db - DATABASE_PORT5432 - DATABASE_NAMEflowise_db - DATABASE_USERflowise_user - DATABASE_PASSWORDYourSecurePassword123! # 请务必修改 - FLOWISE_USERNAMEadminyourcompany.com # 设置登录邮箱 - FLOWISE_PASSWORDYourAdminPassword456! # 设置登录密码 - SECRETKEYYourVeryLongSecretKeyForJWTEncryption # 用于加密的密钥请修改 - APIKEY_PATH/home/node/.flowise # API密钥存储路径 - LOG_PATH/home/node/.flowise/logs # 日志路径 - LOG_LEVELinfo - DEBUGfalse volumes: - flowise_data:/home/node/.flowise # 持久化存储API密钥、上传的文件等 - ./logs:/home/node/.flowise/logs # 将日志映射到主机方便查看 depends_on: - postgres-db networks: - flowise-network postgres-db: image: postgres:15-alpine container_name: flowise-postgres restart: unless-stopped environment: - POSTGRES_DBflowise_db - POSTGRES_USERflowise_user - POSTGRES_PASSWORDYourSecurePassword123! # 必须与flowise服务中的密码一致 volumes: - postgres_data:/var/lib/postgresql/data # 持久化数据库数据 networks: - flowise-network volumes: flowise_data: postgres_data: networks: flowise-network: driver: bridge重要参数解释你必须修改的DATABASE_PASSWORD和POSTGRES_PASSWORD数据库密码必须设置成一样且足够复杂。FLOWISE_USERNAME/FLOWISE_PASSWORD你首次登录Flowise Web界面的账号密码。SECRETKEY一个长的随机字符串用于加密会话可以用命令openssl rand -base64 32生成。ports“3000:3000”表示将容器内的3000端口映射到主机的3000端口。如果主机3000端口被占用可以改成“8080:3000”。3.2 启动服务保存好docker-compose.yml文件后在同一个目录下执行一条命令docker-compose up -d-d参数表示在后台运行。执行后Docker会去拉取Flowise和PostgreSQL的镜像然后创建容器并启动。3.3 检查服务状态启动完成后用下面命令看看两个容器是不是都正常运行了docker-compose ps你应该看到flowise-app和flowise-postgres两个服务的状态都是Up。3.4 验证部署访问Web界面打开浏览器输入http://你的服务器IP:3000。你会看到Flowise的登录界面用上面设置的FLOWISE_USERNAME和FLOWISE_PASSWORD登录。验证数据库登录后创建一个简单的工作流并保存。然后重启一下Flowise容器docker-compose restart flowise刷新浏览器你会发现刚才创建的工作流还在这说明数据已经成功持久化到PostgreSQL里了不再是内存存储。至此一个带有持久化数据库的Flowise生产服务就部署完成了。它会在服务器重启后自动运行你的所有数据都安全地存在PostgreSQL里。4. 第二步将Flowise工作流嵌入你的React应用现在后端服务稳了我们来看看怎么把前端界面“抠”出来放到你自己的网站里。假设你已经有一个用Create React App或Vite创建的React项目。4.1 在你的React项目中安装依赖首先进入你的React项目目录安装Flowise提供的嵌入包npm install flowise/embed # 或者 yarn add flowise/embed4.2 创建聊天机器人组件在你的项目里比如src/components/下创建一个新文件FlowiseChatbot.jsx。import React, { useRef, useEffect } from react; import { createChatBot } from flowise/embed; const FlowiseChatbot () { const chatContainerRef useRef(null); const chatflowId 你的工作流ID; // 需要替换 const apiHost http://你的服务器IP:3000; // 你的Flowise后端地址 useEffect(() { // 配置聊天机器人 const config { chatflowid: chatflowId, apiHost: apiHost, theme: { button: { backgroundColor: #3B82F6, // 蓝色 right: 20, bottom: 20, size: medium, iconColor: white, customIconSrc: https://your-domain.com/chat-icon.svg, // 可选自定义图标 }, chatWindow: { welcomeMessage: 你好我是AI助手有什么可以帮您, backgroundColor: #ffffff, height: 700, width: 400, fontSize: 16, botMessage: { backgroundColor: #f7f7f8, textColor: #303235, showAvatar: true, avatarSrc: https://your-domain.com/bot-avatar.png, }, userMessage: { backgroundColor: #3B82F6, textColor: #ffffff, showAvatar: true, avatarSrc: https://your-domain.com/user-avatar.png, }, textInput: { placeholder: 输入您的问题..., backgroundColor: #ffffff, textColor: #303235, sendButtonColor: #3B82F6, } } } }; // 创建并挂载聊天机器人 if (chatContainerRef.current) { createChatBot(config, chatContainerRef.current); } }, [chatflowId, apiHost]); return div ref{chatContainerRef} /; }; export default FlowiseChatbot;4.3 获取并配置关键参数这个组件里有两个关键信息你需要替换apiHost就是你刚刚部署的Flowise后端地址比如http://192.168.1.100:3000或https://flowise.yourcompany.com。chatflowId这是工作流ID是嵌入哪个机器人的唯一标识。如何获取chatflowId登录你的Flowise后台 (http://服务器IP:3000)。在画布上设计好你的聊天机器人工作流。点击画布右上角的“发布” (Publish)按钮。在弹出的窗口中你会看到一个“聊天流ID (Chatflow ID)”复制它。你也可以点击“嵌入 (Embed)”标签页那里会直接生成一段示例代码里面就包含了chatflowId。4.4 在应用中使用该组件现在你可以在任何页面引入这个聊天机器人组件了。例如在App.jsx中import React from react; import FlowiseChatbot from ./components/FlowiseChatbot; import ./App.css; function App() { return ( div classNameApp header我的网站/header main {/* 你的网站主要内容 */} h1欢迎访问/h1 p这里有一个集成的AI助手可以随时为您服务。/p /main {/* 聊天机器人将作为一个浮动按钮出现在页面右下角 */} FlowiseChatbot / /div ); } export default App;启动你的React项目你就能在网站右下角看到一个蓝色的聊天按钮。点击它就会弹出你之前在Flowise里设计的那个聊天机器人窗口。所有对话都会通过API发送到你的Flowise后端进行处理。5. 进阶配置与优化建议基础部署和嵌入搞定后我们再看几个让系统更稳定、更安全的进阶操作。5.1 配置反向代理与HTTPS强烈建议直接暴露3000端口不太安全也不专业。你应该用Nginx或Caddy这样的Web服务器做反向代理并配置HTTPS。一个简单的Nginx配置示例 (/etc/nginx/sites-available/flowise)server { listen 80; server_name flowise.yourdomain.com; # 你的域名 return 301 https://$server_name$request_uri; } server { listen 443 ssl http2; server_name flowise.yourdomain.com; ssl_certificate /path/to/your/certificate.crt; ssl_certificate_key /path/to/your/private.key; # ... 其他SSL优化配置 location / { proxy_pass http://localhost:3000; # 指向本机运行的Flowise容器 proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection upgrade; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; proxy_cache_bypass $http_upgrade; proxy_read_timeout 300s; # 对于长对话很重要 } }配置好后重启Nginx并通过域名访问。别忘了将React组件中的apiHost也改为https://flowise.yourdomain.com。5.2 管理API密钥与安全性API密钥存储在Docker Compose文件中我们通过卷flowise_data将/home/node/.flowise目录持久化了。你的OpenAI、Anthropic等模型的API密钥就安全地存储在这里。访问控制生产环境务必使用强密码并考虑定期更换。对于内网服务可以结合Nginx的IP白名单或基础认证来增加一层保护。环境变量管理像数据库密码、密钥这类敏感信息不要直接写在docker-compose.yml里。应该使用Docker的secrets功能或通过.env文件引入在Compose文件中使用env_file选项。5.3 性能监控与日志查看日志我们之前已经把日志映射到了主机的./logs目录。你可以用docker-compose logs -f flowise实时查看或者去该目录下查看日志文件便于排查错误。资源监控使用docker stats或Portainer等工具监控容器CPU、内存使用情况。如果流量大可以考虑增加Docker容器的资源限制在Compose文件中配置deploy.resources.limits。6. 总结我们来回顾一下今天完成的事情理解了生产部署的必要性从本地玩具到团队可用的服务数据持久化和服务稳定性是关键。使用Docker Compose一键部署通过一个配置文件同时启动了Flowise应用和PostgreSQL数据库并正确连接实现了数据持久化。将AI前端嵌入React项目利用flowise/embed包轻松将设计好的聊天机器人变成你网站的一个浮动组件实现了前后端分离的集成。探讨了进阶优化通过反向代理配置HTTPS提升安全性并了解了密钥管理和日志监控的基本方法。整个过程就像搭积木Docker Compose负责搭建稳固的后台积木底座而React嵌入则是把你精心设计的AI功能积木造型展示给用户。现在你的Flowise已经是一个可以7x24小时运行、数据永不丢失、并能嵌入任何Web应用的正式服务了。接下来你可以专注于在Flowise画布上创造更强大的AI工作流而不用担心部署和集成的问题。快去把你的创意变成现实吧获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。