作者： 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 地址： http://github.com/CloudWise-OpenSource/FlyFish

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

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

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

微信搜尋xiaoyuerwise或掃描識別下方二維碼，備註【飛魚】加入AIOps社群飛魚開發者交流群，與 FlyFish 專案 PMC 面對面交流。