If you are hosting your static website on AWS S3, serving it over HTTPS is quite easy with AWS services. In this article I’ll describe step by step how to do it and I’ll make the following assumptions:
- You are already hosting your site on S3 bucket. You have two buckets, one for the
wwwand one for thenon-wwwversion of your site. Thenon-wwwbucket is configured to redirect to thewwwbucket (you host the actual files in this bucket). - You use Route53 for your domain configuration
- You want to redirect all requests to
https://www.domain.com, for example:jarospisak.com→https://www.jarospisak.comwww.jarospisak.com→https://www.jarospisak.comhttps://jarospisak.com→https://www.jarospisak.com
Step by step guide
1. Request certificate
If you want to serve your website over HTTPS you’ll need a certificate. Amazon provides free SSL/TLS certificates. Log in to your AWS account and go to AWS Certificate Manager service. Important: you must select us-east-1 (N. Virginia) region. Click the Request a certificate button and fill in the domain name. If your site is accessible via both www and non-www, add the following:
Next you need to select validation method. There are two options, DNS and email. I usually go with DNS because I host my domains on AWS and there is an option to automatically create a CNAME DNS record. If you have a valid email associated with your domain record, you can select the email validation.
The process might take a while but after a couple of minutes you should have a newly issued certificate.
2. Create CloudFront distributions
It’s not possible to use certificate directly with an S3 bucket so you’ll have to create CloudFront distributions. Using CloudFront to serve your static content has an additional benefit of increased site speed. Your static site will be served from a CloudFront location which is closest to the user.
In order to get the www to non-www redirect working over HTTPS, you’ll need to create two CloudFront distributions, one for each domain.
Create CloudFront distribution for www domain
Go to the CloudFront service in the AWS console, click on Create Distribution and under the Web section, click the Get Started button. In the Origin Domain Name field enter the URL of the www S3 bucket (the one in which you host the website files).
When you click on the input field you’ll see a list of your existing S3 buckets. Don’t select the pre-generated values, instead copy/paste the bucket web URL from the S3 service. You can get the full URL if you go to S3, click on the bucket, select Properties, Static website hosting and copy the endpoint URL.
In the Viewer Protocol Policy select Redirect HTTP to HTTPS.
Enter your www domain name in the Alternate Domain Names (CNAMEs) field and in the SSL Certificate select your previously created certificate. Leave all other fields untouched and click Create Distribution.
Create CloudFront distribution for non-www domain
Follow the same steps as in the www distribution, except for the Origin Domain Name, enter the URL of your non-www version of the S3 bucket (http://jarospisak.com.s3-website-us-west-2.amazonaws.com).
Go fetch a coffee and after 15 - 30 mins your CloudFront distribution should be ready.
3. Point domain’s A records to CloudFront
The last step is to point your domain’s A-records to the CloudFront distributions, one for each version of your domain - www and non-www.
Create A record for www domain
Go to Route 53 - Hosted zones and click on your domain. Select Create Record Set. Enter www to the Name field. In the Type select A - IPv4 address and in the Alias field select Yes and from the Alias Target select the CloudFront distribution. Click Create.to Route 53 - Hosted zones and click on your domain. Select Create Record Set and in the Type select A - IPv4 address. In the Alias field select Yes and from the Alias Target select the CloudFront distribution. Click Create.
Create A record for non-www domain
Follow the same steps and for the www record, except leave the Name field empty.
Give it a few minutes, refresh your browser and you’ll see the green lock icon in the address bar indicating that your site is now being served over HTTPS. Test that all redirections are working correctly.