I'm trying to figure out the best way to integrate Istio into my app, which consists of a React frontend (served by Nginx) and a Django Rest Framework API. I was able to get it to work using the following nginx config and istio-specific kubernetes files:
server {
listen 80;
root /app/build;
location / {
try_files $uri $uri/ /index.html;
}
}
# Source: myapp/gateway.yaml
apiVersion: networking.istio.io/v1alpha3
kind: Gateway
metadata:
name: myapp-gateway
spec:
selector:
istio: ingressgateway # use istio default controller
servers:
- port:
number: 80
name: http
protocol: HTTP
hosts:
- '*'
- port:
number: 443
name: https
protocol: HTTP
hosts:
- '*'
---
# Source: myapp/virtual-service.yaml
apiVersion: networking.istio.io/v1alpha3
kind: VirtualService
metadata:
name: myapp
spec:
hosts:
- '*'
gateways:
- myapp-gateway
http:
- match:
- port: 80
route:
- destination:
host: frontend-svc
port:
number: 80
- match:
- port: 443
route:
- destination:
host: backend-svc
port:
number: 8000
And the frontend can hit the backend at localhost:443. Note, I'm serving the backend on port 443 (instead of 8000) because of some issue regarding the istio gateway not working with any port other than 80 and 443.
Regardless, this approach exposes BOTH the frontend and backend outside of the cluster, which feels like overkill. Is there anyway to set this up so only the frontend is exposed explicitly and I can proxy the backend through the frontend? Either using istio or nginx?
I may be way off here but sounds like this may be tricky because the client is making the call to the backend. I'd have to figure out a way to make the call inside of the cluster and return it back to the client?
As far as I understand it should work like this.
user -> istio ingressgateway -> istio virtual service -> frontend service -> nginx -> backend service
Istio virtual service should look like this, so only the frontend is exposed and then you configure your nginx to proxy the backend through the frontend.
apiVersion: networking.istio.io/v1alpha3
kind: VirtualService
metadata:
name: myapp
spec:
hosts:
- '*'
gateways:
- myapp-gateway
http:
- route:
- destination:
host: frontend-svc
port:
number: 80
For start I would advise to take a look at kubernetes documentation about Connect a Front End to a Back End Using a Service, and more specifically look at the nginx configuration which connect the frontend with backend service.
And some django + react tutorials which might help:
Finally figured this out by doing path-based routing (thanks @DavidMaze for the helpful comment):
# Source: myapp/gateway.yaml
apiVersion: networking.istio.io/v1alpha3
kind: Gateway
metadata:
name: myapp-gateway
spec:
selector:
istio: ingressgateway # use istio default controller
servers:
- port:
number: 80
name: http
protocol: HTTP
hosts:
- '*'
---
# Source: myapp/virtual-service.yaml
apiVersion: networking.istio.io/v1alpha3
kind: VirtualService
metadata:
name: myapp
spec:
hosts:
- '*'
gateways:
- myapp-gateway
http:
- match:
- uri:
prefix: '/api'
route:
- destination:
host: backend-svc
port:
number: 8000
- route:
- destination:
host: frontend-svc
port:
number: 80