Setting up a (secure) static website using Amazon S3 and Amazon Cloudfront in 2023
Want to make a static website, using Amazon S3 - and you’d like it secured and given proper HTTPS from Amazon Cloudfront? And you don’t want to expose the S3 bucket to the world? Here’s how to do it (rather, if we’re being explicit about it, this is how to set the permissions right so it actually works).
Create an S3 bucket
Keep all the settings at default for now. Specifically:
- Leave “object ownership” as the default ACLs disabled
- Keep “block all public access” selected
Create a Cloudfront distribution
Select “origin domain” from the dropdown. It’ll look like bucketname.s3.region.amazonaws.com
For “origin access”, choose “origin access settings”. Click “create control setting”, accept the defaults, and click “create”.
Leave “Origin Shield” as off, by the way: it gives you no advantage for an S3-hosted bucket.
Leave “default cache behaviour” in its defaults; leave the WAF settings off.
Under “settings”:
- Add an additional domain name (CNAME) - it’s your website domain, like
example.com - Choose “request certificate” in the next bit, to be taken to a page to give you that. (You’ll need to create some DNS records). Once it’s issued, close that extra tab
- Refresh the dropdown for custom SSL certificate, then choose that nice new one.
- Add HTTP/3 support because why not
- Add the default root object of
index.html(no backslash) - Keep IPv6 on; and then create the distribution.
Update the S3 bucket policy
You’ll get a big yellow banner asking you to update the S3 bucket policy.
-
Copy the policy to your clipboard using the button. THEN, follow the link to S3 bucket permissions.
-
Go down to “Bucket Policy” and hit ’edit’, then paste in the new policy into the window. Save those changes.
Go back to your Cloudfront tab and hit refresh. Behold, the yellow banner has disappeared.
Do the DNS for the Cloudfront distribution
Go into Route 53, and create a record by clicking “alias” -> alias to Cloudfront distribution -> choose the distribution. Your new Cloudfront distribution should show.
Then do it again, changing “A” to “AAAA” for the IPv6 version.
(You’d have thought this would be automated somehow by AWS, but no).
Put some HTML into the S3 bucket
You’ll want to call it index.html - though you can frankly get away with just writing “hello world” into a file and saving it.
Visit your website including the /index.html and it should work nicely.
Hurray?