Proxy backend through frontend using istio or nginx

Question

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?

You can configure the virtual service to do path-based routing and that's probably a better way to do things (put both services on port 443, correctly configure TLS, and route to front- or back-end based on the URL path). Any of the layers you've identified here can proxy the back-end if you don't want to expose it directly, but if something like a React application is directly calling it, you'll have to expose it in some form. — David Maze

Jakub Jakub · Accepted Answer · 2020-05-08T08:08:58

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:

Proxy backend through frontend using istio or nginx

2 Answers