Multiple React apps under same domain

11/4/2017

I have a big app splitted in a couple microservices:

  • Blog
  • Blog CMS
  • Ecommerce
  • Dashboard

All is deployed to Google Cloud Engine with Kubernetes.

All should be available under same domain, let's say www.bigapp.com.

Each section: blog, ecommerce, dashboard etc... is a React app and lives in it's own Docker image and pod.

I created an Ingress with Kubernetes and did a deploy on GCE.

Ingress file:

apiVersion: extensions/v1beta1
kind: Ingress
metadata:
  name: test
  annotations:
     kubernetes.io/ingress.class: "gce"
     kubernetes.io/ingress.global-static-ip-name: ingress-front-end-ip-test
     ingress.kubernetes.io/rewrite-target: /
spec:
  rules:
  - http:
      paths:
      - path: /
        backend:
          serviceName: ecommerce
          servicePort: 4001
      - path: /buy
        backend:
          serviceName: ecommerce
          servicePort: 4001
      - path: /buy/*
        backend:
          serviceName: ecommerce
          servicePort: 4001
      - path: /dashboard
        backend:
          serviceName: dashboard
          servicePort: 4002
      - path: /dashboard/*
        backend:
          serviceName: dashboard
          servicePort: 4002
      - path: /news
        backend:
          serviceName: news
          servicePort: 4003
      - path: /news/*
        backend:
          serviceName: news
          servicePort: 4003

When a use types in www.bigapp.com or www.gibapp.com/buy it will be directed to the ecommerce app. So far so good.

But if the user tries to go to www.bigapp.com/dashboard, the router of the ecommerce app will not allow it.

Any help would be greatly appreciated!

-- Ionut Milas
kubernetes
nginx
react-router
reactjs

0 Answers