Heroku Custom Domain with Cloudflare

by Daniel Kehoe

Last updated 27 January 2017

Here's how to set up Heroku with a custom domain using Cloudflare. Heroku provides low cost, easily configured Rails application hosting. Cloudflare provides domain name service plus SSL security at no cost.

This guide is a supplement to my book series, Learn Ruby on Rails. It is said to be, "The best Rails book for beginners." Get the first book in the series for free if you'd like to get a solid understanding of Rails.

Before You Start

You can use Rails Composer to generate a Rails starter application. Follow the instructions in the article Rails Deploy to Heroku to set up your application on Heroku.

Your application will be available at a URL such as http://myapp.herokuapp.com/.

You'll need to create an account with Cloudflare. Cloudflare provides domain nameservers and SSL security for free.

Before you start, you need to register your domain name with Namecheap or another domain register. Initially, the domain registrar will configure your domain to use a "parked" landing page using the registrar's own nameservers. You'll change the nameserver records at your domain registrar to point to the Cloudflare nameservers.

What You Need to Know

You'll start by checking existing DNS records with Cloudflare. You'll set the nameserver records at your domain registrar to point to the Cloudflare nameservers. Then you'll create DNS records at Cloudflare to route requests to the application running on Heroku. Finally, you'll set Heroku to respond to the custom domain.

Cloudflare Setup

Sign in to your Cloudflare account. Select "+ Add Site" from the navigation bar.

Enter a domain name and click "Begin Scan." After a few seconds, when status message shows "Scan Complete," click "Continue Setup."

Cloudflare Add Site

Cloudflare will display existing DNS records if you have already set up domain name records elsewhere.

Change the records (or add) to point to your Heroku application. You will need to change or create two CNAME records pointing to your .herokuapp.com address.

| CNAME | www | myapp.herokuapp.com |
| CNAME | myapp.com | myapp.herokuapp.com |

You should use the root level domain myapp.com as your main domain, but also point the www version of the domain at your Heroku application at myapp.herokuapp.com.

Then click "Continue" and select the "Free Website" Cloudflare plan.

Cloudflare Free Website Plan

Transfer your DNS to CloudFlare

Next you'll need to set the nameserver records at your domain registrar for the Cloudflare nameservers. Cloudflare shows the nameserver details you will need.

Cloudflare Nameservers

Sign in to your domain registrar account. If you are using Namecheap, find your domain and click "Manage." Look for the "Nameservers" section, choose "Custom DNS," and enter the Cloudflare nameservers. Click the checkmark to set the new nameserver records.

Here is the nameserver section of the dashboard at Namecheap:

Namecheap Nameservers

It may take a few seconds or as long as 48 hours for the DNS records to propagate across the Internet.

Check the dashboard at Cloudflare. The status may be "Pending." You can click the button to "Recheck Nameservers."

Namecheap Nameservers

Eventually the status will be "Active" and you will get a confirmation email from Cloudflare.

Namecheap Nameservers

Redirect with a Page Rule

Cloudflare lets you redirect visits from the www subdomain to the root domain. Use the "Page Rules" option.

Click the "Create Page Rule" button. Fill in the form for "If the URL matches" with www.myapp.com/* (notice the asterisk at end of the URL string). Click "Add a Setting" and select "Forwarding URL" and enter status code "301 - Permanent Redirect." Then enter the destination URL http://myapp.com/$1 (notice the $1 at the end of the string). Click the button "Save and Deploy." Once saved, you should be able to access your domain by both myapp.com and www.myapp.com.

Namecheap Nameservers

Heroku Domain Name Setup

Finally, you need to set Heroku to accommodate your custom domain. Heroku provides a document Custom Domain Names for Apps with details. Your Heroku account must be verified by providing a credit card for billing before you can add a custom domain. You can set up a custom domain from the command line or in the Heroku Dashboard.

$ heroku domains:add myapp.com
Adding myapp.com to myapp... done

You can confirm the domain is added by checking "Domains and certificates" under "Settings" in the Heroku Dashboard.

results matching ""

    No results matching ""