Il routing Istio Ingress non riesce con 404 per l'app Nginx / Angular

Question

Sto distribuendo Nginx con un'app angolare dietro il gateway di ingresso di istio.

Risultato atteso: https://tremend.com/tremendui/ dovrebbe aprire l'app.

Problema: ma dopo aver effettuato l'accesso all'URLhttps://tremend.com/tremendui/, raggiunge fino a index.html, ma non riesce ad aprire altri file .js o .css. Fornisce net :: ERR_ABORTED 404.

Direttiva Content-Security-Policy non riconosciuta "https://10.22.33.100".
OTTENEREhttps://tremend.com/styles.63a1fbbeeb253678e456.cssnet :: ERR_ABORTED 404
GEThttps://tremend.com/runtime-es2015.fd26fadf204671228ade.js net :: ERR_ABORTED 404

Se apro il link https://tremend.com/tremendui/runtime-es2015.fd26fadf204671228ade.js, il file si apre correttamente.

Configurazione personalizzata di Nginx:

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

Dockerfile Nginx / Angular:

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;"]

File yaml di Virtualservice:

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

Qualcuno può aiutare? Ho solo bisogno di alcune indicazioni su come risolvere questo problema. Devo cambiare base-href in angular o ingress virtualservice o nginx config?

Update1:
ho cambiato il mio servizio virtuale come di seguito:

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, ho considerato i tuoi input e quelli di Rinor. Ma ora va a index.html da "/" e indirizza anche al frontend. Tuttavia anche altri prefissi vengono indirizzati al frontend invece della loro destinazione corrispondente.

Il percorso per / static, / callback e regex non funzionavano. Perché una volta aggiunti, ricevo solo un errore 404. Quindi ho aggiunto solo root "/" per frontend.

Answer 1

Devo cambiare base-href in angular o ingress virtualservice o nginx config?

Quando usi la riscrittura, devi aggiungere il percorso nel servizio virtuale per le tue dipendenze come css e js.

È stato ben spiegato da @Rinor qui .

---

Questo tutorial pratico di Istio lo spiega bene.

Analizziamo le richieste che dovrebbero essere instradate al frontend:

Il percorso esatto / deve essere indirizzato a Frontend per ottenere Index.html

Il percorso prefisso / static / * deve essere indirizzato al frontend per ottenere tutti i file statici necessari al frontend, come i fogli di stile a cascata e i file JavaScript .

I percorsi che corrispondono alla regex ^. *. (Ico | png | jpg) $ dovrebbero essere indirizzati a Frontend in quanto è un'immagine, che la pagina deve mostrare.

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

---

Inoltre puoi dare un'occhiata qui .

---

Fammi sapere se hai altre domande.