FlyFish开发者说｜开源低代码平台的体验与思考

作者： Miss yy，曾就职于凤凰网、京东科技等大厂。擅长 Node.js、Web前端开发、后端开发、运维、测试等技术领域，有丰富且广泛的开发经验。

初识FlyFish

由于我当前所在公司团队业务不断发展，因此需要开发出一个通过拖拉拽这种简单的配置方式就能生成页面、应用，甚至系统的低代码平台。然而，由于公司已有业务非常繁忙，团队开发人员根本无法抽出更多的时间来接手新的需求，因此，寻找一个合适的开源低代码平台便成为了我们新的探索方向。

一个偶然的机会，我与身边的朋友聊起了当前低代码技术的发展情况以及我们公司对低代码平台需求情况。朋友兴致勃勃与我讲了低代码相关的一些情况，并表示现在低代码技术已经发展的相当成熟了，很多开源项目就可以满足我们公司的需求，比如“飞鱼（FlyFish）”。当时是我第一次了解到飞鱼，但是经过朋友的介绍，我发现飞鱼与我们公司当前的需求非常契合。

使用FlyFish

第一次使用飞鱼时，我先是详细了解并查看了飞鱼的技术文档与部署教程。飞鱼的部署文档说明非常详细，尤其是一键部署脚本，对新手非常友好，轻轻松松就可以快速完成部署。然而，由于我们公司只有内网没有互联网，所以没有办法通过仅限于有互联网访问权限，且服务器比较干净的系统才可以使用一键部署功能的来部署飞鱼，所以我最后选择了手动安装部署。在手动部署操作过程中，我们公司的运维同事通过飞鱼提供的部署文档以及NPM相资源，仅仅用了一下午时间，就被告知8089已经可以访问了，这对于我们来说真的很惊喜。

本地部署成功后，我便开始了大屏制作。然而，在大屏完成后的初步导出应用时我发现背景图片竟然没有生效。此时我在飞鱼开发者群内进行了咨询，官方开发者给出了我以下两种解决方案：

方案一：手动删除导出的zip包中背景图片错误路径。

修改导出的下方飞鱼大屏源码配置，删除backgroundImage以及image中多出的www路径即可。

config/env.conf.json

方案二：在 飞鱼 lcapServer 目录内执行以下命令

vim ./config/config.development.js（大约在84行）

并将：

applicationPath: commonDirPath ? `${commonDirPath}/applications` : 'applications',

修改为：

applicationPath: 'applications',

随后，重启lcapServer，在 lcapServer目录内执行以下命令。之后新建的大屏再导出后就不需要手动去掉导出包中的www路径了。

npm run stop
npm run development

经过以上的操作，我终于完成了第一张数据可视化大屏的制作。从飞鱼平台的部署到一张完整数据可视化大屏的诞生，在不断发现问题与解决问题的过程中，我真切地感受到了开源不只是一个人在战斗。

踩坑经验

尽管我轻轻松松地就完成了使用飞鱼的第一步——安装部署操作，但在实际使用过程，还是会有一些大大小小的踩坑经验值得分享。

经验1：飞鱼平台部署成功后，无可用组件

对于一个低代码平台来说，组件是非常重要的。没有组件就意味着无法通过拖拉拽来实现业务需求，也就无法达到降本增效的目的了。

基于这个问题，我快速咨询了飞鱼开发者交流群中的官方开发人员，才知道组件是需要单独依次导入才可以使用的。在此基础上，由于飞鱼（FlyFish）2.2.0版本不兼容FlyFishComponents中的组件，故需要手动修改 FlyFishComponents 中组件的资源路径和组件 ID 为对应的占位符。包含 editor.html、env.js、index.html、options.json、src/main.js、src/setting.js 相关文件修改。

以上文件修改完成后需要将 FlyFishComponents 组件中以上6个文件使用的 ffComp_2.2.0.zip 对应文件全部替换，再导入到 FlyFish2.2.0 平台便可正常使用。替换文件 ffComp_2.2.0.zip，具体操作步骤如下：

1. 替换文件
2. 压缩组件
3. 安装依赖
4. 编译组件（Ctrl+S）
5. 更新上线

方法已掌握，不过30多个常用组件挨个下载、完成文件替换、Zip压缩等操作，工程量还是很大的。此时，我也终于意识到了shell脚本能力的重要性，几行脚本就可以把需要CV(Copy、Paste)半天的工作干完。在 Zip 压缩过程中也有个小插曲，需要注意，Windows下Zip包是不可用的，需要Mac Zip 或者Linux Zip才可以。

经验2：登录飞鱼平台后，进入组件开发页面显示502/404

如下图所示，我在飞鱼部署完成后，进入组件开发页面时，竟然显示502和404了。

这时候，我又马上请教了我们飞鱼项目的官方开发者。经提示，我在服务器执行pm2 ls 时查看了一下 code-server 服务没有启动。随后，我按照 code-server 的启动步骤重新来了一遍，敲完 npm run linux-start，最后按下回车，pm2 ls 看到了下图的 online。

然而，页面刷新后，还是显示502。飞鱼官方开发者让我重新执行了 pm2 ls。然后我发现服务是有问题的，就在这么短的时间内，服务已经重启了167次。如下图所示。

这时，飞鱼官方开发者初步定位是pm2版本有问题或者安装过程中出了问题，让我执行了以下命令重新安装pm2并启动code-server。

cd~
pm2 stop all
npm uninstall -g pm2
rm -rf .pm2
npm install -g pm2
在lcapCodeServer中执行
npm run linux-start

然而，上述操作完成后，code-server启动后还是一直在重启。重启的原因大概率是环境里有pm2的残留文件，以及npm卸载不干净。这时，飞鱼官方开发人员建议我使用sudo npm install pm2 --unsafe-perm --verbose -g进行卸载。以上卸载命令执行后，我重新安装了pm2，启动了code-server，至此，服务终于正常了。然而，当我打开组件开发页面刷新时，502是没有了，但404还在，如下图所示：

在飞鱼官方开发者各种检查环境配置后，终于发现了一个环境路径配置异常，如下图所示。这时仅需将下图红框中的路径替换成对应的服务器真实路径即可。

经验3：前端访问地址更新为域名访问

假如域名地址为：pandora.com.cn

1. 更改 nginx 配置

# 域名为pandora.com.cn
#打开文件/etc/nginx/conf.d/flyfish.conf
#以下三行配置修改成如下内容
listen 80;
server_name pandora.com.cn;
proxy_cookie_domain 0.0.0.0 pandora.com.cn;

2. 更改env-config

#打开文件 /data/app/pandora2/lcapWeb/lcapWeb/conf/env-config.js
#修改hostname fontport,修改后内容如下
const hostname = 'pandora.com.cn';
const fontPort = "80";

3. 重启ngix

nginx -s reload

总结

在整体的部署使用过程中，飞鱼官方开发者真正的做到了快速定位问题、光速解决问题。虽然我仅仅使用的是飞鱼开源版，但是飞鱼官方开发者的响应速度让我甚至觉得自己已经付过费了。

最后，感谢各位的阅读，希望上述的这些经验能有助于解决你们的燃眉问题或者给你们技术方面一点点启发，那将是我莫大的荣幸。

开源福利

如果喜欢我们的项目，请不要忘记点击下方代码仓库地址，在 GitHub / Gitee 仓库上点个 Star，我们需要您的鼓励与支持。此外，即刻参与 FlyFish 项目贡献成为 FlyFish Contributor 的同时更有万元现金等你来拿。

GitHub 地址： https://github.com/CloudWise-...

Gitee 地址：https://gitee.com/CloudWise/f...

FlyFish贡献指南：http://bbs.aiops.cloudwise.co...

FlyFish 模版中心： https://www.cloudwise.ai/flyF...

微信搜索xiaoyuerwise或扫描识别下方二维码，备注【飞鱼】加入AIOps社区飞鱼开发者交流群，与 FlyFish 项目 PMC 面对面交流。