Goal: Setup HTTPS for my side project that uses React for frontend and Express.js for backend
Progress: I have successfully set up HTTPS for my react app that lives in Amazon s3 via Cloudfront and route53. I did this by attaching the domain name(example.com) to the cloudfront distribution via Route53
Problem: Since my app calls backend express.js hosted via Amazon EC2 via http://ec2-00-00-00.compute-1.amazonaws.com I see mixed content error because the front end app (https) is trying to access ec2 public dns which is http.
I am trying to figure out what would be the best way to setup HTTPS for my backend EC2 server: I have tried nginx - certbot but it didn't work because I do not have a domain name attached to the ec2 public dns address.
I tried creating a subdomain api.example.com, purchased a cert using Amazon Certificate Manager and tried setting up the route 53 cname record for api.example.com to point to the EC2 instance public IP. This is also not working when I try to access the endpoint via https. My security group configurations looks correct.
I am confused about using Load Balancer vs purchasing a new domain, can someone point me in the right direction? Since it is a side project, I don't want to go with the expensive approach but I am open to trying whatever the best practice is.
Thanks in advance!