Spring Cloud Zuul 网关的分布式系统中整合Swagger（转）和 zuul跨域访问问题

　　　首先恭喜本身终于找对了努力的方向，很荣幸能在公司接触到微服务架构，也很高兴公司一个大佬哥们愿意带我，他技术确实很牛逼，我也很佩服他，先后端通吃，干了六年能有这样的水平。最近跟着在搞微服务架构，给我分配了不少相关的任务，但愿我能尽快上手。同时，我也很努力地学习，但愿能早点掌握相关技术，和大佬看齐，定个目标：但愿来年年末本身工资来涨5K左右。

首先感谢该博主的文章，让我顺利部署起来了。（https://blog.csdn.net/qq6492178/article/details/78863935）

不过还有一个问题就是局域网访问不了其余电脑的swagger实例，都是500错误。

server:
  port:  10000
spring:
  application:
    name: ****-demo2333-service
eureka:
  client:
    serviceUrl:
      defaultZone: http://192.168.1.161:9001/eureka/,http://192.168.1.161:9002/eureka/
  instance:
    prefer-ip-address: true #没有这行你休想访问不一样电脑的swagger接口
management:
  security:
    enabled: false

 

 

 

若是你的系统也是用zuul做为分布式系统的网关，同时使用swagger生成文档，想把整个系统的文档整合在同一个页面上，能够参考本文。

项目结构

eureka-server：eureka服务注册中心，端口8080, 
zuul-server：zuul网关，端口8081 
payment-server：支付系统，端口8082 
order-server：订单系统，端口8083 
order-server1：订单系统，端口8084 
order-server2：订单系统，端口8085 
其中order-server、order-server一、order-server2组成订单系统集群。 
 
下面是运行后的效果图： 
打开zuul的swagger首页http://localhost:8081/swagger-ui.html 

实现方法

zuul-server

路由配置

zuul:
  routes:
    payment-server:
      path: /pay/** order-server: path: /order/**

• 1
• 2
• 3
• 4
• 5
• 6

swagger配置类SwaggerConfig

@Configuration @EnableSwagger2 public class SwaggerConfig { @Bean public Docket createRestApi() { return new Docket(DocumentationType.SWAGGER_2) .apiInfo(apiInfo()); } private ApiInfo apiInfo() { return new ApiInfoBuilder() .title("分布式购物系统") .description("购物系统接口文档说明") .termsOfServiceUrl("http://localhost:8081") .contact(new Contact("vker", "", "6492178@gmail.com")) .version("1.0") .build(); } @Bean UiConfiguration uiConfig() { return new UiConfiguration(null, "list", "alpha", "schema", UiConfiguration.Constants.DEFAULT_SUBMIT_METHODS, false, true, 60000L); } }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26

重点：swagger文档资源配置类DocumentationConfig

@Component @Primary public class DocumentationConfig implements SwaggerResourcesProvider { @Override public List<SwaggerResource> get() { List resources = new ArrayList<>(); resources.add(swaggerResource("订单系统", "/order/v2/api-docs", "2.0")); resources.add(swaggerResource("支付系统", "/pay/v2/api-docs", "2.0")); return resources; } private SwaggerResource swaggerResource(String name, String location, String version) { SwaggerResource swaggerResource = new SwaggerResource(); swaggerResource.setName(name); swaggerResource.setLocation(location); swaggerResource.setSwaggerVersion(version); return swaggerResource; } }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19

能够看出来实现的重点就在DocumentationConfig中，经过配置文档资源，当在首页下拉框选择订单系统时，会请求http://localhost:8081/order/v2/api-docs获取文档详情，而根据zuul的路由配置，zuul会将/order/**请求路由到serviceId为order-server的系统上。并且因为order-server是一个集群，就算其中一台服务挂掉，也不会影响到文档的获取。

order-server

swagger配置类SwaggerConfig,order-server、payment-serverswagger配置基本相同。

@Configuration @EnableSwagger2 public class SwaggerConfig { @Bean public Docket createRestApi() { return new Docket(DocumentationType.SWAGGER_2) .apiInfo(apiInfo()) .select() .apis(RequestHandlerSelectors.basePackage("w.m.vker.demo")) .apis(RequestHandlerSelectors.withClassAnnotation(Api.class)) .apis(RequestHandlerSelectors.withMethodAnnotation(ApiOperation.class)) .paths(PathSelectors.any()) .build(); } private ApiInfo apiInfo() { return new ApiInfoBuilder() .title("订单系统api") .description("订单系统接口文档说明") .contact(new Contact("vker", "", "6492178@gmail.com")) .version("1.0") .build(); } @Bean UiConfiguration uiConfig() { return new UiConfiguration(null, "list", "alpha", "schema", UiConfiguration.Constants.DEFAULT_SUBMIT_METHODS, false, true, 60000L); } }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31

swagger整合xrebel

xrebel是一款web调试工具，能够参考教程XRebel使用教程。 
xrebel的工做原理是追踪页面的各类请求分析整个请求的流程和消耗时间，而swagger则提供了页面在线接口调试功能，将两则结合起来，能够快速调试接口的同时分析接口的流程和缺陷,可谓是如虎添翼。 
如图： 

点击swagger的try it out时 左下角的xrebel工具栏会记录发起的请求详情。 
当我屡次调用订单系统接口的时候，xrebel甚至能够显示zuul将这个请求经过负载均衡分发到哪个服务上，如图：

实现方法

将xrebel集成到zuul-server启动的vm options参数中，在zuul其中成功后,打开http://localhost:8081/xrebel页面，想页面正下方中央的文本框内的js代码

<script> window.XREBEL_SERVERS = ['http://localhost:8081']; (function() { const script = document.createElement('script'); script.src = window.XREBEL_SERVERS[0] + '/a65f4bf22bdd793dca6963ffe7fa0c62/resources/init.min.js'; document.body.appendChild(script); }()); </script>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

复制出来。而后找到springfox-swagger-ui依赖的jar包，若是使用maven管理，则jar包的位置在maven仓库路径\io\springfox\springfox-swagger-ui\版本号 的文件夹下，将jar包用解压后找到swagger-ui.html文件，将以前的复制的js文件粘贴到里面，而后运行zuul-server，就能够在swagger首页http://localhost:8081/swagger-ui.html看到左下角出现这个可爱的工具栏啦。 

最后附上代码地址：https://github.com/91wangmeng/spring-boot-swagger-distributed-demo.git

server:
  port:  10000
spring:
  application:
    name: scbp-demo2333-service
eureka:
  client:
    serviceUrl:
      defaultZone: http://192.168.1.161:9001/eureka/,http://192.168.1.161:9002/eureka/
  instance:
    prefer-ip-address: true
management:
  security:
    enabled: false