Cannot connect two ECS services via Service Discovery

I am new to AWS and I am trying to deploy simple app to AWS ECS. I have two simple docker containers, running in ECS Fargate:

‘Frontend’: Vue Js app, which makes a single request to backend;
‘Backend’: Django app, which serves the request;

Both services were launched within the same cluster, in default VPC and the same, single public subnet. For ‘Backend’ I configured Service Discovery: Namespace – test, Service Discovery Name – backend. Security group configured to allow All Traffic.

So, the problem is when frontend makes request:

axios.get('http://backend.test:8000/api/get-test/')

I got error: Failed to load resource: net::ERR_NAME_NOT_RESOLVED backend.test:8000/api/get-test/

However, executing in AWS Cloud9 command: dig +short backend.test returns correct private IP of the backend container.

When I change request to something like

axios.get('http://172.17.3.85:8000/api/get-test/')

where 172.17.3.85 is valid private IP of the backend container, I got following error:

GET http://172.17.3.85:8000/api/get-test/ net::ERR_CONNECTION_TIMED_OUT

However, if I spin out EC2 instance in the same VPC and subnet and SSH to it, I can ping backend container, and requests -

curl -v http://172.17.3.85:8000/api/get-test/

as well as

curl -v http://backend.test:8000/api/get-test/

return desired response.

The only case when everything is working as expected is when the request is like

axios.get('http://3.18.59.133:8000/api/get-test/'),

where 3.18.59.133 is valid Public IP of the backend container.

I would appreciate any suggestion where look further or how to connect two containers via service discovery as right now I am out of ideas.

Solution

Based on the discussion in comments and description of the problem, the reason is that the Frontend’: Vue Js app executes on the client side, for example, in the browser.

This explains all the issues described and discussed:

axios.get('http://backend.test:8000/api/get-test/') does not work as on the client side you can't resolve privte hosted zone.
axios.get('http://172.17.3.85:8000/api/get-test/') does not work because the 172.17.3.85 is valid only in the VPC, not on the client's network.
spin out EC2 instance in the same VPC and subnet and SSH works because private hosted zones can be resolved inside VPC.
axios.get('http://3.18.59.133:8000/api/get-test/') works because public IP can be used on the clinet side, unlike private IPs.