Маршрутизация по пути в передних веб-приложениях с использованием входа nginx или kukbernetes

Предположим, что у меня есть доменное имя xxx.yyy.com, но я не владею ни одним из его поддоменов (*.xxx.yyy.com).

Поэтому я должен направить каждый HTTP-запрос на соответствующий сервис с помощью path. Например, перенаправление xxx.yyy.com/app1/ на сервис app1 и xxx.yyy.com/app2/ на сервис app2.

Я настраиваю свои ресурсы kubernestes, как показано ниже:

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: 8000

Это работает в большинстве случаев, за исключением передних веб-приложений.

В коде HTML и javascript внешнего веб-приложения мы ссылаемся на его ресурсы (изображения, HTTP API) на внутреннем сервере по корневому пути ("/") , как если бы оно было развернуто на собственном сервере.

Например, в javascript-коде app1 мы вызываем fetch('/api/getUsers') вместо fetch('/app1/api/getUsers'), поэтому вход не смог направить /api/getUsers на сервис app1.

Я знаю, что это можно легко решить, перенаправив запрос host, а не path. Но у меня нет разрешения на создание поддоменов.

Итак, как можно решить этот сценарий фронтальных веб-приложений с помощью маршрутизации через path ingress?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
61
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Когда веб-приложение доступно для браузера по определенному пути, клиентские запросы должны быть нацелены на этот путь. Вы можете достичь этого,

  • используя только относительные пути, такие как api/guestUsers вместо /api/guestUsers
  • или префикс каждого URL-адреса запроса с этим путем, например /app1/img/logo.png.

Второй способ поддерживается, например:

  • Веб-пакет: publicPath: "/app1"
  • Реагирующий маршрутизатор: <BrowserRouter basename = "/app1"/>
  • Угловой: <base href = "/app1"/>

Этот параметр может быть динамически заполнен серверной переменной или даже установить автоматически в местоположении точки входа.

Благодарю. но у меня нет внешнего веб-приложения. есть ли способ не изменять код внешнего веб-приложения, только изменяя код конфигурации kubernetes или nginx?

benjaminchanming 08.04.2022 05:14

Скажем, оба приложения app1 и app2 получают /logo.png и отображают его. Вы можете разместить одно приложение в /app1/..., а другое — в /app2/..., но один логотип, который вы предоставите в /logo.png, будет отображаться в обоих приложениях. Хорошо, вы можете сделать маршрутизация на основе заголовка Referer, но это, вероятно, приведет к странным побочным эффектам, по крайней мере, с кэшированием.

Knight Industries 08.04.2022 07:29

Подход Referer звучит хорошо! Почему это может привести к побочным эффектам кэширования?

benjaminchanming 08.04.2022 14:39

Для меня это больше похоже на забавный академический эксперимент. В любом случае, когда http://xxx.yyy/logo.png возвращает другой контент на основе заголовка запроса Referer, браузер может кэшировать его, поэтому вы увидите неправильный логотип в /app2/ при посещении /app1 ранее. Вы можете отключить это поведение, установив заголовок ответа no-cache, но таким образом вы потеряете кеширование. Не рекомендовал бы.

Knight Industries 08.04.2022 16:03

В вашем приложении используйте window.location.href и проанализируйте первую часть URL-адреса и используйте ее в качестве основы для ваших запросов.

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.info(error)})

Другие вопросы по теме