4.9 KiB
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).
.. 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.
: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.
: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.
: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.
: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.
: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.