Spring Cloud: default redirecting from Gateway to UI

Question

I\'m new to microservices and Spring Boot. I have a few Spring Cloud microservices with a Zuul gateway running on port 8080.

   browser
      |
      |
    gateway         


        

Answer 1

Finally, I've made my code work! Thanks to @pan for mentioning Zuul Routing on Root Path question and @RzvRazvan for revealing about how Zuul routing works.

I've just added controller to Zuul routed Gateway microservice with one endpoint to redirect from root http://localhost:8080/ to http://localhost:8080/ui/:

@Controller
public class GateController {    
    @GetMapping(value = "/")
    public String redirect() {
        return "forward:/ui/";
    }    
}

Zuul properties for redirecting from Gateway microservice on port 8080 as http://localhost:8080/ui/ to UI microservice, which implemented as a separate Spring Boot application on port 8090 as http://localhost:8090/ui/:

zuul:
  routes:
    ui:
      path: /ui/**
      serviceId: myproject.service.ui
      stripPrefix: false
      sensitiveHeaders:

UI microservice's properties:

server:
  port: 8090
  servlet:
     contextPath: /ui

Eventually, this call http://localhost:8080/ redirects us to controller of UI microservice, which returns view index.html:

@Controller
public class UiController {
    @GetMapping(value = "/")
    public String index() {
        return "index.html";
    }
}

---

Actually, I had another problem with rendering static content in such architecture, but it was connected with configuration of my front-end, which I develop using Vue.js framework. I will describe it here in a few sentences, in case it might be helpful for someone.

I have the following folders structure of UI microservice:

myproject.service.ui
    └───src/main/resources
        └───public
            |───static
            |    ├───css
            |    └───js
            └───index.html

All content of public folder is generated by npm run build task from webpack and vue.js. First time, I called my http://localhost:8080/ I got 200 OK for index.html and 404 for all other static resources, because they was called like this:

http:\\localhost:8080\static\js\some.js

So it was configured wrong public path for static assets in webpack. I changed it in config\index.js:

module.exports = {
  ...
  build: {
    ...
    assetsPublicPath: '/ui/',
    ...
  }
...
}

And static assets became to be called properly. e.g.:

http:\\localhost:8080\ui\static\js\some.js

Answer 2

If you would like to have on Zuul the UI(front-end) you can add the static content in resources/static folder(html, css and js files). On this way your proxy is able to render the index.html (of course you must have an index.html in static folder). O this way on http://localhost:8080 the proxy will render index.html; also you can have another paths but all these path are managed by index.html)

About routing, the Zuul only redirect the http request. http://localhost:8080/ui/. On 8080 is running the proxy (Zuul) BUT /ui is the context path of resource server. Se when you make a call on this path http://localhost:8080/ui/ the proxy will redirect to resource server and will actually make a request to http://localhost:8090/ui/

It is a difference between browser path and http request path. The browser path is managed by index.html and the http request is managed by Zuul. I don't know if I was explicit enough.

One more thing... You can have the same path (/ui) on http request and index.html and when your browser will access the http://localhost:8080/ui/ a .js file with http request method will make an http request to http://localhost:8080/ui/ and then will be redirected to http://localhost:8090/ui/ and the response from the resource server will be rendered on the page from http://localhost:8080/ui/.