dashboard是kubernetes的云管平臺UI界面，正常情況下，其是在linux下開發(fā)的，但是，有些特殊情況下，我們也可能希望在windows上搭建起dashboard的開發(fā)環(huán)境

這里我們將搭建的開發(fā)環(huán)境的結(jié)構(gòu)如下：

windows上只運(yùn)行前端，將后端和kubernetes放在服務(wù)器上，目前發(fā)現(xiàn)這樣做的好處是，對windows的配置要求低，不用再在開發(fā)機(jī)上跑kubernetes和backend。壞處是不能在開發(fā)機(jī)上運(yùn)行帶 :prod的構(gòu)建腳本，也就是生產(chǎn)環(huán)境構(gòu)建腳本。總之，最好還是在linux上開發(fā)，特殊情況下，也可以遷移到windows下開發(fā)，遷移過程中，要對構(gòu)建腳本做一些修改。

搭建后端環(huán)境

首先登錄到你的ubuntu服務(wù)器，然后按照下面的教程在ubuntu上執(zhí)行命令

安裝項(xiàng)目環(huán)境

第一次運(yùn)行，請先安裝項(xiàng)目環(huán)境

啟動docker服務(wù)

sudo service docker start

啟動kubernetes集群

sudo gulp local-up-cluster

默認(rèn)情況下，這將啟動一個只能本地訪問的kubernetes集群，如果你想要能夠遠(yuǎn)程訪問Kubernetss API Server，你可以使用：

curl https://raw.githubusercontent.com/fest-research/iot-addon/master/assets/hyperkube/hyperkube.sh | sudo sh

代替sudo gulp local-up-cluster。

參考：the api server can’t access remotely

讓后端允許所有的HTTP連接

默認(rèn)情況下，后端是只允許本地http連接的，我們需要修改成允許所有的http連接

cd ~/dashboard vi src/app/backend/dashboard.go

把：

argInsecureBindAddress = pflag.IP("insecure-bind-address", net.IPv4(127, 0, 0, 1), "The IP address on which to serve the --port (set to 0.0.0.0 for all interfaces).")

改成：

argInsecureBindAddress = pflag.IP("insecure-bind-address", net.IPv4(0, 0, 0, 0), "The IP address on which to serve the --port (set to 0.0.0.0 for all interfaces).")

啟動后端服務(wù)

sudo "PATH=$PATH" gulp serve

注意運(yùn)行后不要關(guān)閉掉終端。

搭建后端環(huán)境可能會遇到的問題

運(yùn)行g(shù)ulp local-up-cluster一直waitting for a heapster...

解決辦法：

打開build/conf.js文件，將：

heapsterServerHost: gulpUtil.env.heapsterServerHost !== undefined ? gulpUtil.env.heapsterServerHost : '',

改成:

heapsterServerHost: gulpUtil.env.heapsterServerHost !== undefined ? gulpUtil.env.heapsterServerHost : '127.0.0.1:8082',

找不到go路徑

報錯信息如下：

Error: Go is not on the path. Please pass the PATH variable when you run the gulp task with "PATH=$PATH" or install go if you have not yet.

解決辦法：

首先，要確定你已經(jīng)安裝了go,運(yùn)行:

go version

如果有返回go的版本，則安裝成功了，否則，先安裝go.

如果go確實(shí)已經(jīng)安裝，則可以在運(yùn)行命令時傳入PATH變量：

sudo "PATH=$PATH" <COMMAND>

搭建前端環(huán)境

接下來的步驟，將在windows上執(zhí)行

安裝實(shí)用工具

1、安裝git

2、安裝curl

這兩個工具自行安裝，比較簡單。安裝完之后：

1、點(diǎn)開右鍵，如果有“git bash”和“git gui”兩個選項(xiàng)，git就安裝成功了

2、打開命令行，運(yùn)行：

curl www.baidu.com

如果有返回就是成功了

安裝node

下載nodejs安裝包,并安裝

提示：如果你需要在多個node版本之間切換，可以使用nvm windows工具,切換了node版本之后要運(yùn)行一次node rebuild

安裝windows nodejs 開發(fā)環(huán)境

npm install -g windows-build-tools

這是微軟提供的一鍵安裝windows開發(fā)環(huán)境的工具，請確保這行命令運(yùn)行成功，詳情參考Configuring your Windows development environment

刪除package.json中的postinstall腳本

postinstall.sh是npm install 的一個鉤子腳本，它在npm install命令運(yùn)行完之后執(zhí)行，進(jìn)行bower依賴的安裝和go路徑的設(shè)置，這里我們將手動執(zhí)行。

打開package.json，將：

"postinstall": "build/postinstall.sh"

刪去

注意：提交代碼的時候，不要將這個修改提交到代碼倉庫

安裝前端依賴

在項(xiàng)目路勁下，運(yùn)行：

npm install npm install -g bower bower install

修改browserSync代理配置

打開build/serve.js文件，把：

let proxyMiddlewareOptions =url.parse(`http://localhost:${conf.backend.devServerPort}${apiRoute}`);

改成：

let proxyMiddlewareOptions =url.parse(`http://<YOU BACKEND SERVER IP>:${conf.backend.devServerPort}${apiRoute}`);

記得把<YOU BACKEND SERVER IP>替換成你后端服務(wù)器的ip

刪除后端代碼監(jiān)控腳本

打開build/serve.js文件，把：

gulp.watch(path.join(conf.paths.backendSrc, '**/*.go'), ['spawn-backend']);

這句刪掉

添加前端代碼監(jiān)控腳本

打開build/serve.js文件，在末尾添加：

/*** 只編譯和監(jiān)控前端代碼*/ gulp.task('serve:frontend', ['watch'], serveDevelopmentMode);

運(yùn)行起前端監(jiān)控和開發(fā)服務(wù)器

gulp serve:forntend

搭建前端環(huán)境可能遇到的問題

npm 錯誤

（1）首先，必須以管理員身份運(yùn)行npm install
（2）如果報“MSBUILD : error MSB4132: 無法識別工具版本“2.0”。可用的工具版本為 “4.0” ”錯誤，如下：

MSBUILD : error MSB4132: 無法識別工具版本“2.0”。可用的工具版本為 "4.0"。 gyp ERR! build error gyp ERR! stack Error: `C:\Windows\Microsoft.NET\Framework\v4.0.30319\msbuild.exe` failed with exit code: 1 gyp ERR! stack at ChildProcess.onExit (C:\Program Files (x86)\nodejs\node_modules\npm\node_modules\node-gyp\lib\build.js:276:23) gyp ERR! stack at emitTwo (events.js:106:13) gyp ERR! stack at ChildProcess.emit (events.js:191:7) gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:215:12) gyp ERR! System Windows_NT 10.0.15063 gyp ERR! command "C:\\Program Files (x86)\\nodejs\\node.exe" "C:\\Program Files (x86)\\nodejs\\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" gyp ERR! cwd E:\work\dashboard\node_modules\libxmljs-mt gyp ERR! node -v v6.10.3 gyp ERR! node-gyp -v v3.4.0 gyp ERR! not ok

這有可能是.net版本太高造成的，需要降低.net版本。

打開【控制面板】——【程序】——【啟用或關(guān)閉windows功能】——勾選低版本的.net

(3) 如果報錯“MSBUILD : error MSB3428: 未能加載 Visual C++ 組件“VCBuild.exe”，如下：

MSBUILD : error MSB3428: 未能加載 Visual C++ 組件“VCBuild.exe”。要解決此問題，1) 安裝 .NET Framework 2.0 SDK；2) 安裝 Microsoft Visual Stu dio 2005；或 3) 如果將該組件安裝到了其他位置，請將其位置添加到系統(tǒng)路徑中。 [E:\work\dashboard\node_modules\libxmljs-mt\build\binding.sln] gyp ERR! build error gyp ERR! stack Error: `C:\Windows\Microsoft.NET\Framework\v4.0.30319\msbuild.exe` failed with exit code: 1 gyp ERR! stack at ChildProcess.onExit (C:\Program Files (x86)\nodejs\node_modules\npm\node_modules\node-gyp\lib\build.js:276:23) gyp ERR! stack at emitTwo (events.js:106:13) gyp ERR! stack at ChildProcess.emit (events.js:191:7) gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:215:12) gyp ERR! System Windows_NT 10.0.15063 gyp ERR! command "C:\\Program Files (x86)\\nodejs\\node.exe" "C:\\Program Files (x86)\\nodejs\\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" gyp ERR! cwd E:\work\dashboard\node_modules\libxmljs-mt gyp ERR! node -v v6.10.3 gyp ERR! node-gyp -v v3.4.0 gyp ERR! not ok

這是開發(fā)環(huán)境的一些依賴沒有安裝，在windows下開發(fā)nodejs應(yīng)用，需要做一些特別的準(zhǔn)備，可以參考windows 開發(fā)環(huán)境搭建指南,或者，直接以管理員身份運(yùn)行：

npm install -g windows-build-tools

一般來說，這都是安裝node-sass時候出現(xiàn)的錯誤(node-gyp需要這些環(huán)境)，你也可以到node-gyp項(xiàng)目上查看node-gyp安裝指南

（4）如果報“npm ERR! Windows_NT 10.0.14393 npm ERR! argv ”錯誤，如下：

npm ERR! Windows_NT 10.0.14393 npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\YK\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "update" "-g" "ionic" npm ERR! node v6.10.2 npm ERR! npm v3.10.10

這有可能是版本node版本的問題，可以安裝nvm-windows來切換node版本。

注意：nvm-windows安裝路徑不能有空格

（5）如果報Failed at the kubernetes-dashboard@1.6.1 postinstall script 'build/postinstall.sh錯誤，是因?yàn)閜ostinstall.sh不能再windows下執(zhí)行的問題

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.1: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) npm WARN babel-loader@7.0.0 requires a peer of webpack@2 but none was installed. npm WARN browserify-shim@2.0.10 requires a peer of browserify@>= 2.3.0 < 4 but none was installed. npm ERR! Windows_NT 10.0.15063 npm ERR! argv "C:\\nodejs\\node.exe" "C:\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install" npm ERR! node v6.10.3 npm ERR! npm v3.10.10 npm ERR! code ELIFECYCLE npm ERR! kubernetes-dashboard@1.6.1 postinstall: `build/postinstall.sh` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the kubernetes-dashboard@1.6.1 postinstall script 'build/postinstall.sh'. npm ERR! Make sure you have the latest version of node.js and npm installed. npm ERR! If you do, this is most likely a problem with the kubernetes-dashboard package, npm ERR! not with npm itself. npm ERR! Tell the author that this fails on your system: npm ERR! build/postinstall.sh npm ERR! You can get information on how to open an issue for this project with: npm ERR! npm bugs kubernetes-dashboard npm ERR! Or if that isn't available, you can get their info via: npm ERR! npm owner ls kubernetes-dashboard npm ERR! There is likely additional logging output above.npm ERR! Please include the following file with any support request: npm ERR! E:\work\dashboard\npm-debug.log

刪除package.json的postinstall屬性

gulp錯誤

（1）運(yùn)行帶:prod標(biāo)簽的任務(wù)，如gulp serve:prod報：
“`
Error: Input is not proper UTF-8, indicate encoding !
Bytes: 0xBC 0xAF 0xC8 0xBA

最新版本已經(jīng)解決這這個問題，如果你用的是較舊版本（2017.7之前）,你可以打開`build/i18n.js`，將：

fileExists(translationBundle)

改成： ```text fileExists.sync(translationBundle)<div class="se-preview-section-delimiter"></div>

便可以

（2）運(yùn)行g(shù)ulp任務(wù)，如gulp scripts:prod時報

Exception in thread "main" java.lang.RuntimeException: JSCompiler errors E:/work/dashboard/.tmp/messages_for_extraction/about/about.html.js:2: ERROR - Parse error. Invalid escape sequence var MSG_ABOUT\ABOUT_0 = goog.getMsg('General-Purpose Web UI for Kubernetes Clusters');<div class="se-preview-section-delimiter"></div>

報錯信息是說有非法分隔符，指的就是var MSG_ABOUT\ABOUT_0這個變量名中的\，這是因?yàn)閐ashboard項(xiàng)目本來是在linux下開發(fā)的，linux下使用/分割路勁，而windows下使用\，所以dashboard中將路徑轉(zhuǎn)成字符串的代碼基本上都會出錯。

要修復(fù)這個問題，打開build/i18n.js文件，將:

let messageVarPrefix = filePath.toUpperCase().split('/').join('_').replace('.HTML', '');<div class="se-preview-section-delimiter"></div>

修改成：

let messageVarPrefix = filePath.toUpperCase().replace(/\\/g,"\/").split('/').join('_').replace('.HTML', '');<div class="se-preview-section-delimiter"></div>

（3）運(yùn)行g(shù)ulp任務(wù)，如果報

Error: Input is not proper UTF-8, indicate encoding ! Bytes: 0xE6 0x88 0x3F 0x3C <div class="se-preview-section-delimiter"></div>

報錯信息說是發(fā)現(xiàn)非法UTF-8字符，這個可能是dashboard開發(fā)者保存文件時沒有使用UTF-8格式，解決辦法就是恢復(fù)出錯文件到以前版本.或者復(fù)制文件內(nèi)容出來，刪除非法格式文件，再把內(nèi)容復(fù)制進(jìn)新文件。

（3）運(yùn)行g(shù)ulp任務(wù)，如果報

gulp-google-closure-compiler: deploy/helpsection/userhelp.html.js:5: ERROR - Parse error. Hex digit expected$templateCache.put('deploy\helpsection\userhelp.html', ' <div ng-transclude class="kd-user-help" layout-align="start center"> </div> ');<div class="se-preview-section-delimiter"></div>

報錯信息說是發(fā)現(xiàn)非法16進(jìn)制數(shù)據(jù)，這個問題非常蹊蹺，也是windows平臺和linux平臺的路徑分隔符不一致所致，是上面的\userhelp.html造成的，因?yàn)閈u在js中代表后面接著的是16進(jìn)制數(shù)，打開build/i18n.js,將：

file.moduleContent = `` +`import module from 'index_module';\n\n${file.messages}\n` +`module.run(['$templateCache', ($templateCache) => {\n` +` $templateCache.put('${filePath}', '${content}');\n` +`}]);\n`;<div class="se-preview-section-delimiter"></div>

替換成：

file.moduleContent = `` +`import module from 'index_module';\n\n${file.messages}\n` +`module.run(['$templateCache', ($templateCache) => {\n` +` $templateCache.put('${filePath.replace(/\\/g,"\\\\")}', '${content}');\n` +`}]);\n`;

總結(jié)

以上是生活随笔為你收集整理的dashboard windows 前端开发环境搭建的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。