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 ? Show 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:
All work and end up, without any warnings redirect to https:// version of your custom domain Assumptions:
Heroku Custom Domain SetupHeroku 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
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’. Custom domain (Naked only, without prefixes) Add yoursite.com, and Heroku will give DNS target address, keep it on note as you will need it later. Custom domain (Prefix www) 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 After custom domain configuration on Heroku Voila! You have successfully setup Heroku for custom domain! Now let’s continue to the harder part of this article HTTPS SetupHTTPS Illustration 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 Medium.com is using HTTPS 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:
To issue SSL certificate, in this article you have two options:
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.
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. Heroku + HTTPS (Cloudflare) Installation Setup
5. Choose your preferred plan, but this time Free Plan is enought and click Confirm Plan to continue. Cloudflare Plan 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. Add DNS Records on Cloudflare 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
Type: CNAME Name: @ Target: DNS Target you got from Heroku for domain yoursite.com TTL: Auto Proxy status: Proxied
Type: CNAME Name: www Target: DNS Target you got from Heroku for domain www.yoursite.com TTL: Auto Proxy status: Proxied Recheck your configuration and click Continue if you already done. the final DNS records more or less will become like this. DNS final configuration 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. SSL/TLS encryption mode Do not forget to enable Always use HTTPS configuration to make your domain redirect to https:// if somebody access your website using http:// Force HTTP requests redirect to HTTPS Cloudflare configuration is almost complete and Cloudflare will give 2 nameservers. The last you have to do is change the nameserver of your domain.
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 WebsiteAll Configuration is already completed, let’s verify if it’s working. To do this, we can use cURL to your domain
curl -I -L yoursite.com This 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 cURL output for yoursite.com 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.
curl -I -L www.yoursite.com The result more likely almost similar with above result, except there are some differences in HTTPS headers. cURL output for www.yoursite.com
Try to access your website using your domain to see if it works and redirect to HTTPS version of your website! Troubleshooting
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. Empty Heroku application
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. |
