Drupal CDN integration

Introduction

A Drupal CDN integration can improve delivery of static files such as CSS, JavaScript, fonts and theme assets by serving them from your CDN Service Domain instead of from the origin server directly. This can reduce latency for visitors and offload part of the traffic from your origin server.

The guide below shows a step-by-step Drupal CDN setup using the CDN 5.0.0-alpha1 module and the included CDN UI module. If you are looking for how to use these modules in Drupal, this is the exact workflow that was tested on Drupal 11.4.4.

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 Drupal using the CDN and CDN UI modules

  1. Install the Drupal CDN module and enable both required modules. The following commands were used: 
    composer require drupal/cdn:^5.0@alpha
php vendor/bin/drush en cdn cdn_ui -y
    If your Drupal environment already manages modules through Composer and Drush, or if your deployment workflow enables them another way, you can continue to the next step once both CDN and CDN UI are available.
  2. Open the Drupal login page and sign in with an administrator account.
    Drupal administrator login screen
  3. After signing in, confirm that you are in the Drupal administrator interface. This is where you can manage modules and configure the CDN settings.
    Drupal administrator dashboard
  4. Open Extend and confirm that both CDN and CDN UI are enabled. If the modules are not enabled yet, enable them before continuing.
    Drupal Extend page filtered to CDN and CDN UI modules
  5. Go to Configuration → Web services → CDN integration. On the Status tab, enable Serve files from CDN.
    Drupal CDN settings status tab with Serve files from CDN enabled
  6. Open the Mapping tab. Keep simple mapping, change Limit by file extension to all files, enter your CDN Service Domain, and choose HTTPS URLs. The CDN UI supports simple mapping directly in the UI, which is enough for a single CDN Service Domain setup. The screenshot uses barsoom-cdn.cdnsun.org as the CDN Service Domain.
    Drupal CDN mapping tab filled with the CDN Service Domain and HTTPS URLs
  7. Leave Forever cacheable files enabled unless you have a specific reason to change it, then click Save configuration. Drupal accepted the settings immediately and no additional cache clear was needed before the new CDN asset URLs appeared on the frontend.
    Drupal CDN settings saved successfully with Forever cacheable files enabled
  8. Open the public frontend of your Drupal site and verify that static assets are loading from your CDN Service Domain. Drupal rewrote CSS, JavaScript and far-future theme asset URLs to barsoom-cdn.cdnsun.org.
    Drupal frontend after CDN integration

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

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