结合了前端和后端的路由

Question

我有一个React前端和Flask API作为后端。我希望在同一地址同时访问前端和后端路由。例如在myapp.web.com处的前端和在myapp.web.com/api处的后端。它将为他们提供不同的部署。我想知道怎么做。

Answer 1

是的，您可以拥有相同的域，该域可以根据路径指向多个服务。通常情况下，这可以帮助您解决CORS问题。

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

前端入口

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

因此，在这种情况下，所有以/api开头的请求都将路由到后端应用程序，其余请求将路由到前端。