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-server1、order-server2組成訂單系統集群。 
 
下面是運行后的效果圖： 
打開zuul的swagger首頁http://localhost:8081/swagger-ui.html 

實現方法

zuul-server

路由配置

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

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", "", "[e-mail]")) .version("1.0") .build(); } @Bean UiConfiguration uiConfig() { return new UiConfiguration(null, "list", "alpha", "schema", UiConfiguration.Constants.DEFAULT_SUBMIT_METHODS, false, true, 60000L); } }

重點：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; } }

可以看出來實現的重點就在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", "", "[e-mail]")) .version("1.0") .build(); } @Bean UiConfiguration uiConfig() { return new UiConfiguration(null, "list", "alpha", "schema", UiConfiguration.Constants.DEFAULT_SUBMIT_METHODS, false, true, 60000L); } }

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>

復制出來。然后找到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