CODEWITHSUNDEEP
springspring-bootnetflix-zuul
Andrew
Andrew

Reputation: 417

Spring Cloud: default redirecting from Gateway to UI

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   (:8080)
     /   \
    /     \
   /       \
resource   UI (:8090)

There is a UI microservice on port 8090, which has a controller with a method inside, returning index.html.

I configured Zuul routing like this for UI (I'm using Eureka too):

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

If I call http://localhost:8080/ui/ everything works fine and I see rendering of my index.html.

Is it possible to configure Spring Cloud in some way to make the following flow work: calling http://localhost:8080/ redirects us to controller of UI microservice, which returns index.html?

So the idea is to open UI from the root of my site.

Thanks in advance!

Upvotes: 3

Views: 10272

Answers (2)

Andrew
Andrew

Reputation: 417

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

Upvotes: 6

RazvanParautiu
RazvanParautiu

Reputation: 2938

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/.

Upvotes: 1

Related Questions