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
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.
If you dont want to use @kishorebjv's solution another way would be to make the change in the nginx.conf
itself.
location /home/?(.*) {
try_files $1 $1/ /index.html =404;
}
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.