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

Now that our web traffic is being routed through CloudFlare’s network, we can take advantage of CloudFlare’s speed and caching services. To learn more, check out the Speed and Caching sections within the CloudFlare Help Center for more information. On the “Speed” tab, I recommend enabling “Auto Minify” for JavaScript, CSS, and HTML to reduce the file size of source code on your website. I also recommend setting “Rocket Loader” to “Automatic” to improve load time for pages that include JavaScript. On the “Caching” tab, I set the “Caching Level” to “Standard” and enabled the ‘Always Online” feature so CloudFlare will serve the website’s static pages from their cache if the website goes down.

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