Certificate Mismatch setting up Route53, CloudFront, Custom Origin

amazon-cloudfrontamazon-route53amazon-web-services

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

Insecure connection

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.

CloudFront Error

Here's an SSL diagnostic

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 Overview

CloudFront Origin Settings

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.

CloudFront Root Behavior

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.

Route53 Setup

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.

Best Answer

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:

  • The public website records ("www" and apex) should point to your Cloudfront distribution.
  • Another auxiliary record ( for example, "origin") is required for your Cloudfront origin setup, as Cloudfront does not allow IP origins. This auxiliary record should point to your actual web server. It is important that you configure your distribution to forward the Host header in order to allow your web server to serve the right contents.

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.

Related Topic