Flowise最佳实践：使用JavaScript开发本地部署的技巧

引言

Flowise是一个开源的、基于Node.js的低代码工具，它允许开发者通过可视化界面构建AI工作流。本文将带你了解如何在本地环境中使用JavaScript开发和部署Flowise应用，分享一些实用技巧和最佳实践。

准备工作

在开始之前，请确保你的开发环境满足以下要求：

Node.js (建议v16.x或更高版本)
npm或yarn包管理器
Git (可选，用于版本控制)
基本的JavaScript知识

代码片段

# 检查Node.js和npm版本
node -v
npm -v

第一步：安装Flowise

1.1 创建项目目录

代码片段

mkdir flowise-project && cd flowise-project

1.2 初始化npm项目

代码片段

npm init -y

1.3 安装Flowise核心包

代码片段

npm install flowise

注意事项：
– 如果你遇到权限问题，可以尝试在命令前加上sudo(Mac/Linux)或以管理员身份运行(Windows)
– 国内用户可以使用淘宝镜像加速安装：npm install -g cnpm --registry=https://registry.npmmirror.com，然后使用cnpm代替npm

第二步：配置Flowise环境

2.1 创建配置文件

在项目根目录下创建.env文件：

代码片段

# Flowise基础配置
FLOWISE_PORT=3000
FLOWISE_SECRETKEY=your-secret-key-here

# 数据库配置（可选）
DATABASE_PATH=./database.json

# API密钥（用于集成外部服务）
OPENAI_API_KEY=your-openai-key

解释：
– FLOWISE_PORT: Flowise应用运行的端口号
– FLOWISE_SECRETKEY: 用于加密会话的密钥，生产环境务必设置强密码
– DATABASE_PATH: Flowise默认使用内存数据库，设置此路径可持久化数据

2.2 初始化数据库（可选）

如果你配置了DATABASE_PATH，可以运行以下命令初始化：

代码片段

echo "{}" > database.json

第三步：启动Flowise应用

3.1 基本启动方式

最简单的方式是直接运行：

代码片段

npx flowise start

访问 http://localhost:3000 即可看到Flowise界面。

3.2 PM2持久化运行（生产环境推荐）

对于生产环境，建议使用PM2来管理进程：

代码片段

# 全局安装PM2
npm install -g pm2

# 使用PM2启动Flowise
pm2 start "npx flowise start" --name flowise-app

# 查看运行状态
pm2 status

# 设置开机自启（Linux/Mac）
pm2 startup && pm2 save

优点：
– 自动重启崩溃的应用
– 日志管理功能
– CPU/内存监控

第四步：开发自定义组件

Flowise的强大之处在于可以扩展自定义组件。下面我们创建一个简单的JavaScript处理节点。

4.1 创建自定义组件目录结构

代码片段

custom-components/
├── MyCustomNode/
│   ├── package.json
│   ├── index.js
│   └── nodeData.json

4.2 package.json示例

代码片段

{
    "name": "flowise-custom-node",
    "version": "1.0.0",
    "description": "My custom Flowise node",
    "main": "index.js",
    "dependencies": {
        "flowise-components": "^1.0.0"
    }
}

4.3 index.js示例代码

代码片段

const { ICommonObject, INode, INodeData, INodeParams } = require('flowise-components')

class MyCustomNode {
    constructor() {
        this.label = 'My Custom Node'
        this.name = 'myCustomNode'
        this.version = '1.0.0'
        this.type = 'MyCustomNode'
        this.icon = 'customnode.svg'
        this.category = 'Custom Nodes'
        this.description = 'This is my first custom node for Flowise'
        this.baseClasses = [this.type]

        // Define input parameters（定义输入参数）
        this.inputs = [
            {
                label: 'Input Text',
                name: 'inputText',
                type: 'string',
                placeholder: 'Enter some text here'
            }
        ]

        // Define output parameters（定义输出参数）
        this.outputs = [
            {
                label: 'Processed Text',
                name: 'processedText',
                type: 'string',
                description: 'The processed output text'
            }
        ]
    }

    // Main processing function（主处理函数）
    async run(nodeData) {
        const inputText = nodeData.inputs?.inputText

        // Simple processing example (reverse the text)
        const processedText = inputText.split('').reverse().join('')

        return {
            processedText: processedText || ''
        }
    }
}

module.exports = { nodeClass: MyCustomNode }

4.4 nodeData.json示例

代码片段

{
    "label": "My Custom Node",
    "name": "myCustomNode",
    "category": "Custom Nodes",
    "description": "This is my first custom node for Flowise",
    "inputs": [
        {
            "label": "Input Text",
            "name": "inputText",
            "type": "string"
        }
    ],
    "outputs": [
        {
            "label": "Processed Text",
            "name": "processedText", 
            "type": "string"
        }
    ]
}

第五步：集成自定义组件到Flowise

5.1 Link方式集成（开发时推荐）

在项目根目录下运行：

代码片段

npx flowise add /path/to/your/custom-components/MyCustomNode --link --devMode=true --watch=true --verbose=true --debug=true

参数解释：
– --link: Symbolic link方式集成，修改代码会自动更新无需重新加载
– --devMode:启用开发者模式
– --watch:监视文件变化自动重载
– --verbose:显示详细日志
– --debug:启用调试模式

5.2 Copy方式集成（生产环境推荐）

对于生产环境，建议使用copy方式：

代码片段

npx flowise add /path/to/your/custom-components/MyCustomNode --copy --verbose=true

第六步：构建和部署

当你的Flowise应用开发完成后，可以按照以下步骤部署：

6.1构建静态资源

代码片段

npx flow build

这将生成优化的静态文件放在dist目录中。

6.2 Docker部署

创建一个Dockerfile:

代码片段

FROM node:16-alpine 

WORKDIR /app 

COPY package*.json ./ 

RUN npm install 

COPY . . 

RUN npm run build 

EXPOSE $PORT 

CMD ["npm", "start"]

然后构建并运行容器:

代码片段

docker build -t my-flowise-app . 

docker run -p $PORT:$PORT -d my-flowise-app

常见问题解决

Q1: Flowize启动时报错”端口被占用”
A:
修改.env中的端口号或找出占用端口的进程并终止它:

代码片段

lsof -i :3000 # Mac/Linux查找占用端口的进程 kill <PID> netstat -ano | findstr :3000 # Windows taskkill /PID <PID> /F

Q2:自定义组件不显示在界面上
A:
检查以下几点:
1.node.js模块是否导出正确
2.package.json配置是否正确
3.Flowize是否成功加载了组件(查看日志)
4.Flowize是否以正确的模式(–devMode)启动

Q3:如何调试自定义组件的代码?
A:
可以在组件代码中使用console.log输出调试信息，
然后在终端查看Flowize的日志输出。
更专业的做法是使用Chrome DevTools附加到Node进程进行调试。

总结

本文介绍了如何在本地环境中使用JavaScript开发和部署Flowize应用的完整流程，
包括:
1.Flowize的基本安装和配置
2.PM2持久化运行的技巧
3.自定义组件的开发方法
4.Docker容器化部署方案

关键要点:
•始终在生产环境中使用.env管理敏感信息
•开发时使用–link和–watch提高效率
•PM2是管理Node应用的优秀工具

希望这篇指南能帮助你顺利开始使用Flowize构建AI工作流!