Question 74478 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Deploying multiple react apps on a single host on different paths – Reactjs

I have 2 react applications, one of which is served on example.com and it works fine.
Now I am working on a second application and I need it to be served on example.com/app.
I am using nginx as ingress.

Note:
Both apps run on seperate docker containers on AKS in same namespace.

Please find my ingress.yaml as below –

App1 served on example.com (works fine)

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: app1
  annotations:
    nginx.ingress.kubernetes.io/ssl-redirect: "true"
    kubernetes.io/ingress.allow-http: "true"
  labels:
    app: app1
spec:
  ingressClassName: nginx
  rules:
    - host: example.com
      http:
        paths:
          - backend:
              service:
                name: app1
                port:
                  number: 80
            path: /
            pathType: Prefix

App2 which I need to serve on example.com/app (doesn’t work). When I open example.com/app/ I see a blank page and no errors. When I open example.com/app the bundles fail to load.

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: app2
  annotations:
    nginx.ingress.kubernetes.io/rewrite-target: /$2
  labels:
    app: app2
spec:
  ingressClassName: nginx
  rules:
    - host: example.com
      http:
        paths:
          - backend:
              service:
                name: app2
                port:
                  number: 80
            path: /app(/|$)(.*)
            pathType: Prefix
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I had to add "homepage": "https://example.com/app" in my package.json to make it work.


  2. 0

    If it’s just about the serving example.com/app not sure how your internal application showing or serving the data.

    Can’t you just do like

    apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: ingress-svc
spec:
  rules:
  - host: example.io
    http:
      paths:
      - path: /
        pathType: Prefix
        backend:
          service:
            name: svc
            port:
              number: 80
      - path: /app
        pathType: Prefix
        backend:
          service:
            name: svc2
            port:
              number: 80
  ingressClassName: nginx

    You can also separate out the two different ingress hosts with diff name

    apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  annotations:
    nginx.ingress.kubernetes.io/rewrite-target: /$2
  name: rewrite
  namespace: default
spec:
  ingressClassName: nginx
  rules:
  - host: example.io
    http:
      paths:
      - path: /apps(/|$)(.*)
        pathType: Prefix
        backend:
          service:
            name: svc-2
            port: 
              number: 80

    while the other one is without the rule of rewrite forwarding all traffic to svc-1.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search