Static HTTPS Website on S3 Bucket

Amazon has some pretty good tutorials online, but they may miss an obvious requirement or be a little out of date at times. That is ok.

I’d like to give some clarification around enabling an S3 Bucket for HTTPS. The sole reason is to use the bucket to redirect to another website. This only works as far as I know if you are on Route53. (?)

If you want to shift your records to another provider, they would need to provide HTTPS redirection, not HTTP. If things are pretty simple, you could use Cloudflare and work out how to do the HTTP redirection from there, and remove your Route53 Zone once Cloudflare has existing records, or you manually add them. The name servers would need changing to Cloudflare, which does not require you to keep a Route53 Hosted Zone once configured. HTTPS redirection is a little tricky and takes some time for it to kick in from Cloudflare.

Let us assume you have created a static website on a bucket, and now need to add HTTPS. You do need to do this.

First, the bucket must have public access, and when you upload index.html and error.html they need public access.

Here is an example of index.html with a 5 second redirection delay:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>my_old_domain.au redirect to my_new_domain.au</title>
    <meta charset="UTF-8" />
    <meta http-equiv="refresh" content="5; URL=https://my_new_domain.au/" />
</head>
<body>
<style>
body {background:#e0e0e0;}
p {color:#767676;font-size:18px;font-weight:200;font-family:Helvetica,Arial,sans-serif;}
</style>
  <div style="min-height:40px"></div>
  <p>Welcome - my_old_domain.au has been transitioned to my_new_domain.au</p>
  <p>Please redirect here to my full website:</p>
 <a title="my_new_domain.au" href="https://my_new_domain.au" alt="my_new_domain.au"><span style="text-decoration:underline;color:rgb(87,108,178);text-decoration-thickness: 1px;font-size:18px;font-family:Helvetica, Arial, sans-serif;">my_new_domain.au</span></a>
  <div style="min-height:200px"></div>
</body>
</html>

Let’s say a vistor types a web page from the old domain website, they need to have an error file to trap and redirect them as well. Here is error.html:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>my_old_domain.au redirect to my_new_domain.au</title>
    <meta charset="UTF-8" />
    <meta http-equiv="refresh" content="5; URL=https://my_new_domain.au/" />
</head>
<body>
<style>
body {background:#e0e0e0;}
p {color:#767676;font-size:18px;font-weight:200;font-family:Helvetica,Arial,sans-serif;}
</style>
  <div style="min-height:40px"></div>
  <p>Welcome - my_old_domain.au has been transitioned to my_new_domain.au</p>
  <p>Please redirect here to my full website:</p>
 <a title="my_new_domain.au" href="https://my_new_domain.au" alt="my_new_domain.au"><span style="text-decoration:underline;color:rgb(87,108,178);text-decoration-thickness: 1px;font-size:18px;font-family:Helvetica, Arial, sans-serif;">my_new_domain.au</span></a>
  <div style="min-height:200px"></div>
</body>
</html>

Now we create a free certificate for https. Navigate to AWS Certificate Manager (ACM) and under North Virginia only.

Request a certificate and enter the two old domain names:

my_old_domain.au
www.my_old_domain.au

I will leave it with you to work out how to ensure the CNAME records are added to Route53 entries for my_old_domain.au. The certificate must be verified before continuing.

You now create a Cloudfront Distribution. This is where the Amazon tutorial is a touch confusing.

Your S3 bucket should have already been set up from the Properties tab for static website hosting. From that section, copy the URL without the preceding http:// portion. For example:

my_old_domain.s3-website-ap-southeast-2.amazonaws.com

When you create the distribution, paste this into the Origin Domain field. You can give a name and description, such as “my_old_domain.au” and use other default field entries, excepting the following:

In the Alternate domain name (CNAME) – optional field, put my_old_domain.au and www.my_old_domain.au. These match the certificate you created. You cannot leave this optional field blank.

In the Custom SSL certificate – optional field, select your certificate.

In the behaviours section for Default (*), you select your Origin, which is my_old_domain.au, and as this is a simplistic static site, select no for compression, Redirect HTTP to HTTPS, GET, HEAD, (no for restrict viewer). For Cache policy and origin request policy (recommended) select caching disabled. For Origin request policy – optional select AllViewer.

Save the configuration and list your distributions (North Virginia). It takes quite a long time before it goes into a DEPLOYED and ENABLED state.

When it is, in Route53, you ensure there is no A record with a previous Alias or IP address. This is where the Amazon tutorial was not quite right, as they used a CNAME for the next step.

Do not add a CNAME record.

Add an A Record as an ALIAS.

The Record name is for my_old_Domain.au without any other prefix.
In the drop down menu, select “Alias to Cloudfront Distribution”.
Below it will be North Virginia.
Below that, select the .net entry that will show in the Cloudfront Distribution field’s Domain Name.
For example:
xxxxxxxxxxxxxxxx.cloudfront.net.

Save the record. That is all you do.

Any visitor will now receive https:// on the old domain name, and it will redirect to the new domain name from your index and error.html files.

Static HTTPS Website on S3 Bucket

Create a static website or redirect on an S3 Bucket using Amazon’s free SSL certificate