HTTPS

The recommended way to enable HTTPS in Elastic Beanstalk is to use one of AWS’s load balancers such as the Application Load Balancer (ALB) which supports autoscaling, fault tolerance, and other things.

This blog is about hosting a web app prototype on a single EC2 instance, using HTTPS via Let’s Encrypt, without a load balancer.

Using an AWS ALB costs a minimum of about $18 per month, on top of any other charges you currently have, such as $5 for the t2.micro instance that you may be running your prototype on.

So, if you’ve only got one EC2 instance in Elastic Beanstalk for your prototype, and don’t currently want the benefits of an ALB (fault tolerance, auto-scaling, etc), but do want the benefits of HTTPS (protection from interception, man-in-the-middle (MITM) attacks, etc), read on.

When running a page with HTTPS, you’ll want to also load any external resources such as javascript via HTTPS. A lot of people recommend loading jQuery from the Google CDN via the following javascript script:

<script type="text/javascript">
    var gaJsHost = (("https:" == document.location.protocol) ? "https://" : "http://");
    document.write(unescape("%3Cscript src='" + gaJsHost + "ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'%3E%3C/script%3E"));
    document.write(unescape("%3Cscript src='" + gaJsHost + "ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js' type='text/javascript'%3E%3C/script%3E"));
    document.write(unescape("%3Cscript src='" + gaJsHost + "ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js' type='text/javascript'%3E%3C/script%3E"));       
</script>

This works just fine, however you can let the browser select the protocol depending on the request by the following snippet:

I recently migrated my mattbutton.com blog away from Wordpress hosting in favor of a static site generated by Hugo, hosted on Amazon S3.

Initially, I hosted the static site via Aerobatic.io, who recently removed their free tier, and started charging $15 per month for hosting with a custom domain.. 50% more than the $10 per month I was previously paying for Hostgator Wordpress hosting. Unless I have certain specific requirements, I can’t justfy that kind of cost to host a static site.

Aerobatic.io are using Amazon S3 and Amazon CloudFront behind the scenes, so I decided to cut out the middle-man, set it up myself, and save nearly $15 per month.

Setting up the S3 bucket to host my site was fine. For the CDN/SSL side of things I initially tried using CloudFront because most of the AWS Hugo Hosting, HowTo guides were using it.

When trying to set up CloudFront via my personal AWS account, I got an error saying a distribution already exists for mattbutton.com. The reason for this error is because Aerobatic.io had already created a CloudFront distribution pointing to their own S3 bucket. CloudFront isn’t an option for me until Aerobatic.io delete their mattbutton.com CloudFront distribution.

I still wanted to use SSL, and had decided on setting up mattbutton.com with it mainly out of interest, partly because Google uses HTTPS as a ranking signal, and partly because Chrome will eventually show a Not Secure warning for all pages served over HTTP.

Since AWS CloudFront wasn’t an option, I decided on using the CloudFlare free plan for SSL and CDN. Everything went well, until I encountered a CloudFlare 502 Bad Gateway error page:

I wasn’t having any luck searching for a solution to this error for this particular error. Fortunately, there’s a simple fix, if you know what you’re looking for, and you’re happy with the trade-offs involved.

In this blog post, you’ll learn how to host a sample Python web app on Elastic Beanstalk, using HTTPS, without a load balancer.

After following the steps in this blog post, you should end up with something that looks like the following image: