作者：yy小姐，曾就职于凤凰网、京东科技等大公司。擅长Node.js、Web前端开发、后端开发、运维、测试等技术领域，具有丰富而广泛的开发经验。我第一次见到飞鱼。由于我现在公司团队业务的不断发展，需要开发一个低代码的平台，可以通过拖拽等简单的配置方式生成页面、应用甚至系统。但是，由于公司现有业务非常繁忙，团队开发人员根本抽不出更多的时间去接新的需求。因此，寻找合适的开源低代码平台成为我们新的探索方向。一次偶然的机会，和朋友聊起了低代码技术的发展现状，以及我们公司对低代码平台的需求。朋友兴致勃勃地和我聊起了低代码，说现在低代码技术已经发展的相当成熟了，很多开源项目都能满足我们公司的需求，比如“FlyFish”。第一次了解飞鱼，经过朋友的介绍，发现飞鱼非常适合我们公司目前的需求。第一次使用FlyFish时，首先详细了解并查阅了Flyfish的技术文档和部署教程。Feiyu的部署文档非常详细，尤其是一键部署脚本，对新手非常友好，可以快速轻松的完成部署。但是，由于我们公司只有内网，没有外网，一键部署功能的Feiyu是没有办法只在有上网权限且服务器比较干净的系统上进行部署的，所以最终还是选择了手动安装部署。在手动部署操作的过程中，仅仅一个下午的时间，我们公司的运维同事就通过飞宇提供的部署文档和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路径。npmrunstopnpmrundevelopment经过以上操作，终于完成了第一个数据可视化大屏的制作。从飞鱼平台的部署，到一个完整的数据可视化大屏的诞生，在不断发现和解决问题的过程中，真切感受到开源不是一个人在战斗。踩坑经验虽然我已经轻松完成了使用飞鱼的第一步——安装部署操作，但是在实际使用过程中，还是有一些大大小小的坑经验值得分享。体验一：Feiyu平台部署成功后，没有可用的组件。对于低代码平台，组件非常重要。没有组件，意味着业务需求无法通过拖拽实现，无法达到降本增效的目的。基于这个问题，赶紧在飞宇开发者交流群里咨询了官方的开发者，才知道组件需要一一导入才能使用。在此基础上，由于FlyFish2.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，具体操作步骤如下：替换文件压缩组件的安装依赖于编译组件（Ctrl+S）更新，网上的方法已经掌握，但是常用的30多个组件一个一个下载，完成文件替换，Zip压缩等操作，工作量还是很大的。这时候我终于意识到shell脚本能力的重要性，几行脚本就能完成需要CV（Copy、Paste）半天的工作。Zip压缩过程中还有一个小插曲。需要注意的是，Windows下没有Zip包，需要MacZip或者LinuxZip。体验二：登录飞鱼平台后，组件开发页面显示502/404，如下图。Feiyu部署完成后，进入组件开发页面，显示502和404。这时候，我立马咨询了我们飞鱼项目的官方开发者。得到提示后，查看server执行pm2ls时code-server服务没有启动。然后，我又按照code-server的启动步骤，输入npmrunlinux-start，最后回车，pm2ls就看到了下面的网上图片。但是刷新页面后，仍然显示502。飞宇官方开发者让我再次执行pm2ls。然后发现服务有问题，这么短的时间内，服务已经重启了167次。如下所示。这时飞鱼官方开发者初步判断是pm2版本有问题或者安装过程中出现问题，让我执行如下命令重新安装pm2并启动code-server。cd~pm2stopallnpmuninstall-gpm2rm-rf.pm2npminstall-gpm2在lcapCodeServer中执行npmrunlinux-start但是上面的操作完成后，code-server启动后还是重启。重启的原因很有可能是环境中有pm2的残留文件，npm卸载不干净。这时飞鱼官方开发者建议我使用sudonpminstallpm2--unsafe-perm--verbose-g来卸载。执行完上面的卸载命令后，我重新安装了pm2，并启动了code-server。至此，服务终于正常了。但是，当我打开组件开发页面刷新时，502没有了，但是404还在，如下图：经过飞宇开发者官方查看环境配置，终于发现环境路径配置异常，如下图如下图所示。这时候只需要将下图中红框内的路径替换为对应服务器的真实路径即可。体验三：前端访问地址更新为域名访问如果域名地址为：pandora.com.cn更改nginx配置#域名为pandora.com.cn#打开文件/etc/nginx/conf.d/flyfish.conf#下面三行修改配置为如下内容listen80;server_namepandora.com.cn;proxy_cookie_domain0.0.0.0pandora.com.cn;changeenv-config#Openfile/data/app/pandora2/lcapWeb/lcapWeb/conf/env-config.js#修改hostnamefontport，修改内容如下consthostname='pandora.com.cn';constfontPort="80";restartngixnginx-sreload总结在整体的部署和使用过程中，飞鱼官方开发者真正做到了快速定位问题，光速解决问题。虽然我只用的是飞鱼开源版，但飞鱼官方开发者的响应速度让我什至觉得自己已经付出了代价。最后，感谢您的阅读。希望以上的经验可以帮助解决你急需解决的问题或者给你一点技术上的启发。这对我来说将是莫大的荣幸。开源福利如果您喜欢我们的项目，请不要忘记点击下方代码仓库地址，在GitHub/Gitee仓库点个Star。我们需要您的鼓励和支持。另外，马上参与FlyFish项目，成为FlyFishContributor，同时还有更多现金等着你。github地址：https://github.com/CloudWise-...Gitee地址：https://gitee.com/CloudWise/f...FlyFish投稿指南：http://bbs.aiops.cloudwise.co...飞鱼模板中心：https://www.cloudwise.ai/flyF...微信搜索xiaoyuerwise或扫描下方二维码，关注【飞鱼】加入AIOps社区飞鱼开发者交流群，交流面对面-与FlyFish项目PMC面对面交流。
