Intro

Apps hosted on Heroku does not have static IP addresses assigned to them so it is impossible to simply setup A type DNS record (it requires IP). Most DNS registrars does not allow setting CNAME (also called ALIAS) to root domain (also called naked domain). Cloudflare allows such setting using, as they call it, CNAME flattening. Another features of Cloudflare are protection against various attacks and caching.

To combine above knowledge we can setup Cloudflare and point our preferred DNS registrar to Cloudflare nameservers. This way we will have naked domain, with added benefits of Cloudflare’s features.

At the end of this guide our page will be hosted under https://petstore.com, all below addresses will lead to it:

  • http://petstore.com
  • https://www.petstore.com
  • http://www.petstore.com

Connection will be secured with SSL.

Perquisites

  1. Deployed app on Heroku (most likely reachable with petstore.herokuapp.com)
  2. Access to petstore.com DNS
  3. Access to cloudflare.com account (free account will do)

Step 1 - Add domain on Heroku

  1. Go to Heroku dashboard > petstore app > Settings
  2. Find Domains panel and click Add domain
  3. Enter petstore.com as Domain name
  4. Notice DNS Target, we will need it in next steps, keep tab open we will get back here soon. DNS Target

Step 2 - Add page in cloudflare

  1. Go to cloudflare.com
  2. Click on Add a site
  3. Enter petstore.com
  4. Add CNAME record name = @, target = DNS Target (from Heroku), proxy turned on
  5. Add CNAME record name = www, target = petstore.com, proxy turned on Cloudflare DNS settings
  6. Notice Cloudflare Nameservers below, we will need them later Cloudflare nameservers panel

Step 3 - Add redirect from www to naked domain

  1. Go to Rules panel
  2. Click on Create Page Rule
  3. For URL use www.petstore.com/*
  4. Setting Forwarding URL with status code = 301
  5. Destination https://petstore.com/$1 Cloudflare Forwarding URL example
  6. Click Save and deploy

This way www.petstore.com/cats forwards to https://petstore.com/cats instead of https://petstore.com/

Step 4 - Setup SSL certificate

  1. Go to SSL/TLS panel
  2. In Overview tab pick encryption mode Full (strict) Cloudflare encryption mode set to Full(strict)
  3. In Edge Certificates tab turn on Always Use HTTPS Cloudflare enforce HTTPS panel
  4. In Origin Server tab click Create Certificate, in hostnames list put two entries: petstore.com and *.petstore.com Cloudflare hostnames filled in)
  5. Notice keys displayed there, keep the tab open
  6. Go back to Heroku tab
  7. Click on Add certificate
  8. Set display, for example cloudflare
  9. From cloudflare tab copy public certificate and private certificate to respective fields
  10. Save certificate
  11. If there were any certificates generated by heroku, remove them Heroku certificates panel
  12. Under Domains edit petstore.com and select cloudflare certificate Heroku domains panel

    Step 5 - Change nameservers with DNS registrar

    Instructions will differ between all DNS registrars. For this example we will use GoDaddy.com.

  13. Go to godaddy.com
  14. Open petstore.com settings
  15. In DNS tab open name servers
  16. Use nameservers from step 1

HARDEST PART

Wait until changes take place, it can take up to 48 hours (usually it’s about an hour)

Sources

  1. https://medium.com/@conwayling/cloudflare-heroku-setup-redirect-naked-to-subdomain-aa56450e422c
  2. https://gist.github.com/mrispoli24/043684c7af2c5b5ac3b71cd46ac60972

That's it for this post, thanks for reading!