本文是使用者Mark Wu近期在學習使用FlyFish原始碼的學習筆記，雲智慧AIOps社群徵得原作者同意後授權釋出，本文使用的是FlyFish版本2.0，目前最新版本已更新到2.1

FlyFish程式碼結構

以下是程式碼的基本結構，使用的是基於MVC的thinkJS框架，但是通篇看下來，你是不是注意到，只看到了M(Model)和C(Controller)，唯獨缺少View，所以View在哪？所以就帶著這個問題繼續學習下去。

thinkJS框架

view是如何生成的

adapter.js裡面配置view模板的目錄為view裡面的html模板，模板引擎為nunjucks，配合extend裡面引入的think-view使用。

/**
view adapter config
@type {Object}
*/
exports.view = {
type: 'nunjucks', // 這裡指定預設的模板引擎是 nunjucks
common: {
viewPath: path.join(think.ROOT_PATH, 'view'),//模板檔案的根目錄
sep: '_',//Controller 與 Action 之間的連線符
extname: '.html'
},
nunjucks: {
handle: nunjucks
}
};

 

可以看到模板裡面有兩個 prefix、title變數，會引入載入頁面所需靜態資源。extend裡面引入了think-view，通過 view 擴充套件，框架就支援渲染模板的功能，Controller 類上就有了 assign、display 等方法，引入model(think.app) 支援模型功能，會新增方法 think.Model、think.model、ctx.model、controller.model、service.model。

 

// extend.js
const view = require('think-view');
const model = require('think-model');
const session = require('think-session');
const cache = require('think-cache');

module.exports = [
session,
cache,
view, // make application support view
model(think.app),
];

 

router裡面配置路由規則，以/pw/開頭的get請求會指向web模組的view控制器下index的一個叫platform的action；

// router.js
module.exports = [
// 代理平臺的靜態頁面
[/^\/pw\/(.*)/i, '/web/view/index/platform', 'get'],
[/^\/proxyDataHub\/(.*)/i, 'web/proxy', 'rest'],
];

// web/controller/view/index.js
module.exports = class extends think.Controller {
platformAction() {
this.assign('prefix', this.config('platformPrefix', undefined, 'web').replace(/\/$/, ''));
this.assign('title', this.config('indexTitle', undefined, 'web').replace(/\/$/, ''));
return this.display();
}
};

platformAction會根據配置以及模組改變prefix、title變數的值，這樣view模板就能正確載入靜態資源。同時middleware也配置預設模組為web，預設控制器action為platformAction

...
//路由操作
{
handle: 'router',
enable: true, //是否開啟該中介軟體
options: {
defaultModule:'web', // 預設模組
defaultController: 'view/index', // 預設控制器
defaultAction: 'platform', // 預設action
}
},
...

 

資料流

API請求資料流如下圖所示

服務端建議：可以適當增加Workers數量，以增加服務端穩定性，一個Worker出現問題後，Master會停止它，然後fork一個新的Worker出來。

部署問題

在使用飛魚2.0的過程中，遇到了很多部署方面的問題，這裡我挑幾個典型的記錄一下

 

Q：伺服器上部署docker容器，本地訪問飛魚平臺，發現登入地址請求是127.0.0.1的地址；

A：按照部署流程仔細檢查了一下，發現配置檔案www/static/solution_platform_web/config/ENV.production.js沒有正確配置。

 

Q：docker容器部署起來，做新增大屏操作的時候報錯ER_NO_SUCH_TABLE: Table 'flyfish.visual_screen_tag_view' doesn't exist, SQL: SHOW COLUMNS FROM visual_screen_tag_view；

A：檢查發現數據庫沒有啟動。

 

Q：code-server 下面 ，grpc安裝失敗，一起沒有成功；

A：切換成cnpm源後成功，其實也可以試試使用yarn進行安裝；

 

寫在最後

FlyFish釋出2.1版本後，已經支援安裝包一件部署方式，極大縮減了部署流程，具體如下所示

# CentOS 7.5/7.6 x86-64
# 須使用root賬戶
mkdir -p /data/app/
cd /data/app/

git clone -b main http://github.com/CloudWise-OpenSource/FlyFish.git FlyFish
or
git clone -b main http://gitee.com/CloudWise/fly-fish.git FlyFish

cd /data/app/FlyFish
bash flyfish.sh install

# 一鍵解除安裝
bash flyfish.sh uninstall

# 一鍵更新
# FlyFish-2.1.1 升級至 FlyFish-2.1.2
git checkout main
git pull origin main

bash flyfish.sh update

作者簡介

Mark Wu（ 吳銀波 ）雲智慧前端工程師，精通javascript、css、React、Vue、Webpack、ThreeJS等前端技術棧，致力於雲智慧大屏產品及飛魚開源社群服務，擁有豐富的前端效能優化和開源專案經驗。

關於FlyFish