Hosting React page on S3 and making REST api calls to server on Elastic Beanstalk

Question

Background

I am trying to deploy a dummy application with React frontend and Django backend interacting via REST api. I have done the following:

• Use a S3 bucket to host static website and deploy my react code to it
• Put Cloudfront for S3 bucket - set up certificate and changed my domain name (from GoDaddy) to link to this address
• Kicked off Elastic Beanstalk environment following the python environment tutorial of AWS
• Set up Postgres RDS and linked the Django server with it

So now I can do the following

• Access my frontend using https via my domain name (https://www.example.com)
• Access django admin site using the path of elastic beanstalk and update items

i.e. each component is up and running

Problem

I am having trouble with:

• Making a secure REST API call from the static page to Elastic Beanstalk environment. Before I set up certificates I could easily make REST API calls.
• The guides I can find usually involve putting a domain name for Elastic Beanstalk, which I imagine does not apply to my case (or does it?)
• I tried to follow this faq and updated configuration in load balancer that accepts 443 https and redirects to 80 http. But I am using same certificate as from CloudFront, which does not sound right to me.

Would appreciate help with

• how to solve the above ssl connection issue
• or is there a better architecture for what I'm trying to achieve here?

According to Request a certificate in ACM for Elastic Beanstalk backend, it sounds like I have to use a subdomain and request a certificate for that subdomain, and use Cloud 53 to direct requests to that subdomain to Elastic Beanstalk environment. Would that be the case?

Thank you in advance!

Answer 1

By default EB url will HTTP only. To use HTTPS you need to deploy SSL certificate on your ALB.

In order to do that you need a custom domain, because you can only associated an SSL certificates with domains that you control. Thus, normally you would get a domain (you seem to already have one from godaday). So in this case you can setup a subdomain (e.g. api.my-domian.com) on godady. Then you can use AWS ACM to register a free public SSL certificate for api.my-domian.com.

Once the certificate is verified, using either DNS (easier) or email technique, you deploy it on your ALB using HTTPs listener. Obviously you will need to point api.my-domian.com to the EB's https url. You can also redirect on your ALB http traffic from port 80 to 443 to always use https.

Then in your front-end application you only use https://api.my-domian.com, not the original EB url.

There can be also CORS issues alongside this, so have to be vary of them as well.