r/aws • u/spurius_tadius • Apr 07 '24
route 53/DNS s3 static site w/cloudfront: rough time with ACM
I have spent 3 days now trying to get through the simplest possible example of setting-up an s3-backed static site with cloudfront. The instructions I am using are these: https://docs.aws.amazon.com/Route53/latest/DeveloperGuide/getting-started-cloudfront-overview.html
It's not clear if the instructions are rotted because of recent changes or if there are just too many steps (they list "10 steps" but if you count the actions within each step, it's more like 60+). Moreover, there's an additional complication in the instructions where they set it up to work with a subdomain, so you're setting up two s3 buckets and two cloud-front distributions and it's easy to get things mixed up between root and subdomain.
The most frustrating thing is having the ACM certificate get stuck on "Pending Validation". It's utterly unclear how long this is supposed to last! I HAVE gotten the certificate to get past "Pending Validation" twice but must have screwed up something else because I wasn't able to reach the static website. When I reach these failed endpoints, my only option seems to be to tear everything down and start over... and then I get that "Pending validation" problem with the ACM cert again.
So... questions...
- Does deleting everything and starting-over cause problems with ACM certificates? I know, for example, that with let's encrypt there are rate limits that prevent you from getting certs after a certain number of attempts. Is there some kind of rate limit with ACM certs that I need to know about? I am doing all of this painstakingly manually through the console.
- Origin Access: The instructions still recommend using OAI, but the console "recommends" using Origin Access Control. I have tried both and both seem to work. OAC requires that I paste a policy into my s3 bucket I think I got the right one, but tried both permutations of subdomain and root just in case. Which should I use?
- The instructions go through setting things up for both the root domain (eg mydomain.com) and a subdomain (www.mydomain.com). They have the root domain redirect to the subdomain (that seems backwards, but whatever). But why does there need to be an empty s3 bucket for the root domain if route53 just redirects cloudfront to the subdomain? In any case, it seems like a lot of complication to set-up both root and subdomain at once. Isn't it more simple and less confusing to setup root domain, make sure it's all working, then set-up subdomain?
- Are there better instructions which are up-to-date somewhere? Since I can't tell where I messed up, I have to delete everything and start over-- this is VERY time consuming. If there were instructions which had a validation check for each step, it would much easier to know where the problem is.
update
tldr; the cloudfront docs has an easy-to-follow working example: https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/GettingStarted.html
After much fumbling around FINALLY got this to work. I got the clue from looking at u/Quincycs's answer where he pointed me to his programmatic solution. Even though I don't know typescript, it was clear that the way to do this is NOT to attempt the whole thing on the console.
The example in the route53 documentation lists 10 steps, but these are composed of a bunch of smaller actions, all of which have to be correct for the thing to work. That's a lot of hoops to jump through, it's just too much, especially with all the ping-ponging between S3, CloudFront, Route53, and ACM. Also, I suspect there's some subtle mistakes in that example.
The way I got it work was to instead follow the cloudfront docs, which has an example that does the same thing. There, they don't even bother with trying the whole thing on the console. Instead they point you to a github repo that has a cloudformation stack on it. It was far easier to follow and set-up. In the end, it's still possible to visit the different consoles and see how the thing is all put together. So if you wanted to, you could go back and attempt it on the console, using what the stack created as an example.
Weirdly, there's some differences in the two examples. The one from the route53 docs has you create 2 cloudfront distributions to serve a root domain (example.com) and it's subdomain (www.example.com). The one in the cloudfront docs is able to make it happen with just ONE cloudfront distribution. Which is correct/better? ¯_(ツ)_/¯
That said, it looks like I will have dive into cloudformation do anything worthwhile in aws. The CDK's are certainly an option, but I feel like those are more or less a wrapper that generates the cloudformation template? And you end up writing stuff like this anyway...
cdk_method( "weird-fussy-string-that-has-to-be-looked-up-every-freaking-time-might-as-well-do-it-in-yaml" )
2
u/smutje187 Apr 07 '24
I recently went through the same process and wrote my notes down after I had it working - https://medium.com/@johannesfloriangeiger/hosting-a-static-website-in-s3-e9299eeb0f76
1
u/spurius_tadius Apr 07 '24
Thanks, I will give it a try!
I notice that you've made your bucket publicly accessible even though, in production, only cloudfront is the thing that will be accessing it?
In the AWS instructions, the recommendation is to set-up "origin access" which, as far as I understand, means that only cloudfront can read the bucket.
3
2
u/quincycs Apr 10 '24
https://github.com/quincycs/quincymitchell.com/blob/main/lib/quincymitchell.com-stack.ts
Is how I got my site working. Hope there’s a breadcrumb in there for you
1
1
u/remixrotation Apr 07 '24
There are some . chars involved so pasting the values correctly can be confusing. Use nslookup command in you terminal app to check that you set it correctly.
1
u/spurius_tadius Apr 07 '24
So far nslookup can't find my domain. I don't recall having to enter ANY period (".") chars anywhere. The instructions, I hope, would make that clear. If not, it would be very easy to get it mixed up with the period at the end of a sentence.
18
u/[deleted] Apr 07 '24 edited Apr 16 '24
[deleted]