Perutean Istio Ingress gagal dengan 404 untuk aplikasi Nginx / Angular

Aug 18 2020

Saya menerapkan Nginx dengan aplikasi sudut di belakang gateway masuk istio.

Hasil yang diharapkan: https://tremend.com/tremendui/ harus membuka aplikasi.

Masalah: Tapi setelah mengakses urlhttps://tremend.com/tremendui/, itu mencapai till index.html, tetapi gagal membuka file .js atau .css lainnya. Ini memberikan net :: ERR_ABORTED 404.

Petunjuk Kebijakan-Keamanan-Konten 'https://10.22.33.100' yang tidak dikenal.
DAPATKANhttps://tremend.com/styles.63a1fbbeeb253678e456.cssnet :: ERR_ABORTED 404
GEThttps://tremend.com/runtime-es2015.fd26fadf204671228ade.js net :: ERR_ABORTED 404

Jika saya membuka tautannya https://tremend.com/tremendui/runtime-es2015.fd26fadf204671228ade.js, file terbuka dengan benar.

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

File yaml layanan virtual:

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

Bisakah seseorang membantu? Hanya perlu beberapa petunjuk tentang cara mengatasi ini. Haruskah saya mengubah basis-href di layanan virtual angular atau ingress atau konfigurasi nginx?

Pembaruan1:
Saya mengubah layanan virtual saya seperti di bawah ini:

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, saya mempertimbangkan masukan Anda dan Rinor. Tapi sekarang beralih ke index.html dari "/" dan juga merutekan ke frontend. Namun prefiks lain juga merutekan ke frontend alih-alih ke tujuan yang sesuai.

Path untuk / static, / callback dan regex tidak berfungsi. Karena begitu saya menambahkannya, saya hanya mendapatkan kesalahan 404. Jadi saya hanya menambahkan root "/" untuk frontend.

Jawaban

1 Jakub Aug 18 2020 at 16:01

Haruskah saya mengubah basis-href di layanan virtual angular atau ingress atau konfigurasi nginx?

Saat Anda menggunakan rewrite, Anda perlu menambahkan jalur dalam layanan virtual untuk dependensi Anda seperti css dan js.

Itu dijelaskan dengan baik oleh @Rinor di sini .


Tutorial praktik Istio ini menjelaskannya dengan baik.

Mari kita uraikan permintaan yang harus diarahkan ke Frontend:

Path yang tepat / harus diarahkan ke Frontend untuk mendapatkan Index.html

Jalur awalan / statis / * harus dirutekan ke Frontend untuk mendapatkan file statis apa pun yang dibutuhkan oleh frontend, seperti Cascading Style Sheets dan file JavaScript .

Jalur yang cocok dengan regex ^. *. (Ico | png | jpg) $ harus diarahkan ke Frontend karena ini adalah gambar, yang perlu ditampilkan halaman.

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

Selain itu, Anda dapat melihat di sini .


Beri tahu saya jika Anda memiliki pertanyaan lain.