Combining routes of frontend and backend

Question

I have a React front-end and Flask API as back-end. I wish to have both front-end and back-end routes accessible at same address. E.g frontend at myapp.web.com and backend at myapp.web.com/api. It will have different deployments for them. I want to know how to do this.

Answer 1

Yes, you can have the same domain that can point to multiple services based on the path. Normally this can help you to resolve the CORS issue.

API

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  annotations:
    kubernetes.io/ingress.class: nginx
    kubernetes.io/tls-acme: "true"
  name: backend-ingress
  namespace: backend-api
spec:
  rules:
  - host: myapp.web.com
    http:
      paths:
      - backend:
          service:
            name: backend-service-name
            port:
              number: 80
        path: /api
        pathType: Prefix
  tls:
  - hosts:
    - myapp.web.com
    secretName: my-secret-tls

Frontend ingress

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  annotations: 
    kubernetes.io/ingress.class: nginx
    kubernetes.io/tls-acme: "true"
    nginx.ingress.kubernetes.io/ssl-redirect: "true"
  name: frontend-service
  namespace: frontend-service
spec:
  rules:
  - host: myapp.web.com
    http:
      paths:
      - backend:
          service:
            name: frontend-service-name
            port:
              number: 80
        path: /
        pathType: Prefix
  tls:
  - hosts:
    - myapp.web.com
    secretName: my-secret-tls

so in this case, all the requests that start with /api will route to the backend app and rest of the requests will route to frontend.