dubbo教程-06-dubbo-admin 控制台的搭建过程

写在前面

hello 大家好欢迎大家
来到御风大世界
本次课是我们dubbo系列课程的第6课
在这次课我们将为大家演示
如何编译自己的 dubbo-admin
并且部署运行这个dubbo-admin

dubbo-admin 是用来干嘛的?

dubbo-admin 是dubbo的控制台web程序
可以利用浏览器来进行 dubbo的一些性能监控
服务治理降级分组
还有就是一些参数的设置
整个服务平台的管理功能
他是一个 dubbo 中的子项目
打包以后是一个 war 包
可以部署到 tomcat等容器
大概长这个样子

imagepng

我本来想去 github 下载这个源码的
不过遗憾的时候没有找到 dubbo admin
于是我看了下issue
是不是别人也有这样的问题

imagepng

结果是这样的
现在的这个东西叫做 incubator-dubbo-ops

他是一个由Apache 维护的新的dubbo的管理软件
我们看下他的具体介绍

Dubbo控制台

前端部分

使用Vue.js作为javascript框架，Vuetify作为UI框架
dubbo-admin-frontend/README.md中有更详细的介绍

后端部分

标准spring boot工程

生产环境配置

下载代码: git clone https://github.com/apache/incubator-dubbo-ops.git
在 dubbo-admin-backend/src/resources/application-production.properties中指定注册中心地址
构建
- mvn clean package
启动 mvn --projects dubbo-admin-backend spring-boot:run
访问 http://localhost:8080

开发环境配置

运行dubbo admin backend
dubbo admin backend是一个标准的spring boot项目, 可以在任何java IDE中运行它
运行dubbo admin frontend
dubbo admin frontend由npm管理和构建，在开发环境中，可以单独运行: npm run dev
页面访问
访问 http://localhost:8081, 由于前后端分开部署，前端支持热加载，任何页面的修改都可以实时反馈，不需要重启应用。
跨域问题
为了方便开发，我们提供了这种前后端分离的部署模式，主要的好处是支持前端热部署，在这种模式下，前端会通过8080端口访问后端的restful api接口，获取数据, 这将导致跨域访问的问题。因此我们在dubbo-admin-frontend/config/index.js添加了支持跨域访问的配置,当前端通过npm run dev单独启动时，这些配置将被激活，允许跨域访问

本地测试

首先我们下载他的源码

git clone https://github.com/apache/incubator-dubbo-ops.git

imagepng

接着我们用IDEA来打开他

imagepng

我们发现他是一个前后端分离的应用哦
这一点真的很牛逼
越来越跟上潮流了

我们首先让程序运行起来
- 在 dubbo-admin-backend/src/resources/application-production.properties中指定注册中心地址

可能你会遇到下面的错误是因为我们的 maven版本不行
我们升级下maven版本

[ERROR] Failed to execute goal com.github.eirslett:frontend-maven-plugin:1.6:install-node-and-npm (install node and npm) on project dubbo-admin-frontend: The plugin com.github.eirslett:frontend-maven-plugin:1.6 requires Maven version 3.1.0 -> [Help 1]
[ERROR] 
[ERROR] To see the full stack trace of the errors, re-run Maven with the -e switch.
[ERROR] Re-run Maven using the -X switch to enable full debug logging.
[ERROR] 
[ERROR] For more information about the errors and possible solutions, please read the following articles:
[ERROR] [Help 1] http://cwiki.apache.org/confluence/display/MAVEN/PluginIncompatibleException
[ERROR] 
[ERROR] After correcting the problems, you can resume the build with the command
[ERROR]   mvn <goals> -rf :dubbo-admin-frontend

我们升级到最新的 maven

imagepng

你会在运行命令
mvn clean package 的过程中看到这样一句话
我们正在下载和生成 node 环境

[INFO] Installing node version v9.11.1
[INFO] Downloading https://nodejs.org/dist/v9.11.1/node-v9.11.1-win-x64.zip to D:\luckincoffee\env\apache-maven-3.6.0\resp\com\github\eirslett\node\9.11.1\node-9.11.1-win-x64.zip
[INFO] No proxies configured
[INFO] No proxy was configured, downloading directly
[INFO] Unpacking D:\luckincoffee\env\apache-maven-3.6.0\resp\com\github\eirslett\node\9.11.1\node-9.11.1-win-x64.zip into D:\githubTest\incubator-dubbo-ops\dubbo-admin-frontend\node\tmp
[INFO] Copying node binary from D:\githubTest\incubator-dubbo-ops\dubbo-admin-frontend\node\tmp\node-v9.11.1-win-x64\node.exe to D:\githubTest\incubator-dubbo-ops\dubbo-admin-frontend\node\node.exe

中途可能会出现一些异常情况
尝试关闭你的占用文件夹或者 git 客户端 (这个自己根据自己情况来)

然后你再次运行 mvn clean package
就会构建成功的

[INFO] ------------------------------------------------------------------------
[INFO] Reactor Summary for dubbo-admin 0.0.1-SNAPSHOT:
[INFO] 
[INFO] dubbo-admin ........................................ SUCCESS [  0.935 s]
[INFO] dubbo-admin-frontend ............................... SUCCESS [03:12 min]
[INFO] dubbo-admin-backend ................................ SUCCESS [01:10 min]
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------
[INFO] Total time:  04:23 min
[INFO] Finished at: 2018-11-28T15:35:47+08:00
[INFO] ------------------------------------------------------------------------
[WARNING] The requested profile "nexus" could not be activated because it does not exist.

因为我们的这个管理程序是前后端分离的
前端需要运行在 node 环境之上

maven 在构建的时候会同时执行 node 相关命令的
并且第一次构建完毕之后
node 进行就会运行起来的
所以这个时候我们需要运行我们的后端程序

找到这个类
imagepng

直接点击运行就好了

如果你出现编译错误的话可能需要调节目标 jdk版本
我是IDEA 我是这样调节的

imagepng

我视频里面也有讲解可以看下

然后我们的程序会启动打开浏览器
imagepng

接下来我们启动我们之前的 provider consumer
注意因为我们之前的 tomcat 也是 8080 所以我们需要修改端口然后再启动
启动以后我们就可以在 dubbo-admin 查看和管理我们的服务了

我们这里输入 * 点击搜索
imagepng

我尝试了
除了这个功能可以用之外其他的都还是在开发阶段
好吧我们只能期待了
此时我只想说
看看人家springcloud

还是用老版本的吧

我们来到这个地址
https://github.com/apache/incubator-dubbo/releases
下载老版本的 dubbo 发行版本

imagepng

然后我们解压他找到 dubbo-admin

imagepng

同样的我们把他加载到 IDEA

然后用maven工具构建他
我实话说一句这个过程真的有点长
你可以去我的公众号下载我已经编译好的 dubbo-admin.war
关注公号 , 回复文字 dubbo 就可以下载了

找到我们的配置文件
它默认的配置是这样的
imagepng

我们启动项目
看到了熟悉的控制台关键还是中文的

imagepng

接下来就可以开始愉快的玩耍了

imagepng

后记

我们对比了新的控制台和老的控制台
新的控制台好像更加牛逼了
最起码界面做起来很吊的样子
我们对他充满期待
老的控制台如果是用到生产环境中的话
我们可以在网上找到的资源也会相应的多一些
这一点我觉得很不错的
如果大家对于这篇文章有什么不理解的地方可以留言告诉我
也可以看我的视频
视频教程:https://www.bilibili.com/video/av36799192/
课程源码:https://github.com/ibywind/dubbo-learn
关注公众号查看更多技术干货
还可加群 , 众多好基友在等你