servd

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

Click 'Create a Service'

Give your service a sensible name, something like 'servd-image-optimise-proxy'. Select the HTTP Router option and then click the 'Create service' button.

On the next screen, click the 'Quick Edit' button.

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)
}

Click the 'Save and deploy' button.

Create another service (we suggest naming it 'servd-files-proxy') 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)
}

Navigate to your project's CloudFlare website.

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

The address added to these records doesn't matter - they'll be rerouted to your workers by CloudFlare anyway. We normally use the Servd project's CNAME address which can be found on the project's Domains page.

The records must be proxied through CloudFlare (orange cloud). e.g.:

CNAME - images.mysite.com - my-site-production.cl-eu-west-1.servd.dev - Orange Cloud
CNAME - files.mysite.com - my-site-production.cl-eu-west-1.servd.dev - 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 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.

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

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