Yet.Another.Dev.Blog.

# TODO: Add Catchy Tagline

The Poor Dev's Guide to Hosting on Heroku


UPDATE 2020-03-29:

Recently, I was having issues with logging in to my Rails app with the below setup. It looks like the free way is not working any longer and will require at least $7/month to run your service with this particular Cloudflare-backed SSL. In order to get Cloudflare and Heroku to play nicely with each other, you will need to:

Heroku:

The app dyno must have an account type of Hobby or higher. This will kick off the auto generation of their Automated Certificate Management (ACM) service.

Cloudflare:

The configuration for the SSL/TLS needs to be updated from Flexible to Full, which encrypts end-to-end, using a self signed certificate on the server.

----

Sometimes you just want a simple, non-monetized app for your hobbies, which is this site that you are reading right now. Eventually, I plan on incorporating a monetization model with privacy as the main focus in order to pay to keep the server lights on. For the meantime, there are workarounds to have your app running uninterrupted in a Heroku production environment.
 
This post assumes that you already have your app hosted on Heroku.


Heroku


So you purchased a domain name (hopefully from a privacy-focused site like NameSilo) and want your Heroku app to be accessible via a nice, clean URL. Great! Let's get to it.


# Heroku CLI
$ heroku domains:add www.example.com
Adding www.example.com to ⬢ example-app... done
 ▸    Configure your app's DNS provider to point to the DNS Target
 ▸    whispering-willow-5678.herokudns.com.
 ▸    For help, see https://devcenter.heroku.com/articles/custom-domains

The domain www.example.com has been enqueued for addition
 ▸    Run heroku domains:wait 'www.example.com' to wait for completion

Look at you go! You're almost done. We need the DNS Target that Heroku just provided us to point our Cloudflare DNS to. Grab the DNS output and head on over to your Cloudflare account.


Cloudflare


If you haven't already, setup your domain within Cloudflare. I'll spare the mundane details that could be obsolete shortly, but as of writing this, there was a "+ Add site" button within the account page. Add your newly purchased URL and let Cloudflare do the heavy lifting.

At your DNS Records page on Cloudflare, add a new CNAME record that points to the DNS Target from the Heroku CLI.


# You may need to delete the original CNAME if it exists

Type: CNAME
Name: www
Domain name: whispering-willow-5678.herokudns.com (DNS Target)

You probably want your website to be accessible with or without the www. A pure-Heroku setup would not be possible, but Cloudflare has your back with CNAME flattening.


# Delete any A name references to your URL

Type: CNAME
Name: example.com (Your URL without www)
Domain name: whispering-willow-5678.herokudns.com (DNS Target)

You should have two records at this point. Continue on in the setup process. Cloudflare should supply you with two DNS nameservers. At this point, we need to add those two name servers to our domain registrar.


NameSilo (or other domain registrar)


This section will differ per registrar, but the gist of the process is to navigate to your account's domain console manager. This can be done via NameSilo by navigating to your domain console and updating the DNS found under the Default NameServers section to the Cloudflare-provided name servers.

It's as easy as copy-pasting the 2 CF servers and removing the third default record. This step may take the longest, so temper you instant gratification. It could take up to 48 hours for the name servers to switch over.


Cloudflare SSL


You got your email from Cloudflare that your DNS settings have been updated and your site is now active. Congrats!

Now we want to force all the traffic through SSL. Go to your domain in your CF account and navigate to the Crypto section. Scroll down and enable Always Use HTTPS.

You should now see your traffic being redirected to https:


$ curl -I -L www.example.com
HTTP/1.1 301 Moved Permanently
Date: Tue, 11 Jun 2019 19:08:18 GMT
Connection: keep-alive
Cache-Control: max-age=3600
Expires: Tue, 11 Jun 2019 20:08:18 GMT
Location: https://www.example.com/
Server: cloudflare
CF-RAY: 4e55df788c3829e7-SEA

Note: This may take a few minutes to resolve and be redirected via https, so don't get worried if it's not working instantly.


Uptime Robot


Heroku's free tier comes with a restriction of your app being put to sleep after 30 minutes of inactivity. To prevent having your new URL from lagging while your app boots up after the inactivity period, you can signup for an automated ping service. The one that I have used in the past without any issues has been Uptime Robot.

This should be a temporarily solution, but the option is available. Add a new monitor with your validated URL and keep your app alive.

Happy deploying!
Cloudflare Heroku NameSilo Uptime Robot