Connecting frontend with backend in minikube

Question

I've got two docker images, one for my frontend which is react and the other flask backend. I tried to deploy both on minikube as a part of my learning path but the frontend does not get any data from my backend.

My cluster contains 4 components: frontend-deployment pod, backend-deployment pod, external load balancer service to route external traffic, internal service to route request to backend pod.

Backend pod & Internal service:

apiVersion: apps/v1
kind: Deployment
metadata:
  name: back-deployment
  labels:
    app: back-flask
spec:
  replicas: 1
  selector:
    matchLabels:
      app: back-flask
  template:
    metadata:
      labels:
        app: back-flask
    spec:
      containers:
      - name: back-flask
        image: <imageOne>
        ports:
        - containerPort: 5000
       
---
apiVersion: v1
kind: Service
metadata:
  name: back-service
spec:
  selector:
    app: back-flask
  ports:
    - protocol: TCP
      port: 7000
      targetPort: 5000

frontend pod & Loadbalancer service:

apiVersion: apps/v1
kind: Deployment
metadata:
  name: front-deployment
  labels:
    app: front-react
spec:
  replicas: 1
  selector:
    matchLabels:
      app: front-react
  template:
    metadata:
      labels:
        app: front-react
    spec:
      containers:
      - name: front-react
        image: react:<imagetwo>
        ports:
        - containerPort: 3000
        env:
        - name: REACT_APP_BACKEND_URL
          value: 'http://back-service:7000'
          
---
apiVersion: v1
kind: Service
metadata:
  name: front-service
spec:
  selector:
    app: front-react
  type: LoadBalancer  
  ports:
    - protocol: TCP
      port: 80
      targetPort: 3000
      nodePort: 30000

then I modified my front api endpoint url from

const response = await fetch('http://127.0.0.1:7000//...', {
...
      })

to

http://back-service:7000//..

but still got no answer from my backend.

any solutions?

First check if backend pod is running. Then enter in the frontend pod and do a curl to the backend service http://back-service:7000 . If it comes positive check the logic in your frontend. If not check if your flask is really running on port 5000. It should be like below: if __name__ == '__main__': app.run(host='0.0.0.0', port=5000) — Klevi Merkuri, Apr 16 '23 at 21:51

score 0 · Answer 1 · answered Apr 16 '23 at 21:27

If you don't use server side rendering but have a regular SPA with React the browser is making the requests, not the app inside the cluster. Check your network tab in the browser. You need to make the backend externally accessible and use that URL for the react app as backend URL.

Depending on how you make it accessible you might need to add CORS headers as well.

Connecting frontend with backend in minikube

1 Answers1