Istio Ingress 路由失败，Nginx/Angular 应用程序出现 404

Question

我在 istio 入口网关后面部署带有 Angular 应用程序的 Nginx。

预期结果：https://tremend.com/tremendui/ 应该会打开应用程序。

问题：但访问urlhttps://tremend.com/tremendui/后，一直到index.html，但无法打开其他.js或.css文件。它给出了 net::ERR_ABORTED 404。

无法识别的 Content-Security-Policy 指令“https://10.22.33.100”。
GET https://tremend.com/styles.63a1fbbeeb253678e456.css net::ERR_ABORTED 404
GET https://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/cli@7.3.9
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 文件：

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 吗？

更新1：
我改变了我的虚拟服务如下：

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 和正则表达式的路径不起作用。因为一旦我添加它们，我就会收到 404 错误。所以我只为前端添加了根“/”。

Answer 1

我应该更改 angular 或 ingress virtualservice 或 nginx 配置中的 base-href 吗？

当您使用重写时，您需要在虚拟服务中为您的依赖项（如 css 和 js）添加路径。

@Rinor here 解释得很好。

---

这个Istio in practise 教程解释得很好。

让我们分解应该路由到前端的请求：

确切路径 / 应该路由到前端以获取 Index.html

前缀路径 /static/* 应该被路由到前端以获取前端所需的任何静态文件，例如 层叠样式表 和 JavaScript 文件强>.

匹配正则表达式 ^.*.(ico|png|jpg)$ 的路径应路由到前端，因为它是页面需要显示的图像。

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

---

另外你可以看看here。

---

如果您还有其他问题，请告诉我。