# Set up a content delivery network (CDN)

(reference-cdn-keycdn)=

## Deploying with KeyCDN

A {abbr}`CDN (Content Delivery Network)` or *content distribution network*, is a geographically
distributed network of servers that provides high speed internet content. The {abbr}`CDN (Content
Delivery Network)` provides quick, high-quality content delivery for content-heavy websites.

This document will guide you through the setup of a [KeyCDN] account with an Odoo powered website.

### Create a pull zone in the KeyCDN dashboard

On the KeyCDN dashboard, start by navigating to the {menuselection}`Zones` menu item on the left. On
the form, give a value to the {guilabel}`Zone Name`, which will appear as part of the {abbr}`CDN
(Content Delivery Network)`'s {abbr}`URL (Uniform Resource Locator)`. Then, set the {guilabel}`Zone
Status` to {guilabel}`active` to engage the zone. For the {guilabel}`Zone Type` set the value to
{guilabel}`Pull`, and then, finally, under the {guilabel}`Pull Settings`, enter the
{guilabel}`Origin URL`— this address should be the full Odoo database {abbr}`URL (Uniform Resource
Locator)`.

```{eval-rst}
.. example::
   Use ``https://yourdatabase.odoo.com`` and replace the *yourdatabase* subdomain prefix with the
   actual name of the database. A custom :abbr:`URL (Uniform Resource Locator)` can be used, as
   well, in place of the Odoo subdomain that was provided to the database.
```

```{image} cdn/keycdn-zone.png
:align: center
:alt: KeyCDN's Zone configuration page.
```

Under the {guilabel}`General Settings` heading below the zone form, click the {guilabel}`Show all
settings` button to expand the zone options. This should be the last option on the page. After
expanding the {guilabel}`General Settings` ensure that the {guilabel}`CORS` option is
{guilabel}`enabled`.

Next, scroll to the bottom of the zone configuration page and {guilabel}`Save` the changes. KeyCDN
will indicate that the new zone will be deployed. This can take about 10 minutes.

```{image} cdn/zone-url.png
:align: center
:alt: KeyCDN deploying the new Zone.
```

:::{note}
A new {guilabel}`Zone URL` has been generated for your Zone, in this example it is
`pulltest-xxxxx.kxcdn.com`. This value will differ for each database.
:::

Copy this {guilabel}`Zone URL` to a text editor for later, as it will be used in the next steps.

### Configure the Odoo instance with the new zone

In the Odoo {guilabel}`Website` app, go to the {menuselection}`Settings` and then activate the
{guilabel}`Content Delivery Network (CDN)` setting and copy/paste the {guilabel}`Zone URL` value
from the earlier step into the {guilabel}`CDN Base URL` field. This field is only visible and
configurable when the {ref}`developer mode <developer-mode>` is activated.

:::{note}
Ensure that there are two *forward slashes* (`//`) before the {guilabel}`CDN Base URL` and one
forward slash (`/`) after the {guilabel}`CDN Base URL`.
:::

{guilabel}`Save` the settings when complete.

```{image} cdn/cdn-base-url.png
:align: center
:alt: Activate the CDN setting in Odoo.
```

Now the website is using the CDN for the resources matching the {guilabel}`CDN filters` regular
expressions.

In the HTML of the Odoo website, the {abbr}`CDN (content delivery network)` integration is evidenced
as working properly by checking the {abbr}`URL (Uniform Resource Locators)` of images. The *CDN Base
URL* value can be seen by using your web browser's {guilabel}`Inspect` feature on the Odoo website.
Look for it's record by searching within the {guilabel}`Network` tab inside of devtools.

```{image} cdn/test-pull.png
:align: center
:alt: The CDN Base URL can be seen using the inspect function on the Odoo website.
```

### Prevent security issues by activating cross-origin resource sharing (CORS)

A security restriction in some browsers (such as Mozilla Firefox and Google Chrome) prevents a
remotely linked CSS file to fetch relative resources on this same external server.

If the {abbr}`CORS (Cross-Origin Resource Sharing)` option isn't enabled in the {guilabel}`CDN
Zone`, the more obvious resulting problem on a standard Odoo website will be the lack of *Font
Awesome* icons because the font file declared in the *Font Awesome* CSS won't be loaded from the
remote server.

When these cross-origin resource issues occur, a security error message similar to the output
below will appear in the web browser's developer console:

`Font from origin 'http://pulltest-xxxxx.kxcdn.com' has been blocked from loading /shop:1 by
Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the
requested resource. Origin 'http://yourdatabase.odoo.com' is therefore not allowed access.`

```{image} cdn/odoo-security-message.png
:align: center
:alt: Error message populated in the browser console.
```

Enabling the {abbr}`CORS (Cross-Origin Resource Sharing)` option in the {abbr}`CDN (Content Delivery
Network)` settings fixes this issue.

[keycdn]: https://www.keycdn.com