Problem with connecting frontend and backend services through internal load balancer

Frontend and backend service seem to be working fine separately on its own, but when I try to communicate between frontend and backend I keep getting ERR_NAME_NOT_RESOLVED error.

• Service discovery are all connected
• All security groups are open

I think our architecture is very similar to this if that helps.
(https://mohamedwaelbenismail.medium.com/microservices-architecture-deployed-on-ecs-fargate-based-cluster-using-cloudformation-878cb6f90571)

• It only works if we change the internal load balancer to public load balancer allow internet traffic and allow 0.0.0.0/0.

• Status of health check are all 'healthy'

Based on your schematic illustration, your React web application front end will never be able to reach your backend. Your front end executes on a client side in their browsers/mobiles. This means that the only way to reach backend is through internet. So your backend can't be in a private subnet behind an internal load balancer.

You have to re-architect your application. Both frontend and backund must be accessible from the internet, for your front end to be able to query the backend.