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