Set up a Custom Assets Domain Using Amazon CloudFront

With this setup, requests to your custom domain will be forwarded to Storyblok’s origin servers, ensuring seamless asset delivery while using your branded domain.

Prerequisites

You will need:

• An Amazon Web Services (AWS) account with appropriate permissions to create SSL certificates, and CloudFront Distributions.
• A domain name that you own and control.

Create an SSL certificate

Create an SSL certificate for your domain using AWS Certificate Manager in the region us-east-1 (N. Virginia). Selecting us-east-1 is essential because CloudFront only accepts certificates from this region.

Create a CloudFront distribution

Create a CloudFront distribution and define the following settings:

• Origin Domain Name: a.storyblok.com. This is Storyblok’s domain for assets stored in the EU region. Refer to our documentation to retrieve the correct domain for your region.
• Compress Objects Automatically: Yes.
• Alternate Domain Names (CNAMEs): assets.yourdomain.com.
• SSL Certificate: Custom SSL Certificate (Choose your certificate).

Leave the default value for the rest of the settings, except for the cache behavior, which will require some work.

Forward the accept header

Since the image service is using the accept header to determine if the client supports the webp format, you need to forward that header to the origin.

Create a new Cache Policy on AWS with the following settings:

• Headers: Include the following headers and add Accept to the list of the headers.

Inside the settings of the distribution in the Cache key and origin requests area, you can select Cache policy and origin request policy and select your newly created policy from the list.

Restrict access to a single space (optional)

The CloudFront distribution will be able to deliver assets from any space. In case you want to restrict the distribution to a specific space you can do so by filling out the Origin Path field in the Origin Settings with the value /f/YOURSPACEID.

Point your domain to CloudFront

After the CloudFront distribution has been created and and its status is active, change the DNS settings of your domain pointing it to YOURID.cloudfront.com.

Replace the domain in your application

Create a helper that replaces the default domain of an image field URL with your new custom domain, for example:

function transformImageSrc(src) {
    const url = new URL(src);
    if (url.hostname === "a.storyblok.com") {
        url.hostname = "assets.yourdomain.com";
    }
    return url.href;
}

Further resources

• AWS Documentation
• Amazon CloudFront Documentation
• Storyblok Documentation