Supongamos que tengo un nombre de dominio xxx.yyy.com, pero no tengo ningún nombre de subdominio (*.xxx.yyy.com).
Entonces tengo que enrutar cada solicitud HTTP a su servicio correspondiente por path . Por ejemplo, enrutar xxx.yyy.com/app1/ al servicio app1 y xxx.yyy.com/app2/ al servicio app2 .
Configuro mis recursos de kubernestes de la siguiente manera:
apiVersion: networking.k8s.io/v1 kind: Ingress metadata: name: ingress annotations: nginx.ingress.kubernetes.io/rewrite-target: / kubernetes.io/ingress.class: "nginx" spec: rules: - host: xxx.yyy.com http: paths: - pathType: Prefix path: "/app1" backend: service: name: app1 port: number: 8000 - pathType: Prefix path: "/app2" backend: service: name: app2 port: number: 8000 --- apiVersion: v1 kind: Service metadata: name: app1 spec: selector: app: app1 ports: - protocol: TCP port: 8000 --- apiVersion: v1 kind: Service metadata: name: app2 spec: selector: app: app2 ports: - protocol: TCP port: 8000Esto funciona en la mayoría de los casos, excepto en aplicaciones web frontales.
En el código HTML y javascript de una aplicación web frontal, referimos sus activos (imágenes, API HTTP) en el servidor back-end mediante la ruta raíz ("/"), como si estuviera implementado en su propio servidor.
Por ejemplo, en el código javascript de app1 , llamamos a fetch('/api/getUsers') en lugar de fetch('/app1/api/getUsers') , por lo que el ingreso no pudo enrutar /api/getUsers al servicio app1 .
Sé que se puede resolver fácilmente enrutando la solicitud por host no por path . Pero no tengo permiso para crear subdominios.
Entonces, ¿cómo se puede resolver este escenario de aplicaciones web frontales mediante el enrutamiento por ingreso de path ?
Cuando la aplicación web está disponible para el navegador bajo una determinada ruta, las solicitudes de front-end deben apuntar a esa ruta. Puedes lograr esto por
api/guestUsers en lugar de /api/guestUsers/app1/img/logo.png .La segunda forma es compatible, por ejemplo, con:
publicPath: "/app1"<BrowserRouter basename="/app1"/><base href="/app1"/>Esta configuración podría completarse dinámicamente con una variable de servidor o inclusoestablecerse automáticamente en la ubicación del punto de entrada.
En su aplicación, use window.location.href y analice la primera parte de la URL y utilícela como base para sus solicitudes.
const url = new URL(window.location.href); const appName = url.pathname.split('/').length > 2 ? url.pathname.split('/')[1] : ""; const baseApiUrl = new URL(appName, url).toString(); fetch(baseApiUrl + '/api/getUsers') .then((res) = {}) .catch((error) => { console.log(error)})