My kubernetes deployed react front end is failing to connect to my api. Both are containerized applications deployed with kubectl locally with minikube, along with services, but when I navigate to my deployed (minikube) react front end, it fails to connect to the backend api.
The reason this is strange is because when I exec into the pods, I am able to curl http://{backend-service}/ from the front end, and vice versa just fine. But the react app still somehow fails the same request.
Any advice or ideas would be appreciated!
kubectl frontend deployment failing backend request
Please see the following yaml files that describe the application;
backend-deployment.yaml
apiVersion: apps/v1
kind: Deployment
metadata:
name: diagnosy-backend
namespace: diagnosy
spec:
replicas: 1
selector:
matchLabels:
app: diagnosy-backend
template:
metadata:
labels:
app: diagnosy-backend
spec:
containers:
- name: diagnosy-backend
image: asia-docker.pkg.dev/multi-cloud-app-413619/gcr-asia-repo/diagnosy/api:1.0.5
ports:
- containerPort: 3001
imagePullPolicy: Never
backend-service.yaml
apiVersion: v1
kind: Service
metadata:
name: diagnosy-api
namespace: diagnosy
spec:
selector:
app: diagnosy-backend
ports:
- protocol: TCP
port: 3001
targetPort: 3001
type: LoadBalancer
frontend-deployment.yaml
apiVersion: apps/v1
kind: Deployment
metadata:
name: diagnosy-frontend
namespace: diagnosy
spec:
replicas: 1
selector:
matchLabels:
app: diagnosy-frontend
template:
metadata:
labels:
app: diagnosy-frontend
spec:
containers:
- name: diagnosy-frontend
image: asia-docker.pkg.dev/multi-cloud-app-413619/gcr-asia-repo/diagnosy/webapp:1.0.3
ports:
- containerPort: 3000
imagePullPolicy: Never
env:
- name: DIAGNOSY_API_HOST
valueFrom:
configMapKeyRef:
name: diagnosy-configmap
key: backend_host
- name: DIAGNOSY_API_PORT
valueFrom:
configMapKeyRef:
name: diagnosy-configmap
key: backend_port
frontend-service.yaml
apiVersion: v1
kind: Service
metadata:
name: diagnosy-webapp
namespace: diagnosy
spec:
selector:
app: diagnosy-frontend
ports:
- protocol: TCP
port: 3000
targetPort: 3000
type: LoadBalancer
configmap.yaml
apiVersion: v1
kind: ConfigMap
metadata:
name: diagnosy-configmap
namespace: diagnosy
data:
backend_host: diagnosy-api
backend_port: "3001"
database_host: mongodb-service
database_port: "27017"
>Solution :
Your frontend isn’t using DNS from K8s. If you want it to be able to call services using their service names, you’ll need to run a server and proxy those calls. Otherwise, you need to expose the services (behind a LB or Ingress, with a domain). Those requests come from the browser, not inside the cluster, so they have no access to internal DNS.