How to setup a custom assets domain

If you want to use your own domain for assets instead of the default domain a.storyblok.com you can use a CloudFront distribution to forward requests to Storyblok’s origin servers.

The following tutorial shows how you can set up your own domain for Storyblok’s assets using Amazon AWS if you don’t have an Amazon AWS account yet, signup here.

Section titled 1. Create an SSL certificate 1. Create an SSL certificate

Create an SSL certificate for your domain using AWS Certificate Manager in the region us-east-1 (N. Virginia). It's important that you create the certificate in us-east-1 because CloudFront only accepts certificates from this region.

Section titled 2. Create a CloudFront distribution 2. Create a CloudFront distribution

Create a CloudFront distribution and define the following settings:

• Origin Domain Name: a.storyblok.com
• 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.

Setting your Origin Name according to your Storyblok space region is important when configuring your CloudFront distribution for assets. To determine your region, refer to the Content Delivery API documentation on defining specific regions in the Storyblok API.

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.
To achieve that you can proceed in 2 ways: a cache policy or the legacy settings.

The first approach is to create a new cache policy on AWS that will forward the accept header.
Create a new policy 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.

Another approach is to use the legacy cache settings, and for this, you don't need to create a new policy.
From the headers dropdown, select Include the following headers and add accept to the list.

Section titled 3. Restrict access to a space (optional) 3. Restrict access to a 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.

Section titled 4. Point your domain to CF 4. Point your domain to CF

After the CloudFront distribution has been created and has the status active change your DNS settings of your domain to point to YOURID.cloudfront.com.

Section titled 5. Replace the domain in your app 5. Replace the domain in your app

Create a helper that replaces the default domain of an image field URL with your new custom domain.

Example in Javascript:

        
      function img(src) {

  return (src || '').replace('//a.storyblok.com', '//assets.yourdomain.com')

}
    

If you restricted the access to a specific space as in step #3 you can refer to the example below:

        
      function img(src) {

  return (src || '').replace('//a.storyblok.com/f/YOURSPACEID', '//assets.yourdomain.com')

}
    

Section titled 6. Setup custom error pages 6. Setup custom error pages

Once you have done all the above steps your assets will start using your custom domain. If you delete an asset and then if you want to visit that URL you will see a not-friendly error page.

For cases like this, you can set up custom error pages in CloudFront from the error pages tab, intercepting all the HTTP errors.

Section titled How to limit access to multiple spaces How to limit access to multiple spaces

You can limit access from your CloudFront distribution to a list of spaces just by changing slightly the setup. Please, perform step #1 of the instructions above as first and step #5 as last also in this process.

Section titled 1. Create a CloudFront distribution 1. Create a CloudFront distribution

Create a CloudFront distribution using the following settings:

• Origin Domain Name: yourdomain.com
• Compress Objects Automatically: Yes
• Alternate Domain Names (CNAMEs): assets.yourdomain.com
• Origin Protocol Policy: HTTPS Only or Match Viewer
• SSL Certificate: Custom SSL Certificate (Choose your certificate)

Leave the default value for the other fields.

Section titled 2. Create a new origin for Storyblok 2. Create a new origin for Storyblok

Create a new origin with the following settings:

• Origin Domain Name: a.storyblok.com

Leave the default value for the other fields.

Section titled 3. Create a new behavior 3. Create a new behavior

Create a new behaviour with the following settings:

• Path Pattern: f/YOUR-SPACE-ID/*
• Origin or Origin Group: S3-a.storyblok.com (the origin you created in step #2)
• Compress Objects Automatically: Yes

Leave the default value for the other fields.

If you want to add assets from more spaces, you just have to repeat this step for each new one.

In the list of behaviors, move the newly created one(s) at the top of the list.

This way you will be able to display asset from f/YOUR-SPACE-ID (for each space you added) only and any other URL outside of that path will return the 404 page from your domain.