Categories
Cloudflare Hosting

Cloudflare Workers

I have been reading more and more about Cloudflare Workers and it looking really cool but I couldn’t think of how I might make use of them. Then I came across a post showing how to use the WP2Static plugin to take an existing WordPress site and migrate it into Cloudflare workers. That was the kick that I needed to migrate my site over. What I like about this solution is I get to keep the ease of content creation that goes with WordPress but the speed and security associated with a serverless site.

Therefore what I will do is maintain a WordPress Instance locally. It doesn’t need to be publically accessible & therefore no security risk. The Instance doesn’t need to be online either except if I want to edit content.

The WP2Static plugin supports a number of automated deployments to some hosting platforms. At the moment Cloudflare isn’t one of them so it does require a bit more manual work. Hopefully, they will support this in the future. I think this trade-off is worth it. Cloudflare has an extensive global network in more than 200 cities I’m going to leverage these to run this site.

The process itself is pretty straightforward

Add the WP2Static plugin to your WordPress site like any other WordPress plugin.

Make sure to set the export as a zip file and select offline usage. Click start static site export and then download the generated file, you will need this later.

On your machine, you need to have Wrangler installed. I have installed this with NPM

npm i @cloudflare/wrangler -g

Then navigate to your working folder and generate the config I have called my site wp-static

wrangler generate --site wp-static

This will then generate three things

  • Public Directory
  • Workers-site Directory
  • Wrangler.toml file

Then take the zip file generated earlier and drop the contents of it into the public folder.

The next step is to add the relevant config to your Wrangler.toml file You need to get the Zone Id and Account Id from within the Cloudflare portal. Below is an example of what my site looks like.

name = "wp-static"
type = "webpack"
account_id = "c9xxxxxxxxxxxxxxxxxxd"
workers_dev = true
route = ""
zone_id = ""

[site]
bucket = "./public"


[env.production]
# The ID of your domain you're deploying to
zone_id = "9881xxxxxxxxxxx4"
# The route pattern your Workers application will be served at
route = "jameskilby.co.uk/*"

Executing “Wrangler Preview” will build and deploy the site and launch a preview of it in your browser to check the site.

If it all looks good

wrangler publish 

will deploy it to a workers.dev based domain in my case I have registered kilby.workers.dev with Cloudflare so the site becomes:

https://wp-static.kilby.workers.dev

The final step is to publish calling the –env production parameter in my .toml file.

wrangler publish --env production

This is the final step and automatically deploys to Cloudflare under the jameskilby.co.uk domain.

Issues:

I have had to change a few things with the move to workers. I am now having to inject Google Analytics statically into the website. Previously I was dynamically injecting this on runtime however that didn’t appear to work with the new setup.

The way I have deployed the site means none of the dynamic elements of WordPress will work, however, I wasn’t using comments etc so this isn’t a big thing.

Performance:

The Cloudflare workers site Is much snappier than the native WordPress site even when it was using the Cloudflare CDN. It will also perform consistently globally whereas the old site would perform worse the further away from the UK the visitor was. This was due to only having a single origin server (running from my lab in the UK)

Testing with gtmetrix.com before and after the fully loaded page time has reduced to 1.6s from 5.5s

Cloudflare reports on the CPU consumed as part of running the side.

Costs

Due to the way this is using Cloudflare Workers it uses an element called Workers KV this is the global low latency Key-Value store. This is unfortunately not available in the free tier. Therefore I have upgraded to the Workers Unlimited plan for $5 a month something that I think is good value for money.

Categories
Cloudflare Hosting

Cloudflare Setup for WordPress Users

I have been a huge fan of Cloudflare since they first came to my attention.  I did a post on them a few years ago. They do an excellent job of improving web performance and increasing security. I also find Cloudflare’s Blog a fascinating read

I saw a tweet by Chris Wahl recently where he talked about a Cloudflare firewall rule he is using to protect his WordPress instance.

I am using something similar in the Firewall section and also leveraging a couple of other cool features.

Chris has done an excellent write up on the firewall part including how to achieve this with Terraform so for the detailed look check out his blog post here for a slightly simpler version see below.  This post will talk about some of the other features I am using to improve the Speed, Security and functionality of my site.

Firewall Rules

The most important thing when hosting a WordPress site is to protect the admin section.  This should be done with a strong password and preferably two-factor authentication.  However, if you can stop people even accessing this part of the site then even better.  If you are using Cloudflare then this is easy to achieve.

From the Cloudflare, portal navigate to My account > Firewall Firewall Rules and create a rule and give it an appropriate name then configure the settings as per below.   The IP(s) in the value section are the only ones that will be able to access the site once this configuration is live.

When the rule is live it will look like the below.  A really nice touch is the graph showing how many requests have matched this rule and you can also dig into see the individual events if required.  An example drop log is shown below

Page Rules

I also use another feature within Cloudflare called Page Rules. My account > Page Rules

Within the free tier of Cloudflare, you are allowed to create up to 3 rules.  At the moment I am using two of these.

The first of these is an automatic rule to rewrite to HTTPS. I am using this with wildcards to ensure that all pages are taken care of but still land on the intended page.   Details of what Cloudflare does are here

The other rule I use is for a status page.  This is more for demonstrating some AWS features as a status page but I am sure multiple other use cases exist.   As Cloudflare intercepts the request before any webserver the redirect is quicker.  However, in this case, they can do the redirect even if my webserver is not online.

Cloudflare Applications

Another really nice use case is Cloudflare’s applications.   As the HTML  CSS etc is passing through the Cloudflare network they can manipulate it.  They do this to improve performance using compression.  They also have the capability to inject code I use this to add Google Analytics into every web page.  They have a large number of Apps available to easily make functional changes to your site.

WordPress Plugins

WordPress has a plugin for interacting with Cloudflare via the API.  This has a couple of uses and it is highly recommended.  Firstly the plugin can optimise your WordPress install to work best with Cloudflare. It also gives you access to some of the basic settings allowing anyone with admin access to WordPress to tweak Cloudflare settings if required.

The second function that it performs is that performs automatic cache management automatically invalidating cache as the content is changed as required.