Silverstripe CMS CDN Integration

Introduction

A Silverstripe CMS CDN integration can improve delivery of theme resources, project stylesheets, JavaScript, uploaded images, and other public files by serving them from your CDN Service Domain instead of directly from the origin server. This can reduce latency for visitors and offload static traffic from the origin.

This guide shows how to configure URL rewriting with the dorsetdigital/silverstripe-cdnrewrite 2.2.0 module. The procedure was tested on Silverstripe CMS 6.2.5 with Origin Pull.

Before you start

  • This tutorial shows how to integrate a CDN service into a website. In this particular demo example we will use:
    • barsoom-cdn.cdnsun.org as the CDN Service Domain, and
    • https://barsoom.cdnsun.org as the website URL (i.e. barsoom.cdnsun.org is the Origin Domain).
  • Please visit the Services/How-To section to obtain your CDN Service Domain.
  • Before you take any steps please back up your files and database.
  • To integrate a CDN service on https:// website the CDN service must have SSL enabled.
  • If your website embeds custom fonts then please first enable CORS for them.
  • Before you take any steps please make sure that your CDN Service Domain is ready-to-use here.

Create CDN Static service

Please refer to Creating a CDN Static service for more details.

How to enable CDN in Silverstripe CMS

  1. Open a terminal in the Silverstripe project root and install the CDN Rewrite module with Composer: 
    composer require dorsetdigital/silverstripe-cdnrewrite:^2.2

    See the Silverstripe CDN Rewrite repository for the module source and configuration reference.

  2. Create app/_config/cdn.yml and add the following configuration. Replace the example domain with your CDN Service Domain. 
    ---
Name: cdnconfig
After: '#coresecurity'
---
DorsetDigital\CDNRewrite\CDNMiddleware:
  cdn_rewrite: true
  cdn_domain: 'https://barsoom-cdn.cdnsun.org'
  add_debug_headers: false
  enable_in_dev: true
  enable_in_preview: false
  subdirectory: ''
  add_prefetch: true
  rewrites:
    - '_resources'
    - 'assets'
    - 'client'

    Silverstripe publishes module and theme resources under _resources and uploaded files under assets. The client prefix covers project CSS and JavaScript stored in public/client; omit it if the project does not use that directory. Add any other public asset prefixes used by the project.

    Set enable_in_dev to true only when CDN rewriting is needed in a development environment. Keeping enable_in_preview false leaves the CMS preview on origin URLs, while the published frontend uses the CDN Service Domain.

  3. Rebuild the Silverstripe configuration and flush cached manifests: 
    vendor/bin/sake dev/build flush=all

    The module rewrites matching absolute paths in the public HTML response. Files remain in their normal locations on the origin, where the CDN retrieves and caches them through Origin Pull.

  4. Sign in to the Silverstripe CMS administration area, open Pages, and edit the page as usual. Save and publish the page after making changes. Uploaded images can remain managed in Silverstripe; their public assets URLs are rewritten on the frontend.
    Silverstripe CMS page editor showing the published Barsoom page content
  5. Open the public site and confirm that the frontend remains styled normally and static assets load from the CDN Service Domain.
    Styled Silverstripe CMS frontend with resources and uploaded content delivered through the CDN Service Domain

Verify & Troubleshoot

  • View HTML source code of your web pages to verify that you are using CDN, you should see source attribute of your images, CSS, JavaScript, etc. beginning with your CDN Service Domain.
    Frontend HTML proof that static assets are loaded from the CDN Service Domain
  • Don't see your CDN Service Domain in the source code of your web pages? If your website is using any cache plug-in/mechanism then you might want to clear/flush its cache.
  • Having trouble with custom fonts? Please refer to Using custom fonts with CDN - setting CORS for more details.
  • Still having trouble? Check your CDN URLs using our content check tool or please refer to Debugging a CDN service for more hints.

Contact Us

  ______   _    _     _____   
 /_   _// | || | ||  |__  //  
 `-| |,-  | || | ||    / //   
   | ||   | \\_/ ||   / //__  
   |_||    \____//   /_____|| 
   `-`'     `---`    `-----`