Ok, so we’ve set up a static site hosted from an S3 bucket with a custom domain using Route 53. But sadly, it’s:

Request a Certificate in Certificate Manager

• Go to Services -> Certificate Manager
• Click [Request a Certificate]
• In the window that opens from “Request or Import a Certificate with ACM”, enter your domain name (domainname.com) and click [Next]
• Select DNS validation and click [Next]
• Click [Review]
• Click [Confirm and Request] if the details look correct.
• Expand the domain in validation:

• Click [Create record in Route 53] and confirm by clicking [Create] again.
• You’ll be waiting from several minutes to half an hour for the validation to happen, during which time status will display as “Pending validation”
• Click [Continue] to finish the request process and go back to the Certificate Manager main screen.
• Click the (refresh icon) button to update status, and when status turns to “Issued” you are ready to use it in CloudFront.

Setting up a CloudFront distribution

• In the AWS Console, go to Services → Cloudfront
• Click [Create Distribution]
• Click [Get Started] under Web

Create Distribution

• Under “Origin Domain Name” select the selection under “Amazon S3 buckets” that corresponds to your static web site bucket. (e.g., domainname.com.s3.amazonaws.com)
• Optional: Restrict Bucket Access [Yes] so that you can control access through the CloudFront distribution alone.
  • Set “Origin Access Identity” to “Create a new identity”
  • Set “Grant Read Permissions on Bucket” to “Yes, Update Bucket Policy”
• Under Viewer Protocol Policy I select “Redirect HTTP to HTTPS” just to keep things uniform.

Set up SSL

• Under Alternate Domain Names, enter your domain name (e.g., domainname.com)
• Select “Custom SSL Certificate”
• Click “Request or Import a Certificate with ACM”
• If you go back to CloudFront you should be able to select “Custom SSL Certificate” now and the certificate corresponding to your domain name should show up in suggestions:

• Scroll down and leave defaults until you get to “Default Root Object”. You’ll want to set this to the name of the document to bring up (e.g., index.html) if the user browses to / on the domain.
• Optional: I set Logging to On and selected my logging bucket that I used for the static site as the bucket, adding a log prefix for it.
• To finish, click [Create Distribution]
• You may be waiting quite a while for changes to propagate to the edge locations, but at some point before the “In Progress” changes to “Deployed” you will be able to pull up via the domain listed under the “Domain Name” column in your list of CloudFront Distributions.

Pointing the domain name at your distribution

• Go back to Route 53 and go into the hosted zone for your domain name
• Check the checkbox next to your A record and then go up to Actions -> Edit
• Change “Value/Route traffic to” from “Alias to S3 endpoint” to “Alias to CloudFront distribution” in the “Choose Distribution” input box.
• Enter the domain name (“asdfkjdfasoiadsf9u.cloudfront.net.”) as your domain name. (The new interface wasn’t suggesting distributions like the last version of the interface did… it may change next week, of course.)

Locking down S3

If you selected “Restrict bucket access” and had CloudFront update your S3 policy, your public access setting on the bucket is still unaffected. You’ll want to remove that:

• Go back to Services -> Amazon S3
• Go to your domainname.com bucket
• Click Permissions
• Click Block public access
• Check “Block all public access” and click [Save]

Some other details

If you want to have JavaScript and forms function properly You’ll want to set up CORS configuration by going to your S3 bucket, then selecting Permissions tab and clicking CORS configuration:

<CORSConfiguration>
 <CORSRule>
   <AllowedOrigin>https://thomaspowell.work</AllowedOrigin>
   <AllowedMethod>PUT</AllowedMethod>
   <AllowedMethod>POST</AllowedMethod>
   <AllowedMethod>DELETE</AllowedMethod>

   <AllowedHeader>*</AllowedHeader>
 </CORSRule>
 <CORSRule>
   <AllowedOrigin>*</AllowedOrigin>
   <AllowedMethod>GET</AllowedMethod>
 </CORSRule>
</CORSConfiguration>

Some mistakes I made:

• A certificate for *.domainname.com does not cover domainname.com. You have to add both if you want wildcard and domainname.com itself covered.

Next up… preventing someone from running up a $1,000 AWS bill by hammering your site (i.e., monitoring your site’s access… with better granularity than AWS Budgets…