Set up a Custom Assets Domain Using Google Cloud

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-service created 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 443 for HTTPS or 80 for HTTP.

Define routing rules

Define how requests are evaluated and directed to backend.

• Mode: Simple host and path rule.

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;
}
    

References

• Google Cloud Load Balancing Documentation
• Google Cloud CDN Overview
• Storyblok Documentation