Блог

Главная - Вопросы по программированию - Вход приложения Angular в Kubernetes при использовании некорневого пути

Вход приложения Angular в Kubernetes при использовании некорневого пути

#angular #kubernetes #kubernetes-ingress #nginx-ingress

#angular #kubernetes #kubernetes-вход #nginx-вход

Вопрос:

У меня есть угловое приложение, которое отлично работает в среде разработки.

Когда я пытаюсь развернуть его в кластере Kubernetes и создать для него входной маршрут, все работает не так, как ожидалось.

В частности, я использую это определение входа

 apiVersion: extensions/v1beta1
kind: Ingress
metadata:
  name: angular-website
  annotations:
    kubernetes.io/ingress.class: "nginx"
spec:
  rules:
  - http:
      paths:
      - backend:
          serviceName: angular-website
          servicePort: 80
        path: /website(/($|.*))?

Когда я пытаюсь перейти к этому входному маршруту, я вижу пустую страницу и вкладку сети (в Chrome), я вижу эти ошибки

введите описание изображения здесь

Я понимаю, что это происходит потому, что я пытаюсь маршрутизировать по некорневому пути (то есть по тому, чего нет / ), а Angular не «знает» об этом и предполагает, что приложение запускается из корневого пути, когда пытается загрузить все пакеты JS.

Я понимаю, что могу исправить это, отредактировав раздел в главном index.html в моем приложении из

 <base href="/">

Для

 <base href="/website">

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

Есть ли способ обойти это? Есть ли способ заставить Angular динамически узнавать о корневом пути без необходимости перекомпилировать приложение, чтобы установить это?

Редактировать

Приложение Angular размещено в приложении NodeJS Express

 const clientPath = path.join(__dirname, "..", "public", "angular-website", "dist", "angular-website");

app.use(express.static(clientPath));
app.get('/*', (req, res) => res.sendFile(path.join(clientPath, "index.html"));

Комментарии:

1. Настроен ли angular с помощью сервера nginx или apache? Если возможно, можете ли вы предоставить файл DockerFile

2. @Prashanna только что отредактировал сообщение. Я использую NodeJS Express для использования приложения Angular (у меня есть фрагмент кода маршрутизации). файл docker — это стандартный файл docker NodeJS, которым я могу поделиться, если хотите.

Ответ №1:

В итоге я создал угловое приложение в своем Dockerfile следующим образом

 RUN npm run build -- --prod --base-href="/{{basePath}}" --deploy-url="{{basePath}}/"

по сути, во время сборки я передаю заполнитель аргументам --base-href and --deploy-url , которые указывают, какой корневой путь моего приложения.

Затем, когда я обслуживаю приложение Angular из своего процесса NodeJS Express, я использую mustache (механизм создания шаблонов), чтобы заменить там заполнители корневым путем моего приложения, который хранится в переменной среды.

 res.render('index', {
    basePath: process.env.CLIENT_BASE_PATH || ''
});