How do you connect an S3 hosted frontend to a Elastic beanstalk hosted backend?

Question

I have run npm build on my react app and have opened an S3 bucket on AWS, changed it to become a static website host, and have uploaded the contents of the react build folder into it. I'm now able to access the frontend part.

My backend, running on node & express, is in a different package alltogether. Throughout development I ran both "nodemon app" and "npm start" separately and connected the two through a proxy.

I have used Elastic Beanstalk before to run a webapp, but the whole package was in one before and I never had to connect 2 server instances, so I'm lost as to how I can have the frontend send POST requests and connect to the websockets from S3 to EBS.

For example, my frontend connected to the backend during development with this:

endpoint: 'http://localhost:3000'
this.state.io = socket.connect(this.state.endpoint);

Do I now change that to the domain name of the EBS instance?

I also use Axios for my POST requests. How does the frontend know to connect to my EBS specifically?

Any help would be appreciated, thank you.

Answer 1

Set the endpoint to the domain where your API is hosted. That should be Elastic Beanstalk. To avoid CORS issues, it'd be easier if you set it all up under one domain. You would probably need CloudFront for that, or you can take a shortcut and have Apache on your Elastic Beanstalk proxy requests to S3.