Istio Giriş yönlendirmesi, Nginx / Angular uygulaması için 404 ile başarısız oluyor

Question

İstio giriş ağ geçidinin arkasındaki açısal uygulama ile Nginx'i konuşlandırıyorum.

Beklenen Sonuç: https://tremend.com/tremendui/ uygulamayı açmalısınız.

Sorun: Ancak url'ye eriştikten sonrahttps://tremend.com/tremendui/, index.html'ye kadar ulaşır, ancak diğer .js veya .css dosyalarını açamaz. Net :: ERR_ABORTED 404 verir.

Tanınmayan İçerik-Güvenlik-Politikası direktifi 'https://10.22.33.100'.
ALMAKhttps://tremend.com/styles.63a1fbbeeb253678e456.cssnet :: ERR_ABORTED 404
GEThttps://tremend.com/runtime-es2015.fd26fadf204671228ade.js net :: ERR_ABORTED 404

Bağlantıyı açarsam https://tremend.com/tremendui/runtime-es2015.fd26fadf204671228ade.jsdosya düzgün açılır.

Nginx özel yapılandırması:

server {
  listen 80;
  location / {
    root /usr/share/nginx/html;
    try_files $uri $uri/ /index.html;
  }
}

Nginx / Angular Dockerfile:

FROM node:ubuntu as build-step
ARG env=dev
RUN mkdir /usr/src/app
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install && npm install -g @angular/[email protected]
COPY . .
RUN echo "Build environment is $env" RUN ng build --configuration=$env

FROM node:ubuntu as prod-stage
RUN DEBIAN_FRONTEND=noninteractive apt-get update && DEBIAN_FRONTEND=noninteractive apt-get -yq install nginx nginx-extras
## Remove default nginx website 
RUN rm -rf /usr/share/nginx/html/*
COPY --from=build-step /usr/src/app/dist/ /usr/share/nginx/html
COPY ./nginx-custom.conf /etc/nginx/conf.d/default.conf
COPY ./nginx.conf  /etc/nginx/
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Virtualservice yaml dosyası:

apiVersion: networking.istio.io/v1alpha3
kind: VirtualService
metadata:
  name: tremendui-ingress
  namespace: apx-system
spec:
  hosts:
  - "*"
  gateways:
  - apollox-istio-gateway
  http:
  - match:
    - uri:
        prefix: /tremendui/
    rewrite:
        uri: /
    route:
    - destination:
        host: tremend-ui.default.svc.cluster.local
        port:
          number: 80

Biri yardımcı olabilir mi? Bunun nasıl çözüleceğine dair bazı talimatlara ihtiyacım var. Base-href'i angular veya ingress virtualservice veya nginx yapılandırmasında değiştirmeli miyim?

Güncelleme1: Sanal hizmetimi
aşağıdaki gibi değiştirdim:

apiVersion: networking.istio.io/v1alpha3
kind: VirtualService
metadata:
  name: tremedui-ingress
  namespace: apx-system
spec:
  hosts:
  - "tremend.com"
  gateways:
  - apollox-istio-gateway
  http:
  - match:
    - uri:
        exact: /
    route:
    - destination:
        host: tremend-ui.default.svc.cluster.local
        port:
          number: 80
  - match:
    - uri:
        prefix: /jsonserver/
    rewrite:
        uri: /
    route:
    - destination:
        host: json-server.default.svc.cluster.local
        port:
          number: 3000
  - match:
    - uri:
        prefix: /tremendapi/
    rewrite:
        uri: /
    route:
    - destination:
        host: tremend-api.default.svc.cluster.local
        port:
          number: 8000
  - match:
    - uri:
        prefix: /dynamicapi/
    rewrite:
        uri: /
    route:
    - destination:
        host: dynamic-api.default.svc.cluster.local
        port:
          number: 9000

@ jt97, senin ve Rinor'un girdilerini düşündüm. Ama şimdi "/" dizininden index.html'ye gidiyor ve ayrıca ön uca yönlendiriyor. Ancak diğer önekler de karşılık gelen hedef yerine ön uca yönlendirir.

/ Static, / callback ve regex yolu çalışmıyordu. Çünkü onları ekledikten sonra sadece 404 hatası alıyorum. Bu yüzden ön uç için sadece "/" kökünü ekledim.

Answer 1

Base-href'i angular veya ingress virtualservice veya nginx config'de değiştirmeli miyim?

Yeniden yazmayı kullandığınızda, css ve js gibi bağımlılıklarınız için sanal hizmete yol eklemeniz gerekir.

İyi @Rinor tarafından açıklanmıştı burada .

---

Bu Istio uygulamalı eğitici bunu iyi açıklıyor.

Ön uca yönlendirilmesi gereken istekleri inceleyelim:

Index.html'yi almak için tam yol / Ön Uç'a yönlendirilmelidir

Basamaklı Stil Sayfaları ve JavaScript dosyaları gibi ön uç tarafından ihtiyaç duyulan statik dosyaları almak için ön uç yolu / statik / * Ön Uç'a yönlendirilmelidir .

^. *. (İco | png | jpg) $ normal ifadesiyle eşleşen yollar , sayfanın gösterilmesi gereken bir resim olduğu için Ön Uç'a yönlendirilmelidir.

http:
  - match:
    - uri:
        exact: /
    - uri:
        exact: /callback
    - uri:
        prefix: /static
    - uri:
        regex: '^.*\.(ico|png|jpg)$'
    route:
    - destination:
        host: frontend             
        port:
          number: 80

---

Ek olarak buraya bir göz atabilirsiniz .

---

Başka sorunuz olursa bana bildirin.