FlyFish 開發者説|開源低代碼平台的體驗與思考

語言: CN / TW / HK

作者: 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;
  1. 更改env-config
#打開文件 /data/app/pandora2/lcapWeb/lcapWeb/conf/env-config.js
#修改hostname fontport,修改後內容如下
const hostname = 'pandora.com.cn';
const fontPort = "80";
  1. 重啟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

微信搜索xiaoyuerwise或掃描識別下方二維碼,備註【飛魚】加入AIOps社區飛魚開發者交流羣,與 FlyFish 項目 PMC 面對面交流。