การกำหนดเส้นทาง Istio Ingress ล้มเหลวด้วย 404 สำหรับแอป Nginx / Angular

Aug 18 2020

ฉันกำลังปรับใช้ Nginx ด้วยแอพเชิงมุมที่อยู่เบื้องหลัง istio ingress gateway

ผลลัพธ์ที่คาดหวัง: https://tremend.com/tremendui/ ควรเปิดแอป

ปัญหา:แต่หลังจากเข้าถึง urlhttps://tremend.com/tremendui/มันไปถึงจนถึง index.html แต่ไม่สามารถเปิดไฟล์. js หรือ. css อื่น ๆ ได้ ให้ net :: ERR_ABORTED 404

คำสั่งนโยบายเนื้อหา - ความปลอดภัยที่ไม่รู้จัก 'https://10.22.33.100'
รับhttps://tremend.com/styles.63a1fbbeeb253678e456.cssสุทธิ :: 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;
  }
}

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

ไฟล์ yaml 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

ใครสามารถช่วย? เพียงต้องการคำแนะนำในการแก้ปัญหานี้ ฉันควรเปลี่ยน base-href ใน angular หรือ ingress virtualservice หรือ nginx config?

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 จาก "/" และกำหนดเส้นทางไปยังส่วนหน้า อย่างไรก็ตามคำนำหน้าอื่น ๆ ยังกำหนดเส้นทางไปยังส่วนหน้าแทนที่จะเป็นปลายทางที่เกี่ยวข้อง

เส้นทางสำหรับ / static, / callback และ regex ไม่ทำงาน เพราะเมื่อฉันเพิ่มเข้าไปฉันเพิ่งได้รับข้อผิดพลาด 404 ฉันจึงเพิ่มแค่รูท "/" สำหรับส่วนหน้า

คำตอบ

1 Jakub Aug 18 2020 at 16:01

ฉันควรเปลี่ยน base-href ใน angular หรือ ingress virtualservice หรือ nginx config?

เมื่อคุณใช้การเขียนซ้ำคุณต้องเพิ่มเส้นทางในบริการเสมือนสำหรับการอ้างอิงของคุณเช่น css และ js