Change Node js server (on elastic beanstalk AWS) url to HTTPS

Question

I am trying to deploy my React js app using an AWS s3 bucket. However, I am fairly new to AWS and am having quite a difficult time. This react app communicates with a node / express server, which is hosted on an elastic beanstalk environment. I previously had the following error:

Mixed Content: The page at 'https://myReactApp.s3.amazonaws.com/index.html' was loaded over HTTPS, but requested an insecure resource 'http://myElasticBeanstalkServer.us-east-1.elasticbeanstalk.com/signIn?username=lsharon&password=test4321'. This request has been blocked; the content must be served over HTTPS.

I began the process of trying to figure out how to "convert" my EB url into HTTPS. I found lots of information about obtaining an ssl certificate. I am pretty confused on the whole process. Here is what I did:

1. I do have a domain name, registered through google domains. I used it to obtain an ssl certificate. My ssl certificate is verified through the AWS certificate manager console. However, I am a bit confused how this relates to my node server which is hosted on elastic beanstalk. I connect to this API using the EB url...not my domain name. How can I use my ssl certificate to secure my server url?
2. I did find a little info about creating a hosted zone in Route 53, as well as adding 443 ports on the load balancer in my elastic beanstalk environment. However, I got lost pretty quickly. Do I just use a 443 listener in the EB environment, or do I also need a 443 process? Could someone explain this to me? Also, relating to the Route 53 hosted zone, do I create the hosted zone using my domain name, or my API (elastic beanstalk) url? And when I create an alias, where do I route the traffic to? My domain name, my EB url, or my s3 bucket?

Currently, when I load my static web page in the browser, it renders fine and says secure. However, when I click one of my buttons (therefore sending a fetch request to my EB url), it ALSO works but changes to insecure and says my ssl is insecure.

I do apologize for all the questions. I just feel rather lost and seem to be finding lots of information but can't seem to make it work quite right. If anyone could help me out, I sure would appreciate it.

Answer 1

To answer your first question, you have to setup DNS somewhere, either in your Google Domains account or in Route53 depending on who you want to use as your DNS host, pointing the domain name to the load balancer.

I connect to this API using the EB url...not my domain name. How can I use my ssl certificate to secure my server url?

You have to change your front-end application to use the domain that matches the SSL certificate when making API calls (and also use https instead of http for those API calls). There is no other option if you want the web browser to stop complaining about these security issues.

To answer your second question, SSL certificates in AWS Certificate Manager can be attached to a load balancer which will handle terminating the SSL for you. The load balancer can still communicate with the EC2 instance using non-encrypted HTTP. So all you need to do is attach the SSL certificate to the port 443 listener in the load balancer.