全新 Dubbo Admin 安裝（開發版-Dubbo OPS）

時間 2019-11-10

標籤全新 dubbo admin 安裝開發 ops 欄目 Dubbo 简体版

原文原文鏈接

這是正在研發的Dubbo Admin，這一版Dubbo Admin名稱改爲了Dubbo OPS，目前功能簡陋，不建議使用（2018/11月）。架構上使用了先後端分離。前端使用Vue實現，後端使用Spring Boot實現。在安裝以前你須要先安裝Node和NPM用於運行前端項目。成功安裝後長這樣：javascript

前端部分

項目：dubbo-admin-frontendhtml

使用Vue.js做爲javascript框架，Vuetify做爲UI框架前端

後端部分

項目：dubbo-admin-backendvue

標準spring boot工程java

圖node

下載項目

GitHub 項目地址：
https://github.com/apache/incubator-dubbo-opswebpack

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

把項目clone下來後有git

後端項目：dubbo-admin-backend
前端項目：dubbo-admin-frontendgithub

生產環境配置

一、修改註冊中心地址web

在application-production.properties中指定註冊中心地址

dubbo-admin-backend/src/resources/application-production.properties

二、構建項目

mvn clean package

三、啓動項目

mvn --projects dubbo-admin-backend spring-boot:run

四、訪問

http://localhost:8080

五、Swagger 支持

部署完成後，能夠訪問ip:port來查看全部的restful api

http://localhost:8080/swagger-ui.html

開發環境配置

項目：dubbo-admin-backend

是一個標準spring boot工程，能夠在任何java IDE中運行它

package org.apache.dubbo.admin;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.ApplicationContext;

@SpringBootApplication
public class DubboAdminApplication {

   public static void main(String[] args) {
      ApplicationContext act = SpringApplication.run(DubboAdminApplication.class, args);
      SpringUtil.setApplicationContext(act);

   }
}

項目：dubbo admin frontend

由npm管理和構建，在開發環境中，能夠單獨運行

構建安裝程序

nodejs環境將自行安裝，本文不介紹

# install dependencies
$ npm install

# serve with hot reload at localhost:8081
$ npm run dev

> dubbo-admin-frontend@1.0.0 dev F:\OpenSource\incubator-dubbo-ops\dubbo-admin-frontend
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 95% emitting DONE  Compiled successfully in 11312ms16:18:31

 I  Your application is running here: http://localhost:8081

頁面訪問 Dubbo OPS

訪問 http://localhost:8081, 因爲先後端分開部署，前端支持熱加載，任何頁面的修改均可以實時反饋，不須要重啓應用。

圖1

圖2

跨域問題

爲了方便開發，咱們提供了這種先後端分離的部署模式，主要的好處是支持前端熱部署，在這種模式下，前端會經過8080端口訪問後端的restful api接口，獲取數據, 這將致使跨域訪問的問題。所以咱們在dubbo-admin-frontend/config/index.js添加了支持跨域訪問的配置,當前端經過npm run dev單獨啓動時，這些配置將被激活，容許跨域訪問