DEV Community

loading...
Cover image for Proxying free Heroku Dynos though Cloudflare to a Custom Domain

Proxying free Heroku Dynos though Cloudflare to a Custom Domain

Evan Tahler
Node, React, Rails, and lots of open source! - Actionhero.js Creator - node-resque Creator - Elasticsearch-dump Maintainer
・2 min read

The Actionhero project runs a number of websites for the community - documentation, sample apps, etc. We often rely on Heroku’s free hosting to run these applications. Heroku makes it very easy to deploy your apps in a 12-factor way, attach databases, and deploy with a simple git push. It’s a great, free option to deploy your applications.

The Actionhero project uses Cloudflare as our DNS provider, as they provide a simple interface to enforce HTTPS, add caching, and a whole other host of features… and it’s also free!

Alt Text

One of the Cloudflare features we have enabled is full HTTPS encryption across the whole domain, meaning that traffic remains HTTPS’d between you and the Cloudflare proxy (which provides caching), and remains HTTPS’d from Cloudflare to our servers at Heroku.

Alt Text

Heroku doesn’t provide HTTPS certificates for free dynos/apps like the ones we are using, except on their own domain, *.herokuapp.com. By default your app will be visible on a domain like my-app.herokuapp.comHowever, you can opt to add custom domain to your app, like my-cool-app.com but… you can’t add HTTPS on the free Heroku tier. Your custom CNAME won’t support it.

Alt Text

If you point your CNAME to this new custom Heroku DNS target, Cloudflare will keep directing the client to HTTPS, which Heroku won’t like… and you’ll end up with a Too many redirects error.

Alt Text

The way to solve this is to use the original CNAME target Heroku gave you even though it’s no longer listed in the interface. Point the CNAME in Cloudflare at *.herokuapp.com even though Heroku will tell you to use a new DNS target in the interface, and you will have encrypted traffic flowing in no time!

CNAME     chat.actionherojs.com     chat-actionhero.herokuapp.com
Enter fullscreen mode Exit fullscreen mode

As an interesting notes, older Heroku apps keep showing the original *.herokuapp.com CNAME target in the dashboard, and not a new custom one, even with a custom URL added. This behavior confirms that the above is a good path to get things working!

Alt Text

Discussion (2)

Collapse
timmygee profile image
timmygee

This is literally the only way to make Heroku and CloudFlare work together with SSL. Thank you so much!

To be clear, the CNAME in CloudFlare can't be *.herokuapp.com but you can make it your-heroku-app.herokuapp.com

Collapse
sepyrt profile image
Dimitris R

Brilliant! Thank you! :)