AWS: Three-tier architecture (ECS Fargate), how to send traffic from frontend to backend?

Question

I have an app structured as follows:

Public subnet: Internet-facing load balancer with HTTPS listener (www.domainname.com)

Private subnet 1: Containerized React app served by Nginx, deployed with ECS Fargate, receiving traffic from Load Balancer

Private Subnet 2: Internal Load Balancer sitting in front of Node.js Backend api running on port 3000, also deployed with ECS Fargate.

While the website is accessible at the given domain, I'm struggling to understand how to get the frontend to communicate with the backend. I'm not talking about assigning rules to security groups or NACLs but how to get traffic to go from the former to the latter?

Jainam · Accepted Answer

To enable communication between your frontend and backend in this three-tier ECS Fargate architecture:

1. Create a private DNS record in Route 53 (e.g., api.internal.yourdomain.com) pointing to your internal load balancer.

2. In your React application, configure API calls to use this internal DNS:
```javascript
// Using environment variables
const API_URL = process.env.REACT_APP_API_URL;
// Example API call
fetch(`${API_URL}/users`)
```

3. Configure Nginx in your frontend container to proxy API requests:
```nginx
location /api/ {
    proxy_pass https://api.internal.yourdomain.com;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
}
```

Now, when your React app makes API calls to `/api/*`, Nginx will proxy these requests to your internal load balancer, which forwards them to your backend service.

re:Post Agent · Answer

To enable communication between your frontend and backend in a three-tier architecture using ECS Fargate, you'll need to set up an internal Application Load Balancer (ALB) for your backend service. Here's how you can structure the communication:

1. Frontend to Backend Communication:
   - Create an internal ALB in your private subnets to route traffic to your backend service.
   - Configure a target group for your backend ECS Fargate service, using the container port (3000 in your case).
   - Set up a listener on the internal ALB (typically on port 80 or 443).

2. Frontend Configuration:
   - In your React app, configure the API endpoint to use the DNS name of the internal ALB.
   - For example, set an environment variable like REACT_APP_API_URL to the internal ALB's DNS name.

3. Service Discovery:
   - Use the internal ALB's DNS name as the endpoint for your backend service.
   - This allows your frontend to communicate with the backend without needing to know the specific IP addresses of the backend containers.

4. Security Groups:
   - Ensure the frontend's security group allows outbound traffic to the backend's security group.
   - Configure the backend's security group to allow inbound traffic from the frontend's security group on the necessary port (3000 in your case).

5. Network Configuration:
   - Both frontend and backend tasks should be in private subnets.
   - Use NAT Gateway for outbound internet access if required by your backend.

By following this setup, your frontend containers can send requests to the backend via the internal ALB, which will then route the traffic to the appropriate backend containers. This approach provides scalability and maintains the separation between your application tiers while allowing them to communicate effectively within your VPC.  
**Sources**  
[Use an Application Load Balancer for Amazon ECS - Amazon Elastic Container Service](https://docs.aws.amazon.com/AmazonECS/latest/developerguide/alb.html)  
[Use load balancing to distribute Amazon ECS service traffic - Amazon Elastic Container Service](https://docs.aws.amazon.com/AmazonECS/latest/developerguide/service-load-balancing.html)  
[Deploy a three tier web application using Code pipeline ( EC2 as well as with ECS) | AWS re:Post](https://repost.aws/questions/QU1yJBE_9YS4qQq9BSVaRyWg/deploy-a-three-tier-web-application-using-code-pipeline-ec2-as-well-as-with-ecs)

AWS: Three-tier architecture (ECS Fargate), how to send traffic from frontend to backend?

Add your answer

Relevant content