作者： 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 stopnpm 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 allnpm uninstall -g pm2rm -rf .pm2npm 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-OpenSource/FlyFish

Gitee 地址：https://gitee.com/CloudWise/fly-fish

FlyFish 贡献指南：http://bbs.aiops.cloudwise.com/d/717-flyfish

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