如何解决Nginx / Angular应用的Istio Ingress路由失败并显示404
我正在istio Ingress网关后面部署带有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'。
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;"]
Virtualservice 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 config中更改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和regex的路径不起作用。因为一旦添加它们,我只会收到404错误。所以我只为前端添加了根“ /”。
解决方法
是否应该在angular或入口virtualservice或nginx配置中更改base-href?
使用重写时,您需要在虚拟服务中为依赖项(例如css和js)添加路径。
@Rinor here对此做了很好的解释。
此Istio in practise教程对此进行了很好的解释。
让我们分解应该路由到前端的请求:
确切路径 /应该路由到Frontend以获得Index.html
前缀路径 / static / *应该路由到Frontend以获得前端所需的任何静态文件,例如级联样式表和 JavaScript文件。
与正则表达式^。*。(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
此外,您还可以看看here。
让我知道您是否还有其他问题。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。