Setup Heroku + Custom Domain + HTTPS (Cloudflare)
Imagine you have built your own beautiful website using HTML, CSS, JS, or anything else then deployed it on Heroku. Have you ever wondered how to get your website to the next level ? For example you want to change your application domain from yoursite.herokuapp.com to something else ?
Imagine you have bought a brand new domain and decide to keep your existing or new application hosted on Heroku but you don’t know how to use domain with Heroku. You also want to use HTTPS on it but don’t know how ?
I understand there are some pains of doing trial and error to make your website works, but hopefully this article may helps you!
Initial Goals:
- Get some basic knowledge alongside implementation
- Going to those links without any worries:
http://yoursite.com
https://yoursite.com
http://www.yoursite.com
https://www.yoursite.com
All work and end up, without any warnings redirect to https:// version of your custom domain
Assumptions:
- You already have an application on Heroku, if you have not please create a new one on Heroku In this article I will use dummy name yoursite.herokuapp.com
- You already bought your custom domain from domain registrar such as Domain.com GoDaddy, Dynadot, Dewaweb, Domainesia, Niagahoster, or any other of your preferred domain registrars. In this article I will use dummy name yoursite.com
- Your custom domain is brand new or does not have any configuration for sub domains yet
- It does not matter if your Heroku application is empty or already contains your source code
Heroku Custom Domain Setup
Heroku supports custom domain. In order for your Heroku application to be available on your custom domain like yoursite.com rather than domains like yoursite.herokuapp.com you need to point your custom domain to your Heroku application URL.
To achieve this you need to add your custom domain to Heroku which will give you a DNS target domain. The DNS target domain can then be added to your domain hosting sites CNAME. And this will make your application available at yoursite.com
Setup
- Login to your Heroku account
- Select your application from Heroku Dashboard
- Go to settings
- Under domain section, click Add domain
You need to add 2 domains, the first one is your naked custom domain, and the last one is your custom domain with prefix ‘www’.
Add yoursite.com, and Heroku will give DNS target address, keep it on note as you will need it later.
Add www.yoursite.com, and Heroku will give DNS target address that different from the first one, keep it on note as you will need it later. After you do those steps, it will more or less looks like this
Voila! You have successfully setup Heroku for custom domain! Now let’s continue to the harder part of this article
HTTPS Setup
Have you ever wondered how to make your website more secure ? There are many ways to make your website more secure, one of them is using HTTPS (Secure version of HTTP) to serve your website. Almost all websites already using this, one of them is Medium.com
To create this secure connection, you will need to issue SSL certificate (also referred to as a “digital certificate”). What is SSL exactly ?
SSL (Secure Socket Layer) is the standard security technology for establishing an encrypted link between a web server and a browser. This secure link ensures that all data transferred remains private. It’s also called TLS (Transport Layer Security). Millions of websites use SSL encryption everyday to secure connections and keep their customer’s data safe from monitoring and tampering
Despite serving your website using HTTPS is optional, it is recommended for your website to serve using HTTP (without using SSL). SSL certificate mainly serves two functions:
- It authenticates the identity of the website (this guarantees visitors that they are not on a bad site)
- It encrypts the data that’s being transmitted
To issue SSL certificate, in this article you have two options:
- Using Heroku Hobby Plan or above (Paid)
Heroku provide some paid plan that provide SSL certificate so you can have HTTPS on your website. You have to pay starting from $7 for Heroku Hobby Plan. In this article, I will not discuss about this, but you can refer to Heroku SSL documentation for more information.
- Using SSL certificate from other provider (Paid / Free)
There are many providers that provide SSL certificate (your domain provider may also provide too!) keep it mind that most of them are paid and not cheap, but there are also many providers who provide free SSL certificate to serve your web under HTTPS by using their universal SSL certificate.
Free SSL certificate only suitable if you have personal blog or for education purposes. In this article we will use Cloudflare Free SSL/TLS. Cloudflare is one of the provider that provide SSL using universal certificate.
Installation Setup
- Open Cloudflare Free SSL/TLS website.
- Login or Sign Up with your Cloudflare account. Don’t worry, it’s free to create an account if you do not have an account.
- After log in, on the home page click Add Site (Or you will redirected to step 4 if this is the first time using Cloudflare).
- Input your custom domain, in this case yoursite.com (without any prefixes such as ‘www’ or others).
5. Choose your preferred plan, but this time Free Plan is enought and click Confirm Plan to continue.
6. Cloudflare will examine current DNS records for your domain.
DNS records are important because your domain need to be translated so it can redirect to the correct host. In this case you will make domain to be able redirect to your Heroku application.
At screenshot above, this domain currently has no DNS records, Click Add Record to add new DNS record for your domain. You need to add at least 2 new records. Add the following DNS records configuration
- DNS record for yoursite.com (without prefix ‘www’ / naked domain)
Type: CNAME
Name: @
Target: DNS Target you got from Heroku for domain yoursite.com
TTL: Auto
Proxy status: Proxied- DNS record for www.yoursite.com (with prefix ‘www’)
Type: CNAME
Name: www
Target: DNS Target you got from Heroku for domain www.yoursite.com
TTL: Auto
Proxy status: ProxiedRecheck your configuration and click Continue if you already done. the final DNS records more or less will become like this.
7. You will be given option to continue with default setup or transfer domain, just click default to continue.
8. You will redirected to SSL/TLS setting. For the SSL encryption mode. it is recommended to use Full or Full (strict), but in this article I will just use Flexible for testing purposes to ensure it works later on.
Do not forget to enable Always use HTTPS configuration to make your domain redirect to https:// if somebody access your website using http://
Cloudflare configuration is almost complete and Cloudflare will give 2 nameservers.
The last you have to do is change the nameserver of your domain.
- Go to your domain registrar (where you bought custom domain) configuration page
- Take a note or screenshot the old nameservers data for your backup
- Change the default nameservers to nameservers given by Cloudflare
Voila! You have successfully setup HTTPS for your domain!
Since you have modified DNS records of your domain, you will have to wait for a few minutes until a few hours (maximum 24 hours) to ensure your domain configuration is already propagate correctly before continuing to the rest of this article. This condition is absolutely NORMAL. Don’t worry about it.
Verify Your Website
All Configuration is already completed, let’s verify if it’s working. To do this, we can use cURL to your domain
- Verify if yoursite.com is served using HTTPS by typing the following command on your favorite Terminal or Command Prompt
curl -I -L yoursite.comThis command will return result more or less like below image. Don’t worry about it if you don’t understand the meanings just yet. I blurred my own actual domain, don’t worry it used the same method as written in this article
Here is some explanation regarding the output above:
When you tried to cURL yoursite.com , it uses HTTP instead of HTTPS to access the web address. As you have enabled Always use HTTPS configuration in Cloudflare, it will redirect HTTP request to HTTPS. This action will return HTTP/1.1 301 Moved Permanently and continuing to access HTTPS version of the website.
When cURL tried to access HTTPS version of the website, it will be translated by Cloudflare nameservers (that’s why you have to change the default nameservers). Cloudflare nameserver will read DNS records of the domain, since your domain yoursite.com has 2 CNAME DNS records (with ‘www’ and root/naked domain one), it will use DNS records corresponding to root/naked domain.
Cloudflare will secure the connection using HTTPS by adding Cloudflare specific HTTPS headers and finally accessing Heroku DNS server. If your Heroku application can be accessed without any problem, it will return HTTP/1.1 200 OK.
- Verify if www.yoursite.com is served using HTTPS
curl -I -L www.yoursite.comThe result more likely almost similar with above result, except there are some differences in HTTPS headers.
- Verify access your website using your favorite browser
Try to access your website using your domain to see if it works and redirect to HTTPS version of your website!
Troubleshooting
- Instead of getting HTTP/1.1 200 OK, I got HTTP/1.1 502 Bad Gateway
Please make sure your Heroku application already contains your source code, if your Heroku application is still empty, Cloudflare will return 502 error code instead of 200 despite if you tried to cURL to your heroku application yoursite.herokuapp.com it will return 200.
- After following tutorial, my domain still cannot be resolved
Please make sure you have followed all steps above, if you think there is no mistake, most likely you still have to wait for few minutes or few hours more because DNS records still not propagated yet.
Closing
Hopefully this saved you a few clicks and minutes. Like all domain stuff, configuration, and other things. I understand there will be some nerve-wracking minutes while waiting for things to propagate, but hopefully this article will allow things to make much more sense! Please give claps if you think this article helpful :)
