इस्तियो इनग्रेस रूटिंग Nginx / Angular ऐप के लिए 404 के साथ विफल हो जाती है

Aug 18 2020

मैं istio ingress प्रवेश द्वार के पीछे कोणीय एप्लिकेशन के साथ Nginx को तैनात कर रहा हूं।

अपेक्षित परिणाम: https://tremend.com/tremendui/ ऐप को खोलना चाहिए।

अंक: लेकिन url तक पहुँचने के बादhttps://tremend.com/tremendui/, यह index.html तक पहुँचता है, लेकिन यह अन्य .js या .css फ़ाइलों को खोलने में विफल रहता है। यह शुद्ध :: ERR_ABORTED 404 देता है।

अपरिचित सामग्री-सुरक्षा-नीति निर्देश 'https ://10.22.33.100'।
प्राप्तhttps://tremend.com/styles.63a1fbbeeb253678e456.cssnet :: ERR_ABORTED 404
GEThttps://tremend.com/runtime-es2015.fd26fadf204671228ade.js नेट :: ERR_ABORTED 404

अगर मैं लिंक खोलूं https://tremend.com/tremendui/runtime-es2015.fd26fadf204671228ade.js, फ़ाइल सही ढंग से खुलती है।

Nginx कस्टम कॉन्फ़िगरेशन:

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

नग्नेक्स / कोणीय डॉकरफाइल:

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 फ़ाइल:

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

क्या कोई सहायता कर सकता है? बस इसे हल करने के लिए कुछ दिशाओं की आवश्यकता है। क्या मुझे कोणीय में बेस-एचएफआर को बदलना चाहिए या वर्चुअल्सवर्क या नेगनेक्स कॉन्फिगर को इंप्रेस करना चाहिए?

Update1:
मैंने नीचे के रूप में अपने virtualservice बदल दिया है:

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, मैंने आपका और रिनोर के इनपुट पर विचार किया। लेकिन अब यह "/" से index.html पर चला जाता है और फ़्रंटएंड के रूट भी। हालांकि अन्य उपसर्ग भी अपने संबंधित गंतव्य के बजाय दृश्यपटल पर जाते हैं।

/ स्थिर, / कॉलबैक और regex के लिए पथ काम नहीं कर रहे थे। क्योंकि एक बार मैंने उन्हें जोड़ा मैं सिर्फ एक 404 त्रुटि मिलता है। इसलिए मैंने फ्रंटेंड के लिए बस रूट "/" जोड़ा है।

जवाब

1 Jakub Aug 18 2020 at 16:01

क्या मुझे कोणीय में बेस-एचएफआर को बदलना चाहिए या वर्चुअल्सवर्क या नेगनेक्स कॉन्फिगर को इंप्रेस करना चाहिए?

जब आप पुन: उपयोग करते हैं तो आपको अपनी निर्भरता के लिए वर्चुअल सेवा में रास्ता जोड़ने की आवश्यकता होती है जैसे सीएसएस और जेएस।

यह यहाँ @Rinor द्वारा अच्छी तरह से समझाया गया था ।

यह इस्तियो अभ्यास ट्यूटोरियल में इसे अच्छी तरह से समझाता है।