Perutean Istio Ingress gagal dengan 404 untuk aplikasi Nginx / Angular
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
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.