<p>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:</p>

<pre><code>server {
    listen 80;
    root /app/build;

    location / {
        try_files $uri $uri/ /index.html;
    }
}
</code></pre>

<pre><code># 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
</code></pre>

<p>And the frontend can hit the backend at <code>localhost:443</code>. Note, I'm serving the backend on port 443 (instead of 8000) because of <a href="https://github.com/istio/istio/issues/7242" rel="nofollow noreferrer">some issue regarding the istio gateway not working with any port other than 80 and 443</a>.</p>

<p>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?</p>

<p>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?</p>

<p>As far as I understand it should work like this.</p>

<pre><code>user -&gt; istio ingressgateway -&gt; istio virtual service -&gt; frontend service -&gt; nginx -&gt; backend service
</code></pre>

<p>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.</p>

<pre><code>apiVersion: networking.istio.io/v1alpha3
kind: VirtualService
metadata:
  name: myapp
spec:
  hosts:
    - '*'
  gateways:
    - myapp-gateway
  http:
  - route:
    - destination:
        host: frontend-svc
        port:
          number: 80
</code></pre>

<hr>

<p>For start I would advise to take a look at kubernetes documentation about <a href="https://kubernetes.io/docs/tasks/access-application-cluster/connecting-frontend-backend/" rel="nofollow noreferrer">Connect a Front End to a Back End Using a Service</a>, and more specifically look at the <a href="https://kubernetes.io/docs/tasks/access-application-cluster/connecting-frontend-backend/#creating-the-frontend" rel="nofollow noreferrer">nginx configuration</a> which connect the frontend with backend service.</p>

<hr>

<p>And some django + react tutorials which might help:</p>

<ul>
<li><a href="https://medium.com/@gazzaazhari/django-backend-react-frontend-basic-tutorial-6249af7964e4" rel="nofollow noreferrer">https://medium.com/@gazzaazhari/django-backend-react-frontend-basic-tutorial-6249af7964e4</a></li>
<li><a href="https://blog.miguelgrinberg.com/post/how-to-create-a-react--flask-project" rel="nofollow noreferrer">https://blog.miguelgrinberg.com/post/how-to-create-a-react--flask-project</a></li>
<li><a href="https://felipelinsmachado.com/connecting-django-reactjs-via-nginx-using-docker-containers/" rel="nofollow noreferrer">https://felipelinsmachado.com/connecting-django-reactjs-via-nginx-using-docker-containers/</a></li>
<li><a href="https://github.com/felipelm/django-nginx-reactjs-docker" rel="nofollow noreferrer">https://github.com/felipelm/django-nginx-reactjs-docker</a></li>
</ul>
