How to Set Up a Custom Domain for DigitalOcean Spaces with KeyCDN
This article assumes that you’ve already set up a DigitalOcean Spaces bucket (Space) and followed the steps within our DigitalOcean Spaces Quick Start Guide.
It’s possible to use a third-party CDN that pulls from the DigitalOcean Spaces bucket, set up a custom domain name for the CDN, and then WP Offload Media can use the custom domain for all offloaded media.
In this example we’re going to configure KeyCDN as the CDN provider, but you can adapt these instructions for other CDNs such as Fastly or StackPath too. However, be aware that to use Cloudflare’s CDN you’ll need to have an Enterprise account in order to use its “Host Header Rewrite” feature, or use the paid “worker” feature. For this reason, we don’t recommend using Cloudflare.
Enable File Listing
Before a third-party CDN can be used with a DigitalOcean Spaces bucket, it needs to be configured to allow listing of files, otherwise the CDN will not be able to proactively pull files from the bucket into its cache.
Go to the Settings for the Space (bucket), found under the bucket’s “More” dropdown link in the control panel’s Spaces page.
Click the “Edit” button alongside the “File Listing” setting.
Select the “Enable File Listing” radio button, and then “Save”.
With File Listing enabled for the bucket, you can now configure KeyCDN. Keep a tab open with your bucket’s settings page loaded though, you’re going to need it soon.
Add KeyCDN Zone (pull)
If you haven’t signed up for a KeyCDN account yet, sign up, and make sure to activate your account via the email that is sent to verify your account, you can’t do anything until your email address is verified.
If you already have a KeyCDN account, log in.
Either way you should now have an activated account as indicated in the KeyCDN admin panel.
Before adding a Zone to KeyCDN that will pull from the DigitalOcean Spaces bucket, flip back to the bucket’s settings and copy the “Origin” URL from the “Endpoints”.
Back in the KeyCDN admin panel, select the “Zones” section from the left-hand menu and add a Zone. Give the zone a nice short all lowercase name that makes sense for your site, ensure the Zone Status is “active” and the Zone Type is “Pull” as per its defaults. Then paste the full origin URL you copied from the DigitalOcean Spaces bucket’s settings into the “Origin URL” setting. Finally, click the “Save” button to start the deployment of the Zone.
Create CNAME Record For Custom Domain
While you wait for the new zone to deploy, copy the new Zone URL by rolling your mouse over it and clicking. We’re going to use this domain as the target of our custom domain’s CNAME record.
Log into your DNS provider’s admin panel and add a CNAME record for a subdomain of your site’s primary domain. The exact steps for doing this differ depending on DNS provider, but you should end up with some sort of means of adding the left most segment of your chosen subdomain’s name as a CNAME for the new KeyCDN Zone’s domain name. Something like this…
Add Zonealias For Custom Domain
Once your DNS has a CNAME record for your chosen subdomain, switch back to the KeyCDN admin panel and select the “Zonealiases” option from the left-hand menu. Then click “Add Zonealias”.
Enter your chosen custom subdomain into the “Alias” field, select your new Zone from the corresponding select list, and then click the “Add” button to save the new Zonealias.
Enable HTTPS For Custom Domain
Although in theory you’ll now have a working CDN with a custom domain, it will not be of much use to most as it does not currently support HTTPS. To fix that we’re going to enable using a free Let’s Encrypt certificate in the Zone settings which the Zonealias will then take advantage of.
Back in the Zones section of the KeyCDN admin panel, use the “Edit” option under the “Manage” dropdown menu for the new Zone.
The SSL configuration is hidden by default, so click the “Show Advanced Features” checkbox next to the “Zone Type” to show all the settings.
Scroll down to the “SSL” setting, choose “letsencrypt” from its options, and then scroll to the bottom and save the changes.
Now go make a cup of tea while you wait for the Zone to re-deploy.
Once you have your cup of tea, and more importantly the Zone has finished re-deploying, go back to the Zonealiases section of the KeyCDN admin panel and click “Edit” next to your custom domain’s alias.
Once in the “Edit Zonealias” page, just click the “Save” button so that it re-deploys and picks up the new SSL certificate setting.
Configure WP Offload Media With Custom Domain
It can take up to 5 minutes for the Zonealias to become globally active with its new certificate. After that time you can go into WP Offload Media’s settings in your WordPress Admin Dashboard, enable the “Custom Domain (CNAME)” setting, enter the custom domain, and “Save Changes”.
Check Custom Domain Works
You should now see that any media that has been offloaded to the DigitalOcean Spaces bucket is being served using the custom domain, and that the request headers show the items are being served via the KeyCDN servers.
In the following screenshot you can see how an offloaded media item shows the correct “File URL” and the image is visible, confirming all is well. For completeness I’ve accessed my browser’s devtools and checked the image’s response headers.