Set up a Custom Assets Domain Using Google Cloud
Storyblok is the first headless CMS that works for developers & marketers alike.
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:
- A GCP account with appropriate permissions to create network endpoint groups, load balancers, and DNS records
- A domain name that you own and control
Configure a network endpoint group (NEG)
A network endpoint group (NEG) links backend services to Google Cloud load balancers, supporting VMs, serverless, and containers. Learn more in the NEG documentation.
In the Google Cloud console, go to the Network endpoint groups page.
Click Create network endpoint group.
Enter the name of the network endpoint group: image-service.
- For Network endpoint group type, select Network endpoint group (Internet).
- For Default port, enter
443. - For New network endpoint, select Fully qualified domain name and port.
- For the FQDN, enter
a.storyblok.com. - For Port type, select Default, and verify that Port number is
443.
Click Create.
Set up load balancing
Open the Load Balancing page in the Google Cloud console.
Click Create Load Balancer or select an existing one to edit.
Backend Configuration
Add a new backend service:
- Name:
image-service - Backend Type: Internet NEG.
- Protocol: HTTPS.
- Under Backends, select the NEG
image-servicecreated earlier. - Enable Cloud CDN.
- (Optional) Adjust cache settings, such as cache mode and TTL overrides.
Add a custom header for the backend:
- Header Name:
Host - Header Value:
a.storyblok.com
Click Done and Save the backend configuration.
Frontend Configuration
Add a frontend configuration to your load balancer:
- Protocol: HTTPS or HTTP
- IP Address: Choose an available static or ephemeral IP.
- Port: Default to
443for HTTPS or80for HTTP.
Define routing rules
Define how requests are evaluated and directed to backend.
- Mode: Simple host and path rule.
| Host | Path | Backend |
|---|---|---|
| * | /* | image-service |
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;
}