servd

Log into your Cloudflare account and select 'Workers' from the domains dropdown menu in the top navigation

Click 'Create A Worker'

In the code pane on the left copy and paste the following:

const servdDomain = 'https://optimise2.assets-servd.host';

addEventListener('fetch', event => {
 event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
 let requestURL = new URL(request.url)
 let newRequest = new Request(request)

 //Handle auto webp
 if(requestURL.searchParams.has('auto')) {
 
 //They've asked for auto webp
 let autoParts = requestURL.searchParams.get('auto').split(',');
 if(autoParts.indexOf('format') >= 0) {

 if (request.headers.has('accept') && 
 request.headers.get('accept').indexOf('image/webp') >= 0) {
 //Forward the webp acceptance to upstream
 newRequest.headers.set("accept", "image/webp")
 //We need to prevent caching of webp images for 
 //browsers which don't support them
 //We achieve this by adding an additional query param 
 //which the upstream service ignores
 requestURL.searchParams.set('proxyUrlAddition', "supports-web-p")
 }
 
 }
 }

 let servdUrl = servdDomain + requestURL.pathname + requestURL.search
 return await fetch(servdUrl, newRequest)
}

'Save and deploy'

Return to your new function's overview page and give it a sensible name. Something like 'servd-image-optimise-proxy'

Create another function following the same steps with the following code:

const servdDomain = 'https://cdn2.assets-servd.host';

addEventListener('fetch', event => {
 event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
 let requestURL = new URL(request.url)
 let newRequest = new Request(request)

 let servdUrl = servdDomain + requestURL.pathname + requestURL.search
 return await fetch(servdUrl, newRequest)
}

Call this one 'servd-files-proxy'

In the domains dropdown in the top navigation, select the domain that you would like to use to serve your files and images

Select 'DNS' from the subnavigation bar and add two DNS A records, one for images and one for files.

The IP address added to these records doesn't matter - they'll be rerouted to your workers by CloudFlare anyway. We normally use `1.1.1.1`.

The records must be proxied through CloudFlare (orange cloud). E.G.:

A - images.mysite.com - 1.1.1.1 - Orange Cloud
A - files.mysite.com - 1.1.1.1 - Orange Cloud

Select 'Workers' from the subnavigation bar

Click 'Add Route' and enter the domain or subdomain that you'd like to use. For example:

*images.mysite.com/*

Select your new optimise worker and 'Save'

Do this again for your files worker using a different domain or subdomain

Servd Plugin < 2.0.5

In your Craft project update your Servd Assets volume to have a Base URL that matches the domain of your new files worker.

Set the Optimise Prefix to the domain you have used for your optimise worker

Servd Plugin >= 2.0.5

In your Craft project update your Servd Assets volume to have a Custom CDN URL Pattern which looks like this:

https://files.mysite.com/{{projectSlug}}/{{environment}}/{{subfolder}}/{{filePath}}

And a Custom Image Optimise URL Pattern which looks like this:

https://images.mysite.com/{{projectSlug}}/{{environment}}/{{subfolder}}/{{filePath}}{{params}}

Feel free to experiment with the placeholders in these URLs by removing them and adding appropriate logic to your CloudFlare worker to compensate.

All of your images and files should now be being served from your own domain.