Cheapest way to host a SPA or static website with https on S3

Question

Problem

I want to host multiple websites, each with ssl(https) and to not have to spend more than I have to.

I would also like to keep using Route53 if possible(but not necessary) because I understand how to use it and it's only costing me about $0.50/month.

Background

My backend/server understanding is very limited.

I've created some react websites(I think I'm using the word static correctly, there's some stuff that javascript changes) and currently I'm hosting each on an ec2. I used certbot(lets-encrypt) to enable https for my websites. The domain names are handled through Route53 and Namecheap.

S3 & Cloudfront

I want to put my sites on S3's to save costs. I need https though. Most tutorials that I look at talk about using cloudfront. It looks like cloudfront is going to cost me something similar to what my ec2's are costing me anyway, so it doesn't look like a solution to me. Maybe I'm wrong? Will the costs be insignificant?

Route53 & NGINX

It looks like I might be able to do this with Route53? Theres an answer from Gianluca Casati, but he didn't really provide enough detail for me to work with.

Some other tutorials explain it, but talk about setting up an NGINX server, and I don't really know what that is. I'd like to avoid NGINX if possible but I'll use it if I have to.

This is starting to get very complicated so I wanted to know if there is an easier way. If not what are all the steps involved

---

side note(if you can answer this also, it would be helpful, but isn't necessary)

I would also like good SEO. For at least one of the websites, it looks like this will involve dynamic rendering, using rendertron or puppeteer or something. Not all of my websites need this, but one will. It would be nice to know if this is possible or not.

---

Summary:

• I'm looking for a cost effective method to host multiple static websites
• It looks like that method is by storing each on amazon S3's
• I want each website to have SSL(HTTPS)
• It looks like cloudfront can do this, but won't really save me any money anyway
• It looks like there's a method of doing this with Route53
• The Route53 method may require an NGINX proxy server, and I have no idea what that is for the most part.

Answer 1

I'll try to provide answers to your questions in order.

Cloudfront: will the cost be insignificant?

Yes, incredibly so. Below is a screenshot of a random bill from my AWS account:

Here is the Cloudfront pricing breakdown presented on a typical AWS invoice:

Route53: can I do this with Route53?

Yes it will be necessary. NGINX is not necessary.

The 4 AWS services you will need are:

• S3: create a bucket with "web hosting" enabled and with the same name as your desired domain url. For example: "www.jacobswebsite.com" or "jacobswebsite.com"
• Cloudfront: because you can't install an SSL cert on an S3 bucket directly, but you can install SSL on a Cloudfront distribution.
• Route53: what you use to point your DNS records when users type in your URL. In a simplistic way you will point "www.mysite.com" DNS records to Cloudfront - and Cloudfront will point to your S3 bucket.
• AWS Certificate Manager: with this you can generate free auto-renewing browser compatible SSL certs. If Route53 is handling DNS for your domains, SSL generation is a one click setup with about a 30 minute wait. You can then install these SSL certs into a CloudFront distribution from a dropdown menu.

This is an excellent guide for the basic procedure:

https://medium.com/@sbuckpesch/setup-aws-s3-static-website-hosting-using-ssl-acm-34d41d32e394

You can skip the parts about SES for the basic setup, but if you ever need to setup a form that submits to your email inbox, then you might want to look into it.

In short, the answer is yes. You can use S3 and Cloudfront to accomplish your goal without a bunch of backend-server knowledge and for pennies per month. The method and services described above is exactly how you do it.

Answer 2

Jacob, here is the official guide to set up HTTPS with CloudFront. More specifically, you'd want to enable HTTPS for communication between viewers and CloudFront.

Although the above links give you general information/understanding of the setup, as you said, key thing is that you need to serve multiple domains from CloudFront over HTTPS. This page in Knowledge Center tells you exactly what you need: https://aws.amazon.com/premiumsupport/knowledge-center/multiple-domains-https-cloudfront/

In a nutshell:

1. Configure CNAMEs in Distribution Settings (CloudFront).

2. Configure SSL certificate(s) for your domains (the video explains how to create them via AWS' ACM, but you can buy wildard or multi-domain certificates elsewhere as well. Here is a nice post explaining difference between them.

3. Point CNAMEs to your CloudFront domain (done via Route53 or whatever DNS provider you use).

Note that if you can't use SNI due to old browser incompatibility, it will cost you more money, as you'll need one IP per domain -- see image below. SNI is the most cost-effective option and I think is what your question is all about. You might want to take a look here for more details.

Hope it helps!