How to Send a GET Request from AWS Amplify to an EC2 Machine

Learn how to successfully send GET requests from your AWS Amplify frontend to a Node.js backend hosted on Amazon EC2, including important considerations for HTTPS and SSL configurations.
---
This video is based on the question https://stackoverflow.com/q/68967264/ asked by the user 'Asurii' ( https://stackoverflow.com/u/15606226/ ) and on the answer https://stackoverflow.com/a/68969071/ provided by the user 'jscott' ( https://stackoverflow.com/u/223432/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Send GET request from Amplify service to EC2 machine

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Send a GET Request from AWS Amplify to an EC2 Machine

Deploying a web application can seem overwhelming, especially when you're trying to connect different parts of your stack securely. If you're using AWS Amplify for your frontend and have a Node.js backend on an EC2 instance, you might run into issues related to HTTPS requests, especially given the stringent security policies of modern web browsers. This guide will guide you through the common challenges faced and the solutions you can implement to resolve them.

Understanding the Problem

When working locally, your frontend smoothly communicates with your Express backend using http://localhost/db. However, when you try to access your backend deployed on an EC2 instance, you experience the following error:

"was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint. This request has been blocked."

This message indicates that your frontend served over HTTPS is trying to connect to an insecure HTTP endpoint. This behavior is common as browsers enforce Mixed Content policies to maintain security standards.

Why is HTTPS Necessary?

Here's a brief overview of why HTTPS is essential for your application:

Security: HTTPS encrypts the data exchanged between your frontend and backend, protecting against eavesdropping and man-in-the-middle attacks.

Browser Compatibility: Browsers block requests made from HTTPS pages to HTTP endpoints to prevent security issues.

Trust: Users expect secure connections, especially when dealing with sensitive information.

To resolve the issue, we need to ensure that all parts of your application communicate over secure connections.

Solutions to Allow GET Requests to Your EC2 Instance

You have several options to establish a secure connection from AWS Amplify to your EC2 backend:

1. Install an SSL Certificate on Your EC2 Instance

To create a secure connection directly to your EC2 instance:

Obtain an SSL certificate from a trusted Certificate Authority (CA) like Let's Encrypt.

Set up the certificate on your EC2 server. A self-signed certificate will not work, as browsers will not trust it.

Note: You will need a registered domain for the SSL certificate.

2. Use an Application Load Balancer (ALB)

You can place an Application Load Balancer in front of your EC2 instance, which will handle HTTPS traffic:

Set up an ALB with a secure listener.

Obtain an SSL certificate through AWS Certificate Manager (ACM).

Point the ALB to your EC2 instance, allowing it to forward HTTP requests securely.

3. Deploy Your Backend through AWS Amplify

If you prefer an easy and integrated solution:

AWS Amplify provides a straightforward way to deploy your backend as well.

This approach gives you a secure API endpoint under the awsamazon.com domain, eliminating the need to manage certificates or connections manually.

Conclusion

There are multiple ways to establish a secure connection between your AWS Amplify frontend and your EC2 backend. While you can work around the Mixed Content issue during development, understanding how to properly configure HTTPS for production is critical for security and reliability. Whether you choose to install an SSL certificate directly on your EC2 instance, use an ALB, or leverage AWS Amplify for your backend, each solution has its advantages. Choose the one that best fits your application's needs.

By following these steps, you'll be able to successfully set up secure communication for your web application. If you're new to any of these processes, take your time to explore the documentation and resources available for each option.

Final Thoughts

As you continue with your web development journey, understanding the importance of