MetaCDN - StreamShark

Integrating MetaCDN's site accelerator with a Pantheon-powered Drupal site

What is Pantheon?

Pantheon (https://www.getpantheon.com, http://blog.chriscentral.com/2013/02/06/a-review-of-pantheon-for-drupal) offers a Drupal-as-a-Service platform which makes it very intuitive and easy to setup a Drupal-powered website. Pantheon can be thought as the manager in the background for all your Drupal sites, that takes care of things like provisioning and scaling your Drupal site. In this article, we want to show you how you can easily integrate MetaCDN's site accelerator (http://support.metacdn.com/entries/21727991-Accelerating-your-website-with-MetaCDN-Site-Accelerator) with a Pantheon-managed Drupal site by leveraging the popular Drupal CDN module (https://drupal.org/project/cdn, http://drush.ws/drush_windows_installer).

One great feature (of many) is that Pantheon automatically creates 3 environments for each Drupal site you deploy: dev (for development), test (aka staging) and live (your production code). This helps you maintain good practices by offering a workflow: you start developing your sites and code in the dev environment, then import those changes into the test env before they are finally imported from test into production (live). These 3 environments are independent and separate of each other which allows for maximum flexibility while developing and testing. Also, Pantheon allows for copying/cloning from any environment to every other environment: for example, you can bring your testing environment into the exact state your live site is currently in, or have your Dev reflect what's going on in Test at the moment.

Very conveniently, our entry level Website Accelerator "Lite" plan includes 3 website origins so you can enable MetaCDN on all 3 of your Pantheon environments (dev/test/live).

What are we doing in this guide?

Let's get down to business. Here's what we are going to do in this guide:

  1. Register a new Pantheon account
  2. Setup a Drupal 7 site XYZ
  3. Add some content to XYZ such as videos and/or images.
  4. Setup a MetaCDN site accelerator with origin XYZ
  5. Setup drush,  a command-line utility for interacting with your Drupal sites
  6. Install the Drupal CDN module
  7. Configure the CDN module and integrate the site accelerator in XYZ so that the links get re-written properly and content is served from MetaCDN's network
  8. Test & verify the integration
  9. Show how easy it is to embed branded, on-demand and live media into XYZ

Register a Pantheon account & setup a Drupal 7 site

Note: Pantheon offers great online support articles (http://helpdesk.getpantheon.com) where most information you'll ever need can be found. Make sure to always check there first.

  1. Head over to https://www.getpantheon.com/
  2. Follow the getting-started guide at http://helpdesk.getpantheon.com/customer/portal/articles/717236-pantheon-101-getting-started
  3. Make sure you select the 'On-Server development' (SFTP) option, we'll need this to install the CDN plugin without complications

At this point you should have a freshly (or imported, depending on what you've chosen in the above steps) installed Drupal 7 installation. You can access your personal dashboard but there is no actual site deployed yet. Your dashboard can be thought of as the portal to all your Pantheon-powered Drupal sites.

Let's setup a new Drupal site:

  1. From your dashboard overview, choose the 'Add new site' link
  2. Follow the guide at http://helpdesk.getpantheon.com/customer/portal/articles/366900-launching-your-first-site
  3. Once your site has been created, click on the corresponding link in the dashboard page to start developing and fleshing out the site

At this point, you should see something similar like the screenshot below (minus the commits that I've already done):

 KB-initsite.png

As you can see, I've named my site mcdn-integration - this will be different to your own installation. You'll notice the 3 environments (buttons in upper left corner named Dev, Test and Live) that we spoke of above. As mentioned in the introduction of this article, the workflow usually goes something like this:

  • Develop your site in the Dev environment, this is where the newest features are added and pre-tested, corrected, updated and re-tested. The Dev env is the forefront of your site in terms of content and features.
  • Once a development cycle is finished (also during a cycle, depending on how your team is setup and maintained), all changes made in the Dev env are cloned/copied over to the Test env where it gets tested rigorously. If there are issues or new bugs, we go back to Dev and fix it, then re-test.
  • If all tests and checks are successful, the Test env gets cloned/copied to the Live stage where it is made available to the public.

Pantheon makes it a breeze to work with those clearly distinct environments and the smooth integration with GIT (or SFTP, for On-Server development), i.e. Pantheon automatically picks up your changes and suggests that you commit these with a click of the Commit button, allows for intuitive and state-of-the-art incremental development.

Before you can use the Test and Live environments, you need to initialise them:

  1. Go ahead and init Test and then the Live by pressing the corresponding button (for Test, that would be Clone the Development Environment now to create the Testing environment, see screenshot below) in the main section of each environment. Do the same thing for the Live environment as well.

KB-init-test.png

 

Add some content to your site

To test that our Site Accelerator integration works effectively, we'll need to add some content to a Drupal node (page). Simply log into your live Drupal site, click on Add content and follow the on-screen instructions. Be sure to include at least an image so that we can check later that this is loaded from the accelerated domain instead of Pantheon's origin servers.

We've setup a simple test-page containing a video and an image, including some explanatory text here:

KB-drupal-site.png

Setup the MetaCDN Site Accelerator

Note: if you want your Test (even Dev) environment to be accelerated, i.e. CDN-enabled, simply adjust the origin URL accordingly in the following steps.

Now that we have our 3 Drupal environments, including the live site (production), we are going to setup the MetaCDN site accelerator with our live site URL as the Origin URL.

To do so, simply follow the steps at http://support.metacdn.com/entries/68146953-Accelerating-your-first-website-with-MetaCDN

This will generate an accelerated URL (for the example above, it would be: mcdn-pantheon-integration.sa.metacdn.net) which we'll be using when integrating it into the Drupal site. Once your site is ready (can take up to 1 hour) to be served (status Active), it is ready to be used and we continue configuring the Drupal site.

Install Drush

Note: we assume you are using a Unix/Linux-based system (including Mac OS). However, windows installers are readily available too, see http://drush.ws/drush_windows_installer for more information.

The recommended way to install new modules into your Drupal installation is via the command-line tool Drush (http://www.drush.orghttps://drupal.org/node/1515886). You can also install modules via UI as shown in the next section. Before we can use Drush with the Drupal sites created on Pantheon, you need to install it on your local host and then use a file provided by Pantheon to invoke commands remotely.

Here's how to install Drush on your local machine:

  1. Download package from https://drupal.org/node/1515886
  2. Unzip to a directory of your choosing
  3. follow the installation instructions in the included README.txt file
  4. to test: invoke 'drush --version'

Once Drush is installed, head over to https://dashboard.getpantheon.com and download the aliases file for Drush:

  1. On https://dashboard.getpantheon.com, hit Download all Drush aliases
  2. save it under ~/.drush
  3. test it by invoking 'drush sa'

Make sure you run the same local drush installation like the one installed on your Pantheon Drupal site. To test, invoke the following:

  • for your local installation: 'drush --version'
  • for your remote Drupal site: 'drush @<alias-name-found-in-aliases-file> --version', where <alias-name-found-in-aliases-file> is a replaced by a value from 'drush sa'

Please also have a look at http://helpdesk.getpantheon.com/customer/portal/articles/411388-using-drush-on-pantheon should you run into any problems.

Install the Drupal CDN module

For integrating the MetaCDN site accelerator into a Pantheon-powered Drupal site, one essential step is to install the CDN module (https://drupal.org/project/cdnhttp://helpdesk.getpantheon.com/customer/portal/articles/733395-pantheon-cdnhttp://wimleers.com/article/easy-drupal-cdn-integration-for-fun-and-profit). This module is responsible for automatically re-writing the links on your site so that asserts (such as CSS, images, javascript etc.) are pulled from the CDN instead of your origin server, i.e. the Pantheon servers where your site is hosted. The CDN module is not required per se as all the links in the Drupal sites can be re-written by hand but that involves a lot more manual work than is necessary.

 

Installing CDN module using Drush

To install the CDN module using Drush, follow these steps:

  1. Download the CDN module by invoking: 'drush @<alias> dl cdn'
  2. Install and enable the module by invoking: 'drush @<alias> en cdn'

Once both commands completed successfully, continue with section Configure the CDN module.

 

Installing CDN module using UI

To install the CDN module over the UI, follow these steps:

  1. If you haven't already done sone while setting up the site, switch the Connection Mode to SFTP
    KB-sftpmode.png
  2. Installing the CDN plugin needs to be done in your actual Drupal site, so hit the button to open your dev site which opens a new tab/window in your browser:
    KB-dev-site-button.png
  3. (one-time only) Configure your site name and credentials if this is the first time you open your dev site. Simply follow the on-screen instructions.
  4. Once your Drupal site loads, select Modules in the navigation bar at the top of the page. This brings up an overlay with all currently installed modules. Click Install new module.
    KB-install-module-click.png
  5. In the next screen, paste the link http://ftp.drupal.org/files/projects/cdn-7.x-2.6.tar.gz into the Install from a URL field, click Install.
  6. The CDN module should have been installed successfully. If it did not, see the Troubleshooting section further below.
  7. From the current page, select Enable newly added modules. This brings you back to the modules overlay. Scroll down and find the CDN module under the Performance and Scalability header. Enable it by selecting it, then hit Save configuration.
  8. Once the module is installed, we need to let the Test and Live environment know about this. Go back to the dashboard, add a commit message and commit your changes in the Dev environment:
    KB-cdnmodule-commit.png
  9. Now copy/clone the changes to the Test and Live environment: simply hit the corresponding button in both environments. They're highlighted and self-explanatory.

Configure the CDN module

 At this point, we have

  • Setup a Pantheon account
  • Setup an empty Drupal site
  • Created an accelerated domain using MetaCDN's site accelerator with the Drupal site as the origin
  • Installed the CDN module into the Drupal site

The interesting part is next: integrating the site accelerator with your Drupal site so that assets are served from MetaCDNs network instead of Pantheon's host directly! It's as easy as enabling the CDN module and specifying the accelerated domain as the CDN address.

Configure the CDN module like so:

  1. open your live (production) Drupal site, login with your username/password and then click Modules in the navigation bar at the top
  2. make sure the CDN module (under Performance and Scalability) is enabled, click Configure on the right
  3. In the next overlay screen, set the status to Enabled (alternatively put it into Testing mode, make sure to read up on what this means!) and hit Save configuration
  4. Switch to the Details tab of that overlay
  5. Now select Origin Pull as the Mode and in the CDN mapping, specify the accelerated domain as shown below:
    KB-cdnmodule-config1.png
  6. Click Save configuration and then make sure to clear the caches. Click the "Clear cache" field set link and then clear the caches.
  7. Now we're ready to test and verify the integration

Also read the attached README-CDN-module.txt for more information about how to configure the CDN module. This README is included in the corresponding Drupal module zip file.

Configure CDN module (advanced)

With the mapping above, all assets are served from the CDN regardless their type (images, javascript, css, etc.). The CDN module allows you to specify which types of assets are served from the CDN and which are served from the origin servers directly.

As an example, we want all .jpg and .png files to be served from the CDN, not javascript (.js) or .css files though. To achieve this, we enter a CDN mapping like so: http://mcdn-pantheon-integration-live.sa.metacdn.net| .jpg .png

KB-cdnmodule-config2.png

Test and verify the site accelerator's integration into your Drupal site

Having completed all of the above steps, we now should be able to see our content being served through MetaCDNs network. We can test this simply by looking at the source of the test-page we've setup earlier:

KB-source1.png


If we disable the CDN integration all together, the same piece of source looks like the following:

KB-source2.png

As we can see, if the CDN module is disabled, assets are beings served directly from Pantheon's origin servers whereas with MetaCDNs site accelerator integration, all assets are being served through our CDN, i.e. the accelerated domain that we've setup earlier.

SSL support

Pantheon offers SSL support for live sites for Pro-plan customers (or above): "You will need to have a Pro level plan or higher in order to take advantage of SSL on Pantheon." (http://helpdesk.getpantheon.com/customer/portal/articles/385443-getting-an-ssl-cert)

  • To enable SSL support on your MetaCDN accelerated domain, follow the guide at http://support.metacdn.com/entries/22054441-SSL-support-for-MetaCDN-Site-Accelerator
  • To enable SSL support in your live Drupal site, consult the links below and follow their instructions:
    • http://helpdesk.getpantheon.com/customer/portal/articles/385443-getting-an-ssl-cert
    • http://helpdesk.getpantheon.com/customer/portal/articles/984742-developing-with-ssl
    • make sure to read the SSL section of this article. It's written by the guy who developed the Drupal CDN plugin.
    • also interesting: Dev and Test environments can be access per default over HTTPS, see article here.
  • at the time of writing, having a CNAME masking the original URL's domain can cause issues:
    "When a page is being served via HTTPS and the CDN does not support HTTPS, then the file will not be served from the CDN, because it would make the visit insecure.

    If your CDN does support HTTPS, and if you are not masking the original URL's domain with another (sub)domain (using a CNAME record), enable the corresponding setting below, and your CDN will also be used on HTTPS pages."

 

Have more questions? Submit a request