How to Get the Most Out of Fastly Edge “Other CMS/backend integration” Module

Fastly content delivery network (CDN) offers a comprehensive suite of features from cutting-edge caching technology to Geo IP detection, Web Application Firewall (WAF), and additional CDN features (such as image optimization). But that’s not all – Fastly Edge Modules are also at your disposal with preconfigured solutions which can be activated on purpose.

What are Fastly Edge Modules?

Fastly Edge Modules are a flexible framework that allows the definition of UI components and associated VCL code through a template.

There are 13 standard Fastly Modules currently available:

In this blog post, we’ll focus on on “Other CMS/backend integration” Fastly Edge module, its use cases, setup and configuration process and how to extend a native logic.

Overview

According to the official “Other CMS/backend integration” Fastly Edge module documentation, this edge module is intended for shops that want to bring in certain URL prefixes into the shop e.g. /blog/, /about-us etc. But what does it mean?

For better understanding let’s have a look at the following example. There are Magento and WordPress websites which are located on different servers:

  • domain of Magento website – www.my-magento-store.com
  • domain of WordPress website – www.my-blog.com

The WordPress blog is presented as a single page website and available by the following URL: “www.my-blog.com/blog“.

Let’s assume that the task is: integrate WordPress blog with Magento but keep the existing blog location on a separate server. So that the blog should open via “www.my-magento-store.com/blog“

⚠ Please note that we are not making a redirect from “www.my-magento-store.com/blog“ to “www.my-blog.com/blog“. The goal is to open a page that corresponds to “www.my-blog.com/blog“ when Magento website visitors open “www.my-magento-store.com/blog“:

Fastly integrate other CMS and backend use case

How does the “Other CMS/backend integration” Fastly Edge module work?

The flow is pretty simple:

  1. The Fastly Edge module catches the request to the Magento website “www.my-magento-store.com/blog“.
  2. The “/blog” is a reserved URL key in Fastly here. 
  3. Fastly CDN sends a request to the WordPress website, fetches the content of the page with “/blog“ URL key (so, basically it is “www.my-blog.com/blog“ in this example) and returns to website visitors.

The magic here is that for the visitors the whole process looks like that the “www.my-magento-store.com/blog“ page is hosted on Magento website and they do not expect that it was loaded from the external resource – “www.my-blog.com/blog“.

Edge Module Configuration

Step 1. Create a backend in the Fastly configuration

Go to Magento admin > Stores > Configuration > Advanced > System > Full Page Cache > Fastly Configuration > Backend Settings > Create

Create a backend in the Fastly configuration

Step 2. Add a request condition to the backend

The following condition should be attached to the backend:

req.http.X-ExternalCMS == "1"
Add a request condition to the backend
create a new request condition
create a new request condition2

Step 3. Create a dictionary

Go to Magento admin > Stores > Configuration > Advanced > System > Full Page Cache > Fastly Configuration > Edge Dictionaries > Add dictionary and create a new dictionary – “wordpress_urls”

create an edge dictionary

Please note that for our example with “www.my-blog.com/blog” blog URL we should use “blog” word in the “Key” column and “1” in the “Value” input field to reserve the “/blog” URL key in Fastly CDN.

Step 4. Activate “Other CMS/backend integration” Fastly Edge module

Go to Magento admin > Stores > Configuration > Advanced > System > Full Page Cache > Fastly Edge Modules > Module Manager > Manage

Activate Other CMS backend integration Fastly Edge module

Select “Other CMS/backend integration” module and click “Save”:

Select Other CMS backend integration module and click Save

Step 5. Configure “Other CMS/backend integration” Fastly Edge module

To assign the “wordpress_urls” dictionary with the “My Blog” backend click “Edit Module”:

Configure Other CMS backend integration Fastly Edge module

Then, select “wordpress_urls” in the “URL prefixes Dictionary” and specify “www.my-blog.com” in the “Override Backend Hostname” field:

configuring url prefixes dictionary and overriding backend hostname

Step 6. Upload changes to Fastly

Now, when all settings are done, we need to upload them to Fastly. To do that, go to Magento admin > Stores > Configuration > Advanced > System > Full Page Cache > Fastly Configuration and click the “Upload VCL to Fastly” button.

Customization

As mentioned at the beginning of this post, the standard behavior of the “Other CMS/backend integration” Fastly Edge module allows the integration of a Magento URL with an external source using a specific URL key. 

For example:

www.my-magento-store.com/blog > www.my-blog.com/blog

So, the standard behaviour of the “Other CMS/backend integration” Fastly Edge module does’t allow the following integration (when WordPress blog is available via “www.my-blog.com” URL instead of “www.my-blog.com/blog” which we used in the example):

www.my-magento-store.com/blog > www.my-blog.com/

Let’s have a look at another example: the WordPress blog available by this URL: “www.my-blog.com“ and want it to appear with this URL “www.my-magento-store.com/blog”:

Magento and WordPress websites which are located on different servers

To do that we need to add custom Fastly VCL snippets above the existing settings.
Go to Magento admin > Stores > Configuration > Advanced > System > Full Page Cache > Fastly Configuration > Custom VCL Snippets and create an “init” snippet:

add custom Fastly VCL snippets above the existing settings

Then, create a “recv” one with the next VCL:

if (req.http.X-ExternalCMS && table.lookup(solution_redirects,
req.url.path)) {
 set req.url = table.lookup(solution_redirects, req.url.path) + if (std.strlen(req.url.qs) > 0, "?" req.url.qs, "");
}
create a recv one with the next VCL

Summary

  • Out-of-the-box “Other CMS/backend integration” Fastly Edge module provides the following integration logic:
www.my-magento-store.com/blog > www.my-blog.com/blog
  • “Other CMS/backend integration” Fastly Edge module setup is global and affects all Magento websites and stores (in a case of multi store setup):
www.my-magento-store.com/blog > www.my-blog.com/blog
www.my-magento-store1.com/blog > www.my-blog.com/blog
www.my-magento-store2.com/blog > www.my-blog.com/blog
  • The native logic can be adjusted via custom Fastly VCL snippets.