In AWS - Subdomain with SSL Certificate doesn't work in RESTful call

Question

I have an AWS Amplify instance to launch a REACT app I have. It also has an SSL Certificate, so I can access the app on the browser by entering: https://myreactapp.com (not my real app url, just an example)

I have a web servlet running on an Elastic Beanstalk instance that doesn't have SSL certificate, and my REACT app interfaces to it with this code snippet I have:

    var myObject = {
        data1: this.state.data1,
        data2: this.state.data2
    }


    $.ajax({
        type: "POST",
        url: 'http://<my-backend-webservices-app>.us-east-1.elasticbeanstalk.com/doSomething', // works only from React app when running on local machine (http://localhost:3000), not from https url
        contentType: 'application/x-www-form-urlencoded; charset=utf-8',
        data: myObject,
        success: function(response) {
          console.log('success -- ' + response);  
        },
        function(errMsg) {
            alert('Major Error');
        }
    }); 

This code works fine and I get a response from my my-backend-webservices-app when I run my React App locally on my machine. Since when I use it locally the react app is on http://localhost:3000 (notice its not an https) and its talking to the Elastic Beanstalk instance which is also on http.

But when I run my React app from the AWS Amplify with SSL certificate it complains that a RESTFul request from HTTPS can't communicate to http url. Here's the error from the browser:

jquery.js:8676 Mixed Content: The page at 'https://master.<.....>.amplify<...>.com/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://.us-east-1.elasticbeanstalk.com/doSomething'. This request has been blocked; the content must be served over HTTPS.

So my thought to resolve this is to add a SSL Certificate to my ElasticBeanStalk instance. So first I created a subdomain services.myreactapp.com where the main domain is myreactapp.com I then assigned my ElasticBeanstalk instance (where my my-backend-webservices-app is) to that services.myreactapp.com subdomain.

I then went to the Certificate Manager service page of aws and requested a public certificate that is assigned to the services.myreactapp.com subdomain.

So now I updated the URL of the code snippet above to have https instead of http:

        url: 'https://<my-backend-webservices-app>.us-east-1.elasticbeanstalk.com/doSomething',

But now whenever my React app from https makes the request to the back end servlet, it just hangs.

Any thoughts at what I'm missing?

Answer 1

Few things to highlight here.

about ACM issued Certificates

• First of all, if you request a certificate from the certificate manager, it won't be applied to any of your applications automatically, you need to apply the certificate to your applications.

using ACM issued Certificate with Elasticbeanstalk

• You can apply the certificate obtained from ACM to the elasticbeanstalk only if you are using a load balancer. In this case You can simply select your certificate from your elasticbeanstalk configuration page.

  Reference: configure ssl for elasticbeanstalk load balancer - https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/configuring-https-elb.html

If you are not using load balancer (Single instance)

• You have to apply the certificate to the application running inside elasticbeanstalk or its proxy (for e.g nginx). You can use .ebextensions to achieve this.

  Reference:

  https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/https-singleinstance-nodejs.html

  https://medium.com/@hzburki.hzb/configure-ssl-certificate-elastic-beanstalk-single-instance-a2846211851b

Pointing subdomain.example.com to elasticbeanstalk's DNS name

• Once you have enabled SSL on your loadbalancer or configured your single instance to serve your application over ssl, you can create an A record to point services.myreactapp.com to your elasticbeanstalk dns name. make sure to to select Alias Yes when you create the A record.

Using the new dns name from your frontend app

finally you can use subdomain.mydomain.com from your frontend app instead of the elasticbeanstalk dns name.

Hope this helps, good luck.