Unable to access Backend API from React App in the Browser

Question

I have Frontend(React) and Backend(Fast-API) containers running on ECS in the same Private Subnet. Following my Github Repository

https://github.com/TakehikoEsaka/odekakekun

The Frontend is connected to an ALB, while the Backend is not directly connected. Instead, the Backend has Service Discovery configured.

Checked

• When I execute curl http://backend-servicediscovery.namespace/api/sample-api from the Frontend container, I receive a response. I can see logs indicating that the Backend API was accessed successfully.

Issue

• However, when I try to access http://backend-servicediscovery.namespace/api/sample-api from the browser, I receive the following error in the browser console:

GET http://backend-servicediscovery.namespace/api/sample-api net::ERR_NAME_NOT_RESOLVED"

• Based on the error, it seems like name resolution is failing. Additionally, there are no access logs in the Backend container, suggesting that the API is not being accessed.

Question

• I have looked into Proxy and CORS but couldn't find detailed information. Could you please provide guidance on how to make the Backend API accessible from the browser?

Best Regards

Answer 1

ECS Service discovery only works inside the VPC. ECS Service discovery is only for servers inside your VPC to find each other and communicate with each other.

Your React app is a front-end JavaScript application. It doesn't run in ECS. Your React server on ECS is simply serving up the source code of your React app to the web browser of the visitor. The React app runs in the web browser.

As you currently have your application configured, your React app running in the user's web browser will not be able to communicate with your API server because your API server is not accessible from the Internet. You would need to place a load balancer in front of the API server, or expose it via AWS API Gateway.