Setting up Heroku and Cloudflare (the right way)

setting-up-heroku-and-cloudflare.md

Setting up Heroku and Cloudflare (the right way)

The following outlines how to setup Heroku + Cloudflare with a full SSL certificate. What this means is that communication between the browser and the Cloudflare CDN is encrypted as well as communication between Cloudflare and Heroku’s origin server. Follow these steps exactly and the setup is a breeze.

Step 1: Set up domain names in Heroku

First you want to add the root domain and the www domain to heroku. You do this by clicking into your production application, then going to settings and then scrolling down to Domains and certificates.

Here you will add <your_domain>.com and www.<your_domain>.com. This will give you two CNAME records. They will look something like <your_domain>.com.herokudns.com and www.<your_domain>.com.herokudns.com.

Step 2: Add CNAME records to Cloudfare.

Now we can head over to Cloudflare and under DNS we are going to add two CNAME records. The first is going to be for the apex domain and the second for the www.

For the first enter the @ symbol for the Name field and then enter the /non-www/ Heroku DNS record that looks something like <your_domain>.com.herokudns.com. Where you entered the @ symbol should change to the root domain name when you save the record automatically.

For the second record enter www for Name field and then enter the /root/ domain Heroku DNS record that looks something like www.<your_domain>.com.herokudns.com.

When complete make sure that the cloud on the right of the record is orange, meaning traffic to these domains will go through cloudflare.

Step3: Generate origin SSL certificate

We can now go into the Crypto tab of the Cloudflare interface. Here we are first going to make sure that the SSL setting is set to Full as well as that the Always Use HTTPS is set to On.

Under Origin Certificates we will click on Create to create an origin certificate. The default settings should be Let Cloudflare generate private key and CSR with hostnames being *.<your_domain>.com and <your_domain.com and a Certificate Validity of 15 years.

Cloudflare will then generate a public and private key for you. Do not close this just yet. For the next step we will go back to Heroku in a new browser tab to add these.

Step 4: Add keys to Heroku

Now we can head back over to our Heroku application in a new tab and add these keys.

Under Settings scroll back down to Domains and certificates and click Configure SSl.

When you first add a domain to Heroku, an SSL is automatically created by Heroku. We are going to remove this certificate first by checking Remove SSL if it is visible and then continue. We can then click Configure SSL again and choose Manually. Here we can follow the prompts to paste the public and private keys into the Heroku interface. On the third step to set the DNS records you can click ok since we already did this in step 2.

After saving the SSL certificate everything should be all set and the application should load on the domain with HTTPS enabled.

With this setup, how do you refresh the SSL certificates on Heroku side?

@matus-vacula you would have to generate and re-upload a new one when the time comes from cloudflare.

came here to say it works and works great using it for dotenvx.sh

best guide. this should be the exact instructions on both Heroku and Cloudflare.

Great guide. Here are some updates as of Jan 2024:

1. It seems Cloudflare's Crypto tab is now named SSL/TLS.
2. The Always use HTTPS setting is found on the Edge Certificates subtab.
3. The Origin Certificates Create Certificate button is under the Origin Server subtab.

This work! Thanks!

Can confirm, this still works. @BMorearty nailed the updates above. I feel like I just got back an hour or two.