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

Question

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!

Answer 1

The question seems broad but thing can be considered while working with the containers in AWS.

When I do this how do I retrieve the information in my angular app as to what the hostname will be for backend-svc-1?

You need to place Application load balancer on the top of these service and route request based on the hostname or request path to backend services when request route from Frontend application.

A high-level look with existing s3 angular app will be something like

Or will it be communicated to my frontend application via the links array as an environment variable?

Linking is use service for service to communication, for example backend-api want to communicate with Redis then linking suit but while your application is the web you angular application need to backend-api should be reachable from the internet so linking will not work in this but LBalancer will work fine.

I've seen other sites say I should manage my own ECS instances for each service and route the requests via API Gateway.

I prefer ECS when it comes to the container, now ECS offers different flavour like fargate, you do not need to manage or worry about infrastructure.

All you need to create 3 services

• Frontend
• Backend-svc-1
• Backend-svc-2

Place LB on the top of these services that's it. The frontend will use LB endpoint to communaite with backend service and service to service communication can use lining or service discovery.

But if backend-svc are same mean sharing same base code, you can should run two services of each task instead of running two separate containers.

A high-level look will be