看一个网站的浏览量,南京的电商网站设计,深圳东莞的网站建设公司,南通网站制作建设dashboard是kubernetes的云管平台UI界面#xff0c;正常情况下#xff0c;其是在linux下开发的#xff0c;但是#xff0c;有些特殊情况下#xff0c;我们也可能希望在windows上搭建起dashboard的开发环境
这里我们将搭建的开发环境的结构如下#xff1a; windows上只运…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 SDK2) 安装 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-dashboard1.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 fsevents1.1.1: wanted {os:darwin,arch:any} (current: {os:win32,arch:x64})
npm WARN babel-loader7.0.0 requires a peer of webpack2 but none was installed.
npm WARN browserify-shim2.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-dashboard1.6.1 postinstall: build/postinstall.sh
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the kubernetes-dashboard1.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 isnt 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 classse-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 classse-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 classse-preview-section-delimiter/div修改成
let messageVarPrefix filePath.toUpperCase().replace(/\\/g,\/).split(/).join(_).replace(.HTML, );div classse-preview-section-delimiter/div3运行gulp任务如果报
Error: Input is not proper UTF-8, indicate encoding !
Bytes: 0xE6 0x88 0x3F 0x3C
div classse-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 classkd-user-help layout-alignstart center /div );div classse-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 classse-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;
