对于Nginx/Angular应用程序，Istio Ingress路由失败，返回404

Question

我正在istio-ingress网关后面部署带有angular应用程序的Nginx。

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

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

无法识别的内容安全策略指令'https://10.22.33.100">
获取https://tremend.com/styles.63a1fbbeeb253678e456.cssnet:：ERR_ABORTED 404
获取https://tremend.com/runtime-es2015.fd26fadf204671228ade.jsnet:：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

有人能帮忙吗？只是需要一些关于如何解决这个问题的指导。我应该更改angular或ingress virtualservice或nginx配置中的基本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，我考虑了你和里诺的意见。但现在它从"/"并且还路由到前端。然而，其他前缀也会路由到前端，而不是相应的目的地。

/static、/recallback和regex的路径不起作用。因为一旦我添加了它们，我就会得到一个404错误。所以我只加了根"/"用于前端。

Answer 1

我应该在angular或ingress virtualservice或nginx-config中更改基本href吗？

使用rewrite时，需要在虚拟服务中为css和js等依赖项添加路径。

@Rinor在这里解释得很好。

---

这个Istio实践教程很好地解释了它。

让我们分解一下应该路由到Frontend:的请求

精确路径/应该路由到前端以获得Index.html

前缀路径/static/*应路由到前端，以获取前端所需的任何静态文件，如级联样式表和JavaScript文件。

与regex^.*.(ico|png|jpg($匹配的路径应路由到Frontend，因为它是页面需要显示的图像。

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

---

此外，您可以在此处查看。

---

如果您还有任何问题，请告诉我。