Setting Up a Custom Domain for Heroku Using Route53 and CloudFront

What you’ll need:

A Heroku app (already created)
A Domain from Route53 (already acquired)
CloudFront
AWS Certificate Manager

Connecting Heroku App with a Custom Domain on Route53 (AWS)

From the Dashboard, navigate to Hosted Zones and select Create Hosted Zone.

Setting Up a Custom Domain for Heroku with Route53 and CloudFront

Enter your Route53 domain name in the Domain Name field and create it.

Setting Up a Custom Domain for Heroku with Route53 and CloudFront

Next, select Create Record Set. Enter the following information and create the record:

For Name, enter www
For Type, select CNAME
For Value, enter your Heroku app name (e.g., sampleapp.herokuapp.com)

You can check your Heroku app name from the Heroku settings screen.

Setting Up a Custom Domain for Heroku with Route53 and CloudFront

Connecting Heroku App with a Custom Domain on Route53 (Heroku)

You can configure this via terminal or through the Heroku console screen.

Select Add domain and simply set the domain you configured in Route53.

Setting Up a Custom Domain for Heroku with Route53 and CloudFront

After setting up domains both with and without www, it should look like this:

Setting Up a Custom Domain for Heroku with Route53 and CloudFront

Issue a Free SSL Certificate Using ACM

There are two verification methods: email and DNS. Since we’re using Route53 for our domain, DNS verification is recommended, though it may take up to 30 minutes or more for AWS to verify the domain and issue the certificate.

If Using Email Verification

From the AWS console, select Certificate Manager.

Setting Up a Custom Domain for Heroku with Route53 and CloudFront

Important note: Make sure the region is set to US East (N. Virginia) (as of October 2017). If you get this wrong, the subsequent steps won’t work properly.

Setting Up a Custom Domain for Heroku with Route53 and CloudFront

Next, select Request a certificate.

Setting Up a Custom Domain for Heroku with Route53 and CloudFront

After entering your domain, select Review and Request.

Setting Up a Custom Domain for Heroku with Route53 and CloudFront

Shortly after, you’ll receive a domain verification email from AWS.

Setting Up a Custom Domain for Heroku with Route53 and CloudFront

Approve it by clicking “I Approve”.

Setting Up a Custom Domain for Heroku with Route53 and CloudFront

Upon approval, you’ll see a Success! message.

Setting Up a Custom Domain for Heroku with Route53 and CloudFront

If all steps are successful, the status should change to “Issued”. This completes the process of issuing a free SSL certificate using ACM.

Setting Up a Custom Domain for Heroku with Route53 and CloudFront

If Using DNS Verification

Enter the domain name:

Setting Up a Custom Domain for Heroku with Route53 and CloudFront

Select DNS validation:

Setting Up a Custom Domain for Heroku with Route53 and CloudFront

Since this blog’s domain uses Route53, select “Create record in Route53”. It will succeed after a short while.

Setting Up a Custom Domain for Heroku with Route53 and CloudFront

It should look like this:

Setting Up a Custom Domain for Heroku with Route53 and CloudFront

Success!

Setting Up a Custom Domain for Heroku with Route53 and CloudFront

CloudFront Configuration

Select Create Distribution.

Setting Up a Custom Domain for Heroku with Route53 and CloudFront

Select Get Started under the Web section.

Setting Up a Custom Domain for Heroku with Route53 and CloudFront

In the Origin Domain Name field, enter your Heroku domain name:

sample123456.herokuapp.com/

It should look like this:

Setting Up a Custom Domain for Heroku with Route53 and CloudFront

Next, select “Custom SSL Certificate” and specify the server certificate you created earlier.

Setting Up a Custom Domain for Heroku with Route53 and CloudFront

Be sure to enter your domain in the Alternate Domain Names (CNAMEs) field.

Setting Up a Custom Domain for Heroku with Route53 and CloudFront

Route53 Configuration

Change the ALIAS to point to CloudFront.

Setting Up a Custom Domain for Heroku with Route53 and CloudFront

If the CloudFront setup is complete, it should appear in the Alias Target dropdown - select it.

Setting Up a Custom Domain for Heroku with Route53 and CloudFront

And that’s it!