使用Ingress Gateway对React app + Angular app进行子文件夹化时出现问题

尝试通过minikube中的Istio Gateway访问Webapp前端时遇到问题。我已经配置了入口网关来服务Angular前端(minikube_ip:31380 / home)和服务React前端(minikube_ip:31380 / app),但是当我尝试访问时,我却找不到404文件(css,assets,main.js, bundle.js等)-> 404 Error Screenshot

我尝试在构建命令“ homepage”:“。”中编写--base-href / app。在package.json中,“首页”:在package.json中为“ / app”,没有任何变化。

唯一更改http响应的是index.html(角度)中的以下标记:

  <base href="/home/">

index.html(反应):

  <base href="/app/">

结果是下一个:    Angular应用-> Angular project error    React App-> React project error

nginx.conf:

server {

  listen 80;

  sendfile on;

  default_type application/octet-stream;


  gzip on;
  gzip_http_version 1.1;
  gzip_disable      "MSIE [1-6]\.";
  gzip_min_length   1100;
  gzip_vary         on;
  gzip_proxied      expired no-cache no-store private auth;
  gzip_types        text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
  gzip_comp_level   9;


  root /usr/share/nginx/html;


  location / {
    try_files $uri $uri/ /index.html =404;
  }

}

我的Istio-Ingress规则:

apiVersion: networking.istio.io/v1alpha3
kind: Gateway
metadata:
  name: ingress-gateway-configuration
spec:
  selector:
    istio: ingressgateway
  servers:
  - port:
      number: 80
      name: http
      protocol: HTTP
    hosts:
    - "*" 
---
kind: VirtualService
apiVersion: networking.istio.io/v1alpha3
metadata:
  name: virtual-service
  namespace: default
spec:
  hosts:  
    - "*"
  gateways:
    - ingress-gateway-configuration

  http:

  - match:
    - uri:
        prefix: /app
    route:
    - destination:
        host: webapp-service
        subset: app

  - match:
    - uri:
        prefix: /home
    route:
    - destination:
        host: webapp-service
        subset: home


---
kind: DestinationRule
apiVersion: networking.istio.io/v1alpha3
metadata:
  name: destination-rule
  namespace: default
spec:
  host: webapp-service
  subsets:
    - labels:
        version: home
      name: home
    - labels:
        version: app
      name: app

主要问题:

使用Ingress Gateway对React app + Angular app进行子文件夹化时出现问题

最后,补充一点,我已经更改了显示两个前端的模式,这些前端从Ingress Gateway到NodePort,并通过NodePort访问它们显示得很好(例如minikube_ip:31040)。

谢谢。

xu741852963 回答:使用Ingress Gateway对React app + Angular app进行子文件夹化时出现问题

尝试如下修改您的入口对象的重写目标和路径:

   nginx.ingress.kubernetes.io/rewrite-target: /$1
          path: /(.*)

并确保您已选中此documentation

一旦您尝试过此操作,请告诉我。

,

如果您不想使用@kishorebjv的解决方案,另一种方法是对nginx.conf本身进行更改。

  location /home/?(.*) {
    try_files $1 $1/ /index.html =404;
  }
本文链接:https://www.f2er.com/3107720.html

大家都在问