Ingress route - path based routing to different React app

Question

I have different react apps and its backend-service deployed independently inside the Openshift. There is one app among them where users login and navigate to othes apps using links provided in this app.

Presently, the link of each app points directly to the "Openshift Route" (similar to Kube Ingress) of the react app.

But, this for production regions we have to change the way it works. There is one public domain exposed, say, apps.mydomain.com. We should make the links of each on the apps in such a way that it is loaded by this path, apps.mydomain.com/reactapp1 should load reactapp1 & reactapp2 should be loaded in apps.mydomain.com/reactapp2 and so on.

So there is one Ingress configured configured with paths

rules:
- host: apps.mydomain.com
  http:
    paths:
      - backend:
          serviceName: home
          servicePort: 8080
        path: /
      - backend:
          serviceName: react-app-1
          servicePort: 8080
        path: /reactapp1
      - backend:
          serviceName: app-1-api
          servicePort: 8080
        path: /app1/api
      - backend:
          serviceName: react-app-2
          servicePort: 8080
        path: /reactapp2
      - backend:
          serviceName: app-2-api
          servicePort: 8080
        path: /app2/api

When I hit the url https://apps.mydomain.com it loads the home app, after login, on clicking the app links the apps doesn't load. Though I could see the browser title changed to the navigated app, I get this error Uncaught SyntaxError: Unexpected token <.

After lots of searches I find the react app should have to be configured differently if it needs to be deployed not from root.

What am I missing? Where am I doing wrong? Ingress or react app build? Can I have different Ingress with same domain but with different paths for each react-app & its backend api?

Nevadanevai

Answer 1

You could use openshift routes instead of ingress for that, you can check on the docs how to apply it https://docs.openshift.com/container-platform/3.11/architecture/networking/routes.html#path-based-routes

One detail to pay attention if that your app will receive the relative path, it is not strip out of your request, for instance:

apps.mydomain.com/app2/api ---> app-2-api.svc:8080/app2/api

Fairweather

Answer 2

I don't think this is possible to solve using Openshift Router (see this issue).

With Nginx Ingress it could be easily accomplished using annotation nginx.ingress.kubernetes.io/rewrite-target: /

Luba

Yes, I have tried this, thought, didnt solve the problem annotations: kubernetes.io/ingress.class: nginx nginx.ingress.kubernetes.io/rewrite-target: / – Nevadanevai

That means you have static links in your app that use absolute paths. In that case you must fix your application, no other way. – Luba

This is annotation specific for nginx controller, openshift does not use nginx as ingress controller, but instead a openshift-router – Fairweather

No, the links are not absolute, they change on environments. The home app loads the links that are in the database. The question here is, find a way to route requests to appropriate react apps based on path supplied in the url. – Nevadanevai

@VijayVeeraraghavan But do you have nginx-ingress installed or not? – Luba

Yes, the Openshift cluster I works has Ingress (NGINX). – Nevadanevai