Skip to content
This repository was archived by the owner on Nov 19, 2024. It is now read-only.

Added instructions for Fastly Edge Modules: Reroute to other CMS backend #5865

Merged
merged 9 commits into from
Nov 6, 2019
2 changes: 1 addition & 1 deletion _data/toc/cloud-guide.yml
Original file line number Diff line number Diff line change
Expand Up @@ -182,7 +182,7 @@ pages:
url: /cloud/cdn/cloud-vcl-custom-snippets.html
exclude_versions: ["2.0"]
children:
- label: Set up redirects to WordPress
- label: Reroute requests to a CMS backend
url: /cloud/cdn/fastly-vcl-wordpress.html

- label: Block referral spam
Expand Down
154 changes: 24 additions & 130 deletions guides/v2.2/cloud/cdn/fastly-vcl-wordpress.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
group: cloud-guide
title: Set up redirects to WordPress using Fastly
title: Reroute requests to a CMS backend
redirect_from:
- /guides/v2.2/cloud/configure/fastly-vcl-wordpress.html
- /guides/v2.3/cloud/configure/fastly-vcl-wordpress.html
Expand All @@ -9,151 +9,45 @@ functional_areas:
- Setup
---

The following example shows how to use a [Fastly Edge Dictionary](https://docs.fastly.com/guides/edge-dictionaries/working-with-dictionaries-using-the-api) with a custom VCL snippet to redirect incoming requests from a {{ site.data.var.ee }} store (`staging.example.com`) to a separate WordPress site (`customer.example.com`) that hosts related content like blog posts and customer stories.
The following procedure describes how to reroute incoming requests from a {{ site.data.var.ee }} store to a separate WordPress site using the Fastly edge module _Other CMS/backend integration_ with an Edge dictionary. You can follow a similar process to reroute requests to other CMS backends.

{: .bs-callout-info }
We recommend adding custom VCL configurations to a Staging environment where you can test them before running against Production.

**Prerequisites**

- Configure the {{ site.var.data.ece }} environment for Fastly services. See [Set up Fastly]({{ page.baseurl }}/cloud/cdn/configure-fastly.html).

- Get credentials to access both the Fastly API and the Magento Admin UI for your {{ site.data.var.ece }} environment.

- Identify the URL paths to redirect to the WordPress backend.

- Submit a support ticket requesting the following Fastly service configuration changes required to use the custom VCL snippet for the WordPress redirects:

- Add the WordPress host to the Fastly backend configuration. Include the domain name for the WordPress host.

- Attach the following request condition to the Wordpress backend.

```json
req.http.X-WP == “1”
```

Incoming requests that match this request condition, which is set through the [custom VCL snippet](#vcl), redirect to the WordPress backend.

## Create an Edge Dictionary of WordPress paths {#edge-dictionary}

Edge Dictionaries create key-value pairs accessible to VCL functions during VCL snippet processing. In this example, you create an edge dictionary that provides the list of URL paths that to redirect from your store to the WordPress backend.

{% include cloud/admin-ui-login-step.md %}

1. Click **Stores** > **Settings** > **Configuration** > **Advanced** > **System**.

1. Expand **Full Page Cache** > **Fastly Configuration** > **Edge dictionaries**.

1. Create the Dictionary container:

- Click **Add container**.

- On the *Container* page, enter a **Dictionary name**—`wordpress_urls`.

- Select **Activate after the change** to enable the dictionary after you create it.

- Click **Upload** to attach the dictionary to your Fastly service configuration.

1. Add the list of URLs for redirection to the the `wordpress_urls` dictionary:

- Click the Settings icon for the `wordpress_urls` dictionary.

![Configure Edge Dictionary]
Edge modules help you create and upload custom VCL code from the Magento Admin UI instead of manually writing the VCL code and uploading it using the Fastly API.

- Add and save key-value pairs in the new dictionary. For this example, each **Key** is a URL path to redirect to the WordPress backend, and the **Value** is 1.

![Add Edge Dictionary Items]

- Click **Cancel** to return to the system configuration page.

1. Click **Save Config**.

1. Refresh the cache according to the notification at the top of the page.

For more information about Edge Dictionaries, see [Creating and using Edge Dictionaries](https://docs.fastly.com/guides/edge-dictionaries/working-with-dictionaries-using-the-api) and [custom VCL snippets](https://docs.fastly.com/guides/edge-dictionaries/working-with-dictionaries-using-the-api#custom-vcl-examples) in the Fastly documentation.

## Create a VCL snippet for the WordPress redirect {#vcl}

The following custom VCL snippet code (JSON format) evaluates incoming requests and redirects those matching a path in the `wordpress_urls` edge dictionary to the WordPress backend specified in the Fastly service configuration.

```json
{
"name": "wordpress_redirect",
"dynamic": "0",
"type": "recv",
"priority": "5",
"content": "if ( req.url.path ~ \"^\\/?([^\\/?]+)\") { if ( table.lookup(wordpress_urls, re.group.1, \"NOTFOUND\") != \"NOTFOUND\" ) { set req.http.X-WP = \"1\"; } }"
}
```

Review the example code and change values as needed:

- `name` — Name for the VCL snippet. For this example, we used `wordpress_redirect`.

- `dynamic` — Value 0 indicates a [regular snippet](https://docs.fastly.com/guides/vcl-snippets/using-regular-vcl-snippets) to upload to the versioned VCL for the Fastly configuration.

- `priority` — Determines when the VCL snippet runs. The priority is `5` to run this snippet code runs before any of the default Magento VCL snippets (`magentomodule_*`) assigned a priority of 50.

- `type` — Specifies a location to insert the snippet in the versioned VCL code. This VCL is a `recv` snippet type which adds the snippet code to the `vcl_recv` subroutine below the default Fastly VCL code and above any objects.

- `content` — The snippet of VCL code to run in one line, without line breaks.

In this example, the VCL code logic extracts the first segment of the path `/mypath/someotherpath`, and then compares the path (`mypath`) to the paths in the `wordpress_urls` dictionary. Requests with matching paths are redirected to the WordPress backend. See the [Fastly VCL reference](https://docs.fastly.com/vcl/reference/) for information about creating Fastly VCL code snippets.

Add the custom VCL snippet to your Fastly service configuration from the Admin UI (requires Fastly module 1.2.58 or later). If you cannot access the Admin UI, save the JSON code example in a file and upload it using the Fastly API. See [Creating a VCL snippet using the Fastly API]({{ page.baseurl }}/cloud/cdn/cloud-vcl-custom-snippets.html#manage-custom-vcl-snippets-using-the-api).

## Add the custom VCL snippet

{% include cloud/admin-ui-login-step.md %}

1. Click **Stores** > **Settings** > **Configuration** > **Advanced** > **System**.

1. Expand **Full Page Cache** > **Fastly Configuration** > **Custom VCL Snippets**.

1. Click **Create Custom Snippet**.
{: .bs-callout-info }
We recommend adding custom VCL configurations to a Staging environment where you can test them before updating the Fastly service configuration in the Production environment.

1. Add the VCL snippet values:
{:.procedure}
Prerequisites

- **Name** — `wordpress_redirect`
- Ensure that you are running the latest version of the Fastly CDN module for Magento 2. See [Upgrade the Fastly Module]({{ page.baseurl }}/cloud/cdn/configure-fastly.html#upgrade).

- **Type** — `recv`
- Verify the environment configuration for the Fastly service. See [Check Fastly caching]({{ page.baseurl }}/cloud/live/stage-prod-test.html#fastly).

- **Priority** — `5`
- You must have Admin credentials to access the Magento Cloud Staging and Production environments.

- **VCL** snippet content:
{:.procedure}
To reroute requests from {{ site.data.var.ee }} to WordPress:

```
if ( req.url.path ~ "^/?([^/?]+)")
{
if ( table.lookup(wordpress_urls, re.group.1, "NOTFOUND") != "NOTFOUND" )
{
set req.http.X-WP = "1";
}
}
```
1. Enable Fastly Edge Modules in the Staging or Production environment.

1. Click **Create** to generate the VCL snippet file with the name pattern `type_priority_name.vcl`, for example `recv_5_wordpress_redirect.vcl`
- Log in to the Magento Admin.

![Create VCL Snippet]
- Navigate to **Stores** > **Configuration** > **Advanced** > **System** > **Full Page Cache** > **Fastly Configuration** > **Advanced**.

1. After the page reloads, click **Upload VCL to Fastly** in the *Fastly Configuration* section to add the file to the Fastly service configuration.
- Set the value for **Fastly Edge Modules** to **Yes**.

1. After the upload completes, refresh the cache according to the notification at the top of the page.
- Save the configuration.

Fastly validates the updated version of the VCL code during the upload process. If the validation fails, edit the custom VCL snippet to fix the issue. Then, upload the VCL again.
1. Identify the URL paths to reroute to the WordPress backend.

{% include cloud/cloud-fastly-manage-vcl-from-admin.md %}
1. Complete the following tasks to configure the Fastly service and create the custom VCL code to reroute the requests to the WordPress backend.

{: .bs-callout-info }
Instead of manually uploading custom VCL snippets, you can add snippets to the `$MAGENTO_CLOUD_APP_DIR/var/vcl_snippets_custom` directory in your environment. Snippets in this directory upload automatically when you click *upload VCL to Fastly* in the Magento Admin UI. See [Automated custom VCL snippets deployment](https://github.com/fastly/fastly-magento2/blob/master/Documentation/Guides/CUSTOM-VCL-SNIPPETS.md#automated-custom-vcl-snippets-deployment) in the Fastly CDN for Magento 2 module documentation.
- Create an Edge Dictionary that specifies the paths to reroute from the {{ site.data.var.ee }} store to the backend.

<!-- Link definitions -->
- Add the WordPress backend to the Fastly service configuration and attach the request condition for the URL rewrites.

[Configure Edge Dictionary]: {{site.baseurl}}/common/images/cloud/cloud-fastly-edge-dictionary-configure.png
{: width="550px"}
- Configure the *Other CMS/backend integration* Edge Module to handle the URL rewrites from {{ site.data.var.ee }} to the WordPress backend.
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
- Configure the *Other CMS/backend integration* Edge Module to handle the URL rewrites from {{ site.data.var.ee }} to the WordPress backend.
- Configure the *Other CMS/backend integration* edge module to handle the URL rewrites from {{ site.data.var.ee }} to the WordPress backend.


[Add Edge Dictionary Items]: {{site.baseurl}}/common/images/cloud/cloud-fastly-edge-dictionary-add-items.png
{: width="550px"}
For detailed instructions, see [Fastly Edge Modules - Other CMS/Backend integration](https://github.com/fastly/fastly-magento2/blob/master/Documentation/Guides/Edge-Modules/EDGE-MODULE-OTHER-CMS-INTEGRATION.md) in the _Fastly CDN module for Magento 2_ documentation.

[Create VCL Snippet]: {{site.baseurl}}/common/images/cloud/cloud-fastly-create-vcl-snippet.png
{: width="550px"}
1. After updating the Fastly service configuration, test your {{ site.var.data.ee }} store to ensure that the specified URL requests for WordPress are rerouted correctly.