Nginx / Angular 앱의 경우 404에서 Istio Ingress 라우팅이 실패 함

Aug 18 2020

istio 인 그레스 게이트웨이 뒤에 앵귤러 앱으로 Nginx를 배포하고 있습니다.

예상 결과: https://tremend.com/tremendui/ 앱을 열어야합니다.

문제 : 하지만 URL에 액세스 한 후https://tremend.com/tremendui/, index.html까지 도달하지만 다른 .js 또는 .css 파일을 열지 못합니다. net :: ERR_ABORTED 404를 제공합니다.

인식 할 수없는 Content-Security-Policy 지시문 'https://10.22.33.100'.
가져 오기https://tremend.com/styles.63a1fbbeeb253678e456.cssnet :: ERR_ABORTED 404
GEThttps://tremend.com/runtime-es2015.fd26fadf204671228ade.js net :: 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;"]

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

누군가 도울 수 있습니까? 이 문제를 해결하는 방법에 대한 지침이 필요합니다. 각도 또는 수신 가상 서비스 또는 nginx 구성에서 base-href를 변경해야합니까?

Update1 :
내 가상 서비스를 아래와 같이 변경했습니다.

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, 나는 당신과 Rinor의 입력을 고려했습니다. 그러나 이제는 "/"에서 index.html로 이동하고 프런트 엔드로 라우팅합니다. 그러나 다른 접두사도 해당 대상 대신 프런트 엔드로 라우팅됩니다.

/ static, / callback 및 regex의 경로가 작동하지 않았습니다. 일단 추가하면 404 오류가 발생하기 때문입니다. 그래서 프론트 엔드에 루트 "/"를 추가했습니다.

Nginx / Angular 앱의 경우 404에서 Istio Ingress 라우팅이 실패 함

답변