servd

Documentation

Documentation > Assets > The Assets and Helpers Plugin >

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.

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

  2. Click 'Create A Worker'

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

  4. 'Save and deploy'

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

  6. 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 servdUrl = servdDomain + requestURL.pathname + requestURL.search
 return await fetch(servdUrl)
}

  7. Call this one 'servd-files-proxy'

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

  9. Select 'Workers' from the subnavigation bar

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

    *images.mysite.com/*

  11. Select your new optimise worker and 'Save'

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

  13. 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.

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