This post follows the post Heroku & WordPress Website Deployment which details how to create and publish a website using WordPress and Heroku. This post details how to integrate your website with CloudFlare for performance and security services
Importing Your Website to CloudFlare
CloudFlare is a company that provides a Content Delivery Network (CDN), distributed domain name server services, and internet security services. CloudFlare works by positioning its servers between the website hosting provider (Heroku in our case) and the website visitors. This is done by transferring the domain to CloudFlare’s name servers so CloudFlare can handle the DNS records. As a result, CloudFlare’s network protects, speeds up, and improves availability for our website. They accelerate the website’s content by edge-caching and other techniques while also offering additional availability and security features to automatically handle DDoS and other real-world problems. Finally, they also a free SSL certificate so all of our visitors can have a secure connection the our website. Since website speed and secure connection availability are used in Google’s page rank, these services also improve the SEO of our website.
The first step is to create a CloudFlare account and import your domain using the importing tool. More details on this process are available at this CloudFlare article.
CloudFare will scan your DNS records and display them. Ensure that the www subdomain and naked domain are CloudFlare enabled () and not bypassed (). Lastly, CloudFlare will give you the required nameservers for your domain so that web traffic can be routed through CloudFlare’s network. A page similar to the image below will be displayed.
For GoDaddy, we will need to go to the Settings page of the custom domain. We will then update the nameservers to the custom addresses provided by CloudFlare. A more detailed explanation is available here.
After these settings propagate, your domain will be properly set up to route traffic through CloudFlare. If you have issues, refer to this CloudFlare article.
CNAME Flattening With CloudFlare
It is likely that our root or naked domain is being resolved using an A record. Heroku uses multiple IP addresses so choosing a single one can adversely impact the availability of the website. It is not recommended to use A-records in your DNS on Heroku because those static IP addresses can change at any time and represent a single point of failure. Instead, we can use CloudFlare’s CNAME flattening feature to dynamically resolve requests for the root domain.
To use CNAME flattening on CloudFlare for your naked or root domain, just add a CNAME record pointing from your root domain to your app on Heroku. Heroku will recognize this as a a CNAME record at the root domain as indicated by the icon and flattening will be in effect. A more detailed explanation is available here. The subdomain CNAME record should still be correct from importing the DNS records from GoDaddy to CloudFlare.
You can confirm that all of your requests are being resolved by CloudFlare using the curl command to inspect the HTTP headers. CloudFlare handled requests have a cfduid cooke and the server set to cloudflare_nginx.
$ curl -I wilselby.com HTTP/1.1 301 Moved Permanently ... Set-Cookie: __cfduid=da174cfe0820e0e9d68ba990831871c171475095881; expires=Thu, 28-Sep-17 20:51:21 GMT; path=/; domain=.wilselby.com; HttpOnly Server: cloudflare-nginx
CloudFlare Speed and Performance Features
CloudFlare and Heroku SSL Integration
One of the great benefits that CloudFlare provides is a free SSL certificate for your website. This means that all of your visitors can have a secure connection with your website. Start by going to the “Crypto” tab on the CloudFlare Dashboard.
CloudFlare offers three SSL options known as “Flexible”, “Full”, and “Strict”. For more details, see this post.
Heroku provides a wildcard SSL certificate for the applicationname.herokuapp.com domain. We can use Heroku’s certificate as well as CloudFlare’s certificate for our custom domain name to enable “Full SSL.” You can view and manage your CloudFlare certificates at the bottom of the “Crypto” tab.
Lastly, we want to force all of our visitor’s traffic over HTTPS. This will be done by setting a Page Rule from the CloudFlare Dashboard.
At this point, it is also recommended to create a Page Rule to exclude the admin section of your website from CloudFlare’s performance features which may inadvertently break backend functions in your admin section. The PageRule you will need to create for WordPress, for example, has the following structure for WordPress:
Using the curl command, we can see that the wilselby.com domain is redirected to https://wilselby.com which is further redirected to https://www.wilselby.com. This shows that our naked domain is being redirected to the www subdomain and all traffic is being forced over HTTPS.
$ curl -I -L wilselby.com HTTP/1.1 301 Moved Permanently Connection: keep-alive Set-Cookie: __cfduid=d821a4539650ab7fa033c2b90c6b74c431475097941; expires=Thu, 28-Sep-17 21:25:41 GMT; path=/; domain=.wilselby.com; HttpOnly Location: https://wilselby.com/ Server: cloudflare-nginx CF-RAY: 2e9a44f4d3643864-ATL HTTP/1.1 301 Moved Permanently Content-Type: text/html; charset=UTF-8 Connection: keep-alive Set-Cookie: __cfduid=dca4b80680b5f0ba18b702c046a1c5fd51475097941; expires=Thu, 28-Sep-17 21:25:41 GMT; path=/; domain=.wilselby.com; HttpOnly Location: https://www.wilselby.com/ Via: 1.1 vegur Server: cloudflare-nginx CF-RAY: 2e9a44f73d325e9a-TPA HTTP/1.1 200 OK Date: Wed, 28 Sep 2016 21:25:43 GMT Content-Type: text/html; charset=UTF-8 Connection: keep-alive Set-Cookie: __cfduid=d2efb64f3510b91c0c7d256ac1d262def1475097943; expires=Thu, 28-Sep-17 21:25:43 GMT; path=/; domain=.wilselby.com; HttpOnly Link: <https://www.wilselby.com/>; rel=shortlink Via: 1.1 vegur Server: cloudflare-nginx CF-RAY: 2e9a45033afa389a-ATL
Once everything is setup through CloudFlare, browse your website and make sure all of your content is being routed over SSL and you don’t have any mixed content preventing a completely secure connection.
See the following posts for more information about securing and customizing your website:
- WordPress & Heroku – Custom Website Development & Deployment
- WordPress & Heroku – Securing Your WordPress Database Connections
- WordPress & Heroku – Updating Website Content, Themes & Plugins
- WordPress & Heroku – Custom Domain Name Configuration
- WordPress & Heroku – WordPress Database Optimization