gpt4 book ai didi

angular - Nginx/Angular 应用程序的 Istio Ingress 路由失败并显示 404

转载 作者:行者123 更新时间:2023-12-04 03:58:39 30 4
gpt4 key购买 nike

我正在 istio 入口网关后面部署带有 Angular 应用程序的 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.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

有人可以帮忙吗?只需要一些关于如何解决这个问题的指导。我应该更改 Angular 或入口虚拟服务或 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 错误。所以我只为前端添加了根“/”。

最佳答案

Should i change the base-href in angular or ingress virtualservice or nginx config?

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

@Rinor 解释得很好 here .


Istio in practise教程解释得很好。

Let’s break down the requests that should be routed to Frontend:

Exact path / should be routed to Frontend to get the Index.html

Prefix path /static/* should be routed to Frontend to get any static files needed by the frontend, like Cascading Style Sheets and JavaScript files.

Paths matching the regex ^.*.(ico|png|jpg)$ should be routed to Frontend as it is an image, that the page needs to show.

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

另外你可以看看here .


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

关于angular - Nginx/Angular 应用程序的 Istio Ingress 路由失败并显示 404,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63455134/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com