Gateway UI By Element UI

Gateway 可视化管理界面,thanks to Element UI

3.0.0 版本

配合 gateway 3.x 版本，同步更新了 gateway-ui-vue 的3.x 版本 3.x

install

# install
npm install

# serve with hot reload at localhost:3000
npm run dev

# build for production with minification
npm run build

见package.json 文件的 script操作

"scripts": {
    "dev": "vue-cli-service serve",
    "preview": "node build/preview.js",
    "build": "vue-cli-service build"
  },

开箱即用

Gateway 后端服务 export 9093 端口之后，指定一下ui的npm run build后的dist目录就可以了

浏览器直接访问 localhost:9093/ui/index.html

基本使用方法

Gateway 后端核心服务请查阅 fagongzi/gateway

dev 环境修改配置

见 vue.config.js 文件的 devServer 配置

{
        host: 'localhost',
        port: 3000, // 启动端口
        proxy: {
            [process.env.VUE_APP_BASE_API]: {
                target: 'http://localhost:9093', // 转发地址
                changeOrigin: true,
                pathRewrite: {
                    [process.env.VUE_APP_BASE_API]: ''
                }
            }
        }
    }

见 .env.development文件

#
ENV = 'development'
# base api
VUE_APP_BASE_API = '/Web'
# base URL
VUE_APP_BASE_URL = ''

VUE_CLI_BABEL_TRANSPILE_MODULES = true

VUE_APP_BASE_URL 表示 访问gateway http 服务的地址。 VUE_APP_BASE_API 表示请求url 地址的根的path，在dev 环境下面 主要是用于为了代理请求，防止浏览器访问的时候，报跨域错误。

preview 环境配置

preview 指的是在生成dist 文件夹之后，在部署在服务器端之前，通过启本地服务，配置 proxy 服务器端地址。

直接访问服务器端地址会引发跨域报错

在 build 文件下面的 preview.js

var config = {
  target: 'http://localhost:9093',
  port: 3001,
  host: '0.0.0.0',
  dir: '../dist',
  prefix: '/v1',
  debug: true
};

比如 preview 启动之后，在network 中可以看到 请求的 地址是http://localhost:3001/v1/clusters 由于配置了 前缀是 /v1 开头的 url 是会被转发到 http://localhost:9093上面去的。 所以最终的请求地址是http://localhost:9093/v1/clusters

origin /v1/clusters =====> to href http://localhost:9093/v1/clusters

从而起到了 转发的作用。

prod 环境配置

见.env.production

#
ENV = 'production'
# base api
VUE_APP_BASE_API = ''
# base url
VUE_APP_BASE_URL = ''

部署到 nginx 静态服务器上面

npm run build

生成了 dist 文件夹，直接通过 nginx 配置一个 静态服务。

在通过浏览器访问的时候，会报跨域报错，自行百度下，如何关闭chrome 浏览器的跨域报错问题。

nginx转发服务器，gateway 服务器，gateway-ui 服务器

当遇到 gateway 部署在单独一台服务器上面，例如1.0.0.1 ，gateway-ui 部署在另外一台服务器上面。

ps: 这两个服务器只能通过nginx 转发服务器才能访问的到。

步骤一

情况一：直接部署gateway-ui的production环境

修改 .env.production 文件

#
ENV = 'production'
# base api
VUE_APP_BASE_API = '换成nginx转发服务器转发到 gateway 服务器的路径，例如 /Web'
# base url
VUE_APP_BASE_URL = '换成nginx转发服务器的域名'

需要在 gateway-ui 所在的服务器启动一个 http静态服务器。将 npm run build 生成的dist文件夹部署在上面。

情况二：直接部署 gateway-ui 的 development环境

修改 .env.development文件

#
ENV = 'development'
# base api
VUE_APP_BASE_API = '换成nginx转发服务器转发到 gateway 服务器的路径，例如 /Web'
# base url
VUE_APP_BASE_URL = '换成nginx转发服务器的域名'

删除 vue.config.js 文件里面的 devServer 对象

proxy: {
      [process.env.VUE_APP_BASE_API]: {
        target: 'http://localhost:9093',
        changeOrigin: true,
        logLevel: 'debug',
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    },

同时将，devServer.host 修改为 所在服务器的IP地址。

步骤二

配置 nginx 转发服务器

配置转发到 gateway-ui 服务器

location / {
    proxy_pass http://gateway-ui所在的服务器的ip:端口;
}

配置转发到 gateway 服务器

location /Web {
    if ($request_uri ~ /Web/(.+)){
        set $param $1;
    }

    proxy_pass http://gateway所在的服务器的ip:端口/$1;
}