dashboard windows 前端开发环境搭建
dashboard是kubernetes的云管平臺UI界面，正常情況下，其是在linux下開發的，但是，有些特殊情況下，我們也可能希望在windows上搭建起dashboard的開發環境
這里我們將搭建的開發環境的結構如下：
windows上只運行前端，將后端和kubernetes放在服務器上，目前發現這樣做的好處是，對windows的配置要求低，不用再在開發機上跑kubernetes和backend。壞處是不能在開發機上運行帶 :prod的構建腳本，也就是生產環境構建腳本?？傊?#xff0c;最好還是在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” ”錯誤，如下：
這有可能是.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
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 前端开发环境搭建的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： sql盲注 解决_SQL盲注攻击的简单介
- 下一篇： 最新更新-最全泰尔指数合集：分省、地级市