swagger-ui多端口自動切換優化

場景

spring cloud 有10個微服務(假設),而後每次寫好接口,swagger-ui.html給對應的開發人員,告知參數,請求方式,返回結果等,當微服務個數比較多的狀況

http://192.168.0.xx:8000/swagger-ui.html
http://192.168.0.xx:8001/swagger-ui.html
http://192.168.0.xx:8002/swagger-ui.html
http://192.168.0.xx:8003/swagger-ui.html

不一樣的模塊對應不一樣的端口,而後就開始混亂了......

改造須要達到的效果:

http://192.168.0.xx/swagger-ui.html?m=模塊名稱1
http://192.168.0.xx/swagger-ui.html?m=模塊名稱2
http://192.168.0.xx/swagger-ui.html?m=模塊名稱3
http://192.168.0.xx/swagger-ui.html?m=模塊名稱4

這樣就不須要切換端口,所有用m後面的參數自動作轉發

 

操做:

加載html以後,有個 webjars/springfox-swagger-ui/springfox.js 內容須要定製一下.

爲了將html使用ajax請求數據也帶上m=xx的參數

$(function() {
  var springfox = {
    "baseModel": function() {
      var urlModel = window.location.href.match(/m=(.*)/);
      if (urlModel.length >= 2) {
        return urlModel[1]
      }
      return "";
    },
    "baseUrl": function() {
      var urlMatches = /(.*)\/swagger-ui.html.*/.exec(window.location.href);
      return urlMatches[1];
    },
    "securityConfig": function(cb) {
      $.getJSON(this.baseUrl() + "/swagger-resources/configuration/security?m=" + this.baseModel(), function(data) {
        cb(data);
      });
    },
    "uiConfig": function(cb) {
      $.getJSON(this.baseUrl() + "/swagger-resources/configuration/ui?m=" + this.baseModel(), function(data) {
        cb(data);
      });
    }
  };
  window.springfox = springfox;
  window.oAuthRedirectUrl = springfox.baseUrl() + '/webjars/springfox-swagger-ui/o2c.html?m=' + springfox.baseModel();

  window.springfox.uiConfig(function(data) {
    window.swaggerUi = new SwaggerUi({
      dom_id: "swagger-ui-container",
      validatorUrl: data.validatorUrl,
      supportedSubmitMethods: data.supportedSubmitMethods || ['get', 'post', 'put', 'delete', 'patch'],
      onComplete: function(swaggerApi, swaggerUi) {

        initializeSpringfox();

        if (window.SwaggerTranslator) {
          window.SwaggerTranslator.translate();
        }

        $('pre code').each(function(i, e) {
          hljs.highlightBlock(e)
        });

      },
      onFailure: function(data) {
        log("Unable to Load SwaggerUI");
      },
      docExpansion: data.docExpansion || 'none',
      jsonEditor: data.jsonEditor || false,
      apisSorter: data.apisSorter || 'alpha',
      defaultModelRendering: data.defaultModelRendering || 'schema',
      showRequestHeaders: data.showRequestHeaders || true
    });

    initializeBaseUrl();

    function addApiKeyAuthorization() {
      var key = (window.apiKeyVehicle == 'query') ? encodeURIComponent($('#input_apiKey')[0].value) : $('#input_apiKey')[0].value;
      if (key && key.trim() != "") {
        var apiKeyAuth = new SwaggerClient.ApiKeyAuthorization(window.apiKeyName, key, window.apiKeyVehicle);
        window.swaggerUi.api.clientAuthorizations.add(window.apiKeyName, apiKeyAuth);
        log("added key " + key);
      }
    }

    $('#input_apiKey').change(addApiKeyAuthorization);

    function log() {
      if ('console' in window) {
        console.log.apply(console, arguments);
      }
    }

    function oAuthIsDefined(security) {
      return security.clientId
          && security.clientSecret
          && security.appName
          && security.realm;
    }

    function initializeSpringfox() {
      var security = {};
      window.springfox.securityConfig(function(data) {
        security = data;
        window.apiKeyVehicle = security.apiKeyVehicle || 'query';
        window.apiKeyName = security.apiKeyName || 'api_key';
        if (security.apiKey) {
          $('#input_apiKey').val(security.apiKey);
          addApiKeyAuthorization();
        }
        if (typeof initOAuth == "function" && oAuthIsDefined(security)) {
          initOAuth(security);
        }
      });
    }
  });

  $('#select_baseUrl').change(function() {
    window.swaggerUi.headerView.trigger('update-swagger-ui', {
      url: $('#select_baseUrl').val()
    });
  });

  function maybePrefix(location, withRelativePath) {
    var pat = /^https?:\/\//i;
    if (pat.test(location)) {
      return location;
    }
    return withRelativePath + location + '?m=' + springfox.baseModel();
  }

  function initializeBaseUrl() {
    var relativeLocation = springfox.baseUrl();

    $('#input_baseUrl').hide();

    $.getJSON(relativeLocation + "/swagger-resources", function(data) {

      var $urlDropdown = $('#select_baseUrl');
      $urlDropdown.empty();
      $.each(data, function(i, resource) {
        var option = $('<option></option>')
            .attr("value", maybePrefix(resource.location, relativeLocation))
            .text(resource.name + " (" + resource.location + ")");
        $urlDropdown.append(option);
      });
      $urlDropdown.change();
    });

  }

});

注意一下,就是添加了一個函數: springfox.baseModel(),在請求 swagger-ui.html的時候,將m後面的參數,也攜帶值ajax裏面,

真正比較重要的請求: [http://192.168.0.xx/v2/api-docs?m=sp],也就是 maybePrefix 函數處理,裏面的location就是swagger-ui裏面的/v2/api-docs,須要在後面加上 springfox.baseModel()

而後將全部swagger-ui的請求所有使用nginx代理,除了上面的js文件

nginx 配置文件

server {
        listen 4000;
        location / {
                root /usr/local/orange/html;
        }
    }

html目錄

swagger-ui.html
webjars/springfox-swagger-ui/springfox.js

swagger其它的資源,轉發到java上便可.

 

而後從url裏面解析,將m後面不一樣的參數轉發到不一樣的主機或端口. 推薦使用orange來配置.

https://github.com/mycoco2014/orange

orange設置截圖:

<1>過濾器設置

<2>轉發規則-修改過的js文件

<3>轉發規則,swagger-ui的默認的資源

<4>轉發規則,微服務名稱