Amazon Web Services Question posted in
The official Amazon Web Services documentation can be found here.

Amazon web services – How to Access API on Private Subnet from React App through Application Load Balancer in AWS VPC?

Please refer to the VPC design image below.

https://i.sstatic.net/JpZCLQO2.png

I’m working on a React web application hosted on AWS, with the following architecture:

React Web App: Hosted on an EC2 instance in a private subnet, accessible via an Application Load Balancer (ALB) and through Bastion 1 using SSH.

Flask API Server: Hosted on another EC2 instance in a different private subnet, accessible only through Bastion 2 using SSH.

Objective: The React app needs to send HTTP requests to the Flask API instance.

I currently face a few challenges:

  1. Network Configuration: When I try to request the API from the React app using http://$api-private-ip/api/, the request fails, as the private IP is only accessible within the VPC.

  2. Validation: When I SSH into the web instance and run curl $api-private-ip/api/, I receive a valid response from the API server. However, the request hangs when I attempt it through the browser.

Questions:

  1. What URL should I use to make requests to the API from the React app, considering both instances are on private subnets?

  2. Is there a way to route the request through the ALB or another mechanism?

  3. Does my current design meet best practices, or should I consider an alternative approach to enable secure communication between the client and API?

Tags:

2

Answers


  1. 0
    1. Infrastructure Setup on AWS
      a. VPC Configuration
      Create a VPC with both public and private subnets.
      Configure route tables: Public subnets should have a route to an Internet Gateway, while private subnets should route through a NAT Gateway.
      b. Setup Your API
      Deploy your API on EC2 instances or a service like AWS Lambda within the private subnet.
      Ensure that the security group associated with your API allows inbound traffic from the ALB.
      c. Create an Application Load Balancer
      Create an ALB in the public subnet of your VPC.
      Configure the ALB to route traffic to the targets (EC2 instances or Lambda functions) that host your API located in the private subnet.
      Ensure that the ALB’s security group allows inbound traffic on the listener port.
      d. Set Up Target Groups
      Create target groups that include your API instances.
      Specify health check settings for your API to ensure the load balancer only routes traffic to healthy instances.
    2. Security Considerations
      Security Groups: Make sure that the security group of the ALB allows incoming traffic on the necessary ports (HTTP/HTTPS), and the API’s security group allows incoming traffic from the ALB’s security group.
      Network ACLs: Ensure the Network ACLs associated with your subnets allow the necessary traffic.
    3. Configuring Your React App
      a. Environment Configuration
      Store the ALB URL in your React app’s environment configuration. This is typically done in an .env file or a configuration file.
      b. Making API Calls
      In your React app, use the stored environment variable to make API calls. You can use libraries like axios or the native fetch method.
    4. Testing and Monitoring
      Testing: Make sure to test your React application to verify that it can successfully communicate with the API through the ALB.
      Monitoring: Use AWS CloudWatch to monitor the Application Load Balancer and the health of your targets to ensure traffic is routed correctly.
    5. Additional Considerations
      CORS: If your React application is hosted on a different domain than your API, you may need to configure CORS (Cross-Origin Resource Sharing) on your API to allow traffic from your React app’s domain.
      SSL/TLS: For production environments, it’s recommended to setup HTTPS for your API through ALB to encrypt the data in transit. AWS provides options for SSL certificates through AWS Certificate Manager (ACM).
      Scaling and Load Testing: Consider the capacity of your instances behind the ALB, and conduct load testing to ensure they handle the expected traffic.
      By structuring your AWS setup as described, your React app should be able to access the API securely and efficiently through the Application Load Balancer.
    Login or Signup to reply.
  2. 0

    let’s breakdown why this is happening:

    1 – Frontend and backend interaction via Browser:
    The react app is built and served from the web server (EC2 for your case). However, once it’s loaded into the user’s browser, it runs client-side on the user’s machine. So when the react app makes a request. that HTTP request originates from the user’s browser not from the server where the react app was hosted.

    2 – Why Backend can’t be in private subnet alone:
    If the backend is in private subnet, it has no direct exposure to the internet . which means: only resources in the same VPC can communicate with it, that’s why the user browser will have no access to it.

    So, the Solution for this Public facing ALB with backend in the Private Subnet.

    • Deploy a public-facing Application Load Balancer (ALB).

    • The ALB sits in a public subnet and forwards requests to the Flask API in the private subnet.

    • The React app in the browser can now send requests to the ALB’s public DNS.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search