Problem when subfoldering React app + Angular app using Ingress Gateway

Question

Im having problems when trying to access webapp frontends through Istio Gateway in minikube. I've configured ingress gateway to serve Angular frontend (minikube_ip:31380/home) and to serve React frontend (minikube_ip:31380/app) but when I try to access I get 404 files not found (css, assets, main.js, bundle.js, etc) --> 404 Error Screenshot

I've tried to write --base-href /app in build command, "homepage": "." in package.json, "homepage": "/app" in package.json and nothing changed.

The only thing that changed the http response was the following tag in index.html (Angular):

  <base href="/home/">

index.html (React):

  <base href="/app/">

And the result was the next one: Angular App --> 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;
  }

}

My Istio-Ingress-Rules:

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

MAIN PROBLEM:

Finally, add that I've changed the mode of showing both frontends from Ingress Gateway to NodePort and accessing by NodePort they show well (e.g: minikube_ip:31040).

Thanks in advance.

Did you enable istio injection on your default namespace? kubectl get namespace -L istio-injection — Jakub
As per your screens Istio is responding properly with the 200 status. Please take a look for nginx conf explanation especially for try_files $uri $uri and fall back option (it looks like app is responding using default index.html because first two condition weren't met like home/index.html or app/index.html — Mark

kishorebjv kishorebjv · Accepted Answer · 2019-11-14T07:05:11

Try modifying your ingress objects rewrite-target & path as below:

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

and make sure you checked this documentation

Once you tried this let me know.

Problem when subfoldering React app + Angular app using Ingress Gateway

2 Answers