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

這里我們將搭建的開發環境的結構如下：

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

搭建后端環境

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

安裝項目環境

第一次運行，請先安裝項目環境

啟動docker服務

sudo service docker start

啟動kubernetes集群

sudo gulp local-up-cluster

默認情況下，這將啟動一個只能本地訪問的kubernetes集群，如果你想要能夠遠程訪問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連接

默認情況下，后端是只允許本地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).")

啟動后端服務

sudo "PATH=$PATH" gulp serve

注意運行后不要關閉掉終端。

搭建后端環境可能會遇到的問題

運行gulp 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.

解決辦法：

首先，要確定你已經安裝了go,運行:

go version

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

如果go確實已經安裝，則可以在運行命令時傳入PATH變量：

sudo "PATH=$PATH" <COMMAND>

搭建前端環境

接下來的步驟，將在windows上執行

安裝實用工具

1、安裝git

2、安裝curl

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

1、點開右鍵，如果有“git bash”和“git gui”兩個選項，git就安裝成功了

2、打開命令行，運行：

curl www.baidu.com

如果有返回就是成功了

安裝node

下載nodejs安裝包,并安裝

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

安裝windows nodejs 開發環境

npm install -g windows-build-tools

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

刪除package.json中的postinstall腳本

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

打開package.json，將：

"postinstall": "build/postinstall.sh"

刪去

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

安裝前端依賴

在項目路勁下，運行：

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>替換成你后端服務器的ip

刪除后端代碼監控腳本

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

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

這句刪掉

添加前端代碼監控腳本

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

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

運行起前端監控和開發服務器

gulp serve:forntend

搭建前端環境可能遇到的問題

npm 錯誤

（1）首先，必須以管理員身份運行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版本。

打開【控制面板】——【程序】——【啟用或關閉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) 如果將該組件安裝到了其他位置，請將其位置添加到系統路徑中。 [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

這是開發環境的一些依賴沒有安裝，在windows下開發nodejs應用，需要做一些特別的準備，可以參考windows 開發環境搭建指南,或者，直接以管理員身份運行：

npm install -g windows-build-tools

一般來說，這都是安裝node-sass時候出現的錯誤(node-gyp需要這些環境)，你也可以到node-gyp項目上查看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錯誤，是因為postinstall.sh不能再windows下執行的問題

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）運行帶:prod標簽的任務，如gulp serve:prod報：
“`
Error: Input is not proper UTF-8, indicate encoding !
Bytes: 0xBC 0xAF 0xC8 0xBA

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

fileExists(translationBundle)

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

便可以

（2）運行gulp任務，如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這個變量名中的\，這是因為dashboard項目本來是在linux下開發的，linux下使用/分割路勁，而windows下使用\，所以dashboard中將路徑轉成字符串的代碼基本上都會出錯。

要修復這個問題，打開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）運行gulp任務，如果報

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

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

（3）運行gulp任務，如果報

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>

報錯信息說是發現非法16進制數據，這個問題非常蹊蹺，也是windows平臺和linux平臺的路徑分隔符不一致所致，是上面的\userhelp.html造成的，因為\u在js中代表后面接著的是16進制數，打開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`;

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。