Documentation
Can I use my own domain for assets?
The Servd Assets Platform allows you to manage your assets and optimise your images via Servd's built-in services. But when you do this the URLs for those images will always contains Servd's domain names:
cdn2.assets-servd.host
optimise2.assets-servd.host
In some circumstance you might want to replace these domains with your your own domains or subdomains:
images.mysite.com
Although Servd doesn't support this as a built-in feature, it can be achieved using a request proxy service which can adjust the domain on the fly. Below we'll detail how to set this up for free using Cloudflare workers.
-
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 workerServd 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.