[SOLVED] Send GET request from Amplify service to EC2 machine

Issue

< I am a real newbie so I am sorry if I am using the terms incorrectly. >

Hey guys!

I am trying to deploy my website, I put my front - files in Amplify app which provides me with an HTTPS url. My goal is to load my backend code to EC2 ubuntu machine and to run it via pm2. I have a trouble understanding how to do it, I am writing backend code in nodejs and I am using the express framework. When I am developing locally, it all runs perfectly. My backend code :

app.get('/db', (req,res) => {
let ddb = new AWS.DynamoDB({ apiVersion: "2012-08-10" });
const params = {
TableName: "blablabla",
};
let itemObj = [];
ddb.scan(params, function (err, data) {
if (err) {
    console.log("Error", err);
} else {
    console.log("Success", data);
    data.Items.forEach(function (element, index, array) {
    itemObj.push(data.Items);
    res.status(200).json(itemObj);
    });
}
})

Relate front-end code :

function getData(username){
var xmlhttp = new XMLHttpRequest();
  var url = "http://localhost/db";
  xmlhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) { //request completed
        result = JSON.parse(this.responseText);
    blablabla
          }
  };
  xmlhttp.open("GET", url, true); 
  xmlhttp.send(); 
}

When I am using localhost url and run the server via my computer (npm start server..) I do get the data I am looking for on the amplify service. But when I use the elastic IP addresses of the EC2 machine I get an error: "was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint, This request has been blocked"

Is there any way to allow those kind of requests? Do I even use the correct IP of the EC2 machine? It seems to me that if EC2 provided me an HTTPS address, it will works fine, am I right or it has nothing to do with it? Thanks in advence.

Solution

It works on your local machine because you don't have an SSL certificate on localhost, so your frontend is not loaded over a secure connection. When you run the frontend from Amplify, you're connecting to the Amplify domain name via SSL (I expect the URL is something like https://master.randomalphanumericstring.amplifyapp.com). So your browser complains when that page tries to make an insecure connection to your EC2 instance.

You can work around this by changing your browser settings to allow mixed content. In Chrome, it's Settings->Site Settings->Insecure Content->Add site. But that's just a workaround for development, obviously that won't work for production.

You can't make an HTTPS request to an IP address. SSL certificates must be associated with a domain name. It's also not a very robust solution to have your backend depend on a specific IP address. You have a few options to address this:

1. Generate an SSL certificate and install it on your EC2 instance. You can't use AWS Certificate Manager with EC2, so you'd need to obtain a certificate from letsencrypt or some other source. Self-signed won't work, it has to be trusted by the browser. And of course you need a registered domain for that.

2. Add an application load balancer with a secure listener and a certificate issued through ACM that directs requests to your EC2 instance. Again, you'll need to have a registered domain that you can use with the certificate.

3. Deploy your backend through Amplify. This will provide an API endpoint with a secure connection in the awsamazon.com domain.

There are many other ways to create an app backend with a secure connection, but those should get you started.

Answered By - jscott