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.
)
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 headersand addAcceptto 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.
)
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')
}
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.
)
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.
)
If you have configured your origin with a.storyblok.com.s3.amazonaws.com, you should update it to a.storyblok.com to use the Image Service with your images and your custom domain.
)
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.