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.

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

  2. Click 'Create a Service'

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

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

  5. 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)
    }
    
  6. Click the 'Save and deploy' button.

  7. 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)
    }
    
  8. Navigate to your project's CloudFlare website.

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

  10. Select 'Workers' from the subnavigation bar

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

    *images.mysite.com/*
  12. Select your new optimise worker and 'Save'

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

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

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