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.

Does this still work ?

Does this still work ?

it's working for upgraded account

Defined upgraded ?

…

On Fri, Oct 29, 2021 at 10:15 AM I Made Ocy Darma Putra < ***@***.***> wrote: ***@***.**** commented on this gist. ------------------------------ Does this still work ? it's working for upgraded account — You are receiving this because you commented. Reply to this email directly, view it on GitHub <https://gist.github.com/043684c7af2c5b5ac3b71cd46ac60972#gistcomment-3944588>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AELIART5CPSQENNJVLN4UPLUJKUB5ANCNFSM5G5N6OGQ> .

Defined upgraded ?

Under Heroku App > Settings > Configure SSL

You need to pay pro dynos for configure SSL, sir

Appreciated

Does this take some time to update? There's nowhere for me to enter hosts when generating a client certificate, and in heroku when you add it, for domains it just says "cloudflare". I would expect it would say something like "*.domain.com, domain.com"

I notice there is a "hosts" section for mTLS on the client certificate page, but I'm not sure if we need to fill that in

When I view the domain it just has CF error page: 525 SSL handshake failed

Actually........ further nevermind, I was generating a client certificate and not an origin certificate

Thank you!

🙏

Thank you very much!
I didn't change anything on Heroku SSL management (Heroku managed it fine before Cloudflare) and after about 6 weeks Heroku started to complain about DNS records that were not entered correctly. This had to do with their SSL certificate. After doing this gist and removing all previous Heroku SSL certificates, all problems were resolved!

Perfect

awesome!

Thanks!

Will this work for wildcard subdomains?

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.