Connecting an AWS Amplify frontend with a EC2 instance?

Question

So, I'm working on a hackathon project right now, and for the demo, I've spun up a NodeJS Express server on an EC2 via Elastic Beanstalk. When testing the server's API with our front-end locally, it worked perfectly fine.

Now we've deployed our front-end to AWS Amplify, setup a domain name in Route53, and hooked everything up. When we go to the domain, our front-end looks great, but when we try using the functionality that would connect to our server's API, we get a net::ERR_SSL_PROTOCOL_ERROR .

Doing some research, it looks like(?) that we have to setup a certificate on the Classic Load Balancer that's in front of the EC2. So I requested a certificate, and created a listener on the Load Balancer as follows:

Load Balancer Protocol	Load Balancer Port	Instance Protocol	Instance Port
HTTPS	443	HTTPS	3000

But now I realize that if setup this way, I still have no idea how to point the React Frontend's API calls to the Load Balancer instead of the EC2, or whether the listener is setup correctly. Would anyone have an idea of what steps we should take here?

For the details of the app, the backend is a pretty straightforward Express App with CORS enabled, and the frontend is a fairly standard React project, nothing special about either of them.

Answer 1

Instance Protocol should be HTTP. So your setup uses HTTPS only between client and CLB:

Client--- (HTTPS) ---> CLB --- (HTTP) ---> EC2

Also for properly setup HTTPS, you need to use your own domain. You can't use default domain provided by EB for your application.