搭建最新版前后端分离的dubbo-admin

1 问题背景

上上星期笔者的架构师找笔者说整合dubbo-admin的过程中虽然成功了，但是服务治理功能并没有正常。使用dubbo-metrics上报数据，但是dubbo-admin只有第一次调用的数据统计，之后的服务调用都没有正常统计出来。笔者对dubbo停留在使用方面，并且第一次听到dubbo-admin、dubbo-metrics。今天先来搭集一下dubbo-admin看看怎么玩。

2 资源版本

后端技术栈：注册中心采用Nacos，jdk为1.8，maven为3.6.3，MySQL8.0
前端技术栈：npm、node均为最新版本。npm7.20.3，node14.17.4，yarn1.22.11

3 搭建过程中的核心难点

期间最为麻烦的前端项目的构建，笔者采用yarn代替npm构建打包前端项目。yarn会顺利好多。

4 搭建后端

4.1 搭集Nacos注册中心

笔者以develop分支搭建。使用nacos作为注册中心，笔者采用源码方式启动nacos，详情可见idea配置dashboard并源码启动集群运行nacos或源码启动单机运行nacos。其他方式搭建nacos可参考百度教程。

4.2 启动项目

以启动普通SpringBoot的方式启动dubbo-admin-server项目即可。如果需要修改端口号，则在application.properties文件配置端口号server.prot=xxxx，默认是tomcat的8080端口号

5 搭建前端

5.1 修改前端端口号

可以在dubbo-admin-ui项目中的vue.config.js中修改端口号，下面代码块中的 devServer.port是前端项目的端口号，devServer.proxy.target是后端项目的ip地址加后端的端口号。 如下：

devServer: {
    port: 8082,
    historyApiFallback: {
      rewrites: [
        {from: /.*/, to: path.posix.join('/', 'index.html')},
      ],
    },
    publicPath: '/',
    proxy: {
      '/': {
        target: 'http://localhost:8080/',
        changeOrigin: true,
        pathRewrite: {
          '^/': '/'
        }
      }
    }
  }

5.2 构建并运行前端项目

百度安装node的教程，安装yarn的命令如下：

npm install -g yarn

yarn设置淘宝镜像源，如下：

yarn config set registry https://registry.npm.taobao.org

笔者采用develop分支搭建，进入dubbo-admin-ui目录，执行如下：

# 构建前端项目，需要耐心等待，这里耗费的时间比较长
yarn install
# 以dev环境运行前端项目
yarn run dev

当看到下图时即代表启动成功了：

在浏览器访问上图中的地址，账号密码均默认为root，界面如下所示：