My websites have been using CloudFlare with Let's Encrypt successfully for a year or two. The websites are hosted on EC2, they have valid Let's Encrypt certificates for the root, www, and all used subdomains. The website is run by Wordpress.
What I'm doing
As a learning exercise I decided to change one of my domains, wildphotography.co.nz, over to Route53 and CloudFront. It hasn't gone well.
After moving from CloudFlare to Route53 with CloudFront, I can't view my website. Details are below. My desired end state is for Route53 to be my DNS server, and CloudFront my CDN.
Note that I have reverted back to CloudFlare, because I need my website to be online. I had Route53 as my DNS server for 3-4 hours, and I could see that it was resolving to R53.
After I set things up here's the problem I see in my browser
Due to the Route53 setup, the request for the domain is being sent to CloudFront. The certificate being presented by CloudFront is for the *.cloudfront.net domain. Hence the mismatch. I believe I understand the problem but I can't work out how to solve it.
If I go to the Cloudfront URL (d1b5f3w2vf82yc.cloudfront.net) I get this error. Of course, going to this URL wouldn't typically be helpful.
Here's an SSL diagnostic
Here's my CloudFront setup. Note that I took a screenshot after I changed something minor, which is why it shows "in progress". I let it propagate before I tested it.
First the CloudFront overview
CloudFront Origin Settings
CloudFront Root Behavior
Note that I forward from http to https on my Nginx web server, so I don't bother to have CloudFront do it. That gives me additional information in my logs, useful for diagnosis.
I've removed some irrelevant records relating to email. Note that both the www and non-www domains are alias records pointing at the CloudFront distribution. It won't accept a cname alias - I'm not even sure if that's a valid combination.
What I've tried
I created a new subdomain, origin.wildphotography.co.nz, which is a cname to www.wildphotography.co.nz. I believe this is necessary so CloudFront can find the IP of the origin server.
I've tried CNAMEs, Alias and not Alias, all kinds of things.
One odd thing, is when it was still set up with R53/CloudFront some requests were getting through CloudFront. Not many, but some.
Any ideas would be appreciated. I suspect I have Route53 set up somehow incorrectly.