How to communicate Frontend Angular Application and Multiple Backend APIs in AWS?

I am still new to AWS and am currently attempting to deploy my application utilizing AWS Elastic Beanstalk. I have 4 backend APIs that are available on my private Dockerhub and I have one frontend API that should communicate with these 4 backend microservices. I am able to deploy the 4 backend services to AWS Elastic Beanstalk by following the guide located here. My main problem or the part that I am failing to understand is how to get my frontend application to communicate with these 4 other services?

The current option I am looking into is adding my frontend angular application to the Dockerrun.aws.json so that my json file will look something like what you see below:

{
  "AWSEBDockerrunVersion": 2,
  "volumes": [
    {
      "name": "backend-svc-1",
      "host": {
        "sourcePath": "/var/app/current/backend-svc-1"
      }
    },
        {
      "name": "backend-svc-2",
      "host": {
        "sourcePath": "/var/app/current/backend-svc-2"
      }
    },
    {
      "name": "angular-frontend-app",
      "host": {
        "sourcePath": "/var/app/current/angular-frontend-app"
      }
    }
  ],
  "containerDefinitions": [
    {
      "name": "angular-frontend-app",
      "image": "angular-frontend-app",
      "environment": [
        {
          "name": "Container",
          "value": "angular-frontend-app"
        }
      ],
      "essential": true,
      "memory": 128,
      "portMappings": [
        {
          "hostPort": 80,
          "containerPort": 4200
        }
      ],
      "links": [
        "backend-svc-1",
        "backend-svc-2"
      ]
    },
    {
      "name": "backend-svc-1",
      "image": "backend-svc-1",
      "environment": [
        {
          "name": "Container",
          "value": "backend-svc-1"
        }
      ],
      "essential": true,
      "memory": 128,
    }
    {
      "name": "backend-svc-2",
      "image": "backend-svc-2",
      "environment": [
        {
          "name": "Container",
          "value": "backend-svc-2"
        }
      ],
      "essential": true,
      "memory": 128
    }
  ]
}

When I do this how do I retrieve the information in my angular app as to what the host name will be for backend-svc-1? For example if in my angular application I make a call to http://backend-svc-1/endpoint, what does this url turn out to be when deployed? Should I hardcode the value? Or will it be communicated to my frontend application via the links array as an environment variable?

Also what is your suggestion on how to best implement my proposed architecture? I’ve read a lot of articles where some say I should host my Angular App as a Static site in S3 and route my requests via API Gateway. I’ve seen other sites say I should manage my own ECS instances for each service and route the requests via API Gateway. So overall I’m a little bit confused on how to use AWS and I’m hoping someone can provide me with any guidance in this matter.

Thank you in advance!

Source: StackOverflow