Combining routes of frontend and backend - kubernetes

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.