Background
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.
The Problem
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.
Problem Details
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.
Route53 setup
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.
First of all, you need to upload your custom SSL certificate to Cloudfront in order to avoid issues during the SSL validation. If you do not upload a custom certificate valid for your website name, Cloudfront offers a certificate valid only for its own domain cloudfront.net.
Then, you need a couple of records in your DNS zone in Route53:
With this setup, your customers are routed to Cloudfront through your www/apex records, and Cloudfront locates the actual web server through the origin record. Clodflare saves you from implementing all this logic because you delegate your DNS to them, but in fact this is what they do in the background when you enable the CDN feature in your DNS panel.
Note that you can also get a certificate from AWS through ACM for no extra charge. The certificate you get can then be deployed on CloudFront for your domain. For details please visit - http://docs.aws.amazon.com/acm/latest/userguide/gs-cf.html and read the blog post - https://aws.amazon.com/blogs/aws/new-aws-certificate-manager-deploy-ssltls-based-apps-on-aws/