diff --git a/content/administration/install/cdn.rst b/content/administration/install/cdn.rst index adbfb65e8..75129bc07 100644 --- a/content/administration/install/cdn.rst +++ b/content/administration/install/cdn.rst @@ -1,80 +1,109 @@ -=========================================== -Setting up a Content Delivery Network (CDN) -=========================================== +======================================= +Set up a content delivery network (CDN) +======================================= .. _reference/cdn/keycdn: -Deploying with KeyCDN_ -====================== +Deploying with KeyCDN +===================== -.. sectionauthor:: Fabien Meghazi +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 your -Odoo powered website. +This document will guide you through the setup of a KeyCDN_ account with an Odoo powered website. -Step 1: Create a pull zone in the KeyCDN dashboard --------------------------------------------------- +Create a pull zone in the KeyCDN dashboard +------------------------------------------ -.. image:: cdn/keycdn_create_a_pull_zone.png - :class: img-fluid +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)`. -When creating the zone, enable the CORS option in the -:guilabel:`advanced features` submenu. (more on that later) +.. 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_enable_CORS.png - :class: img-fluid +.. image:: cdn/keycdn-zone.png + :align: center + :alt: KeyCDN's Zone configuration page. -Once done, you'll have to wait a bit while KeyCDN_ is crawling your website. +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`. -.. image:: cdn/keycdn_progressbar.png - :class: img-fluid +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. -.. note:: a new URL has been generated for your Zone, in this case it is - ``http://pulltest-b49.kxcdn.com`` +.. image:: cdn/zone-url.png + :align: center + :alt: KeyCDN deploying the new Zone. -Step 2: Configure the odoo instance with your 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. -In the Odoo back end, go to the :guilabel:`Website Settings`: menu, then -activate the CDN support and copy/paste your zone URL in the -:guilabel:`CDN Base URL` field. This field is only visible and configurable if -you have developer mode activated. +Copy this :guilabel:`Zone URL` to a text editor for later, as it will be used in the next steps. -.. image:: cdn/odoo_cdn_base_url.png - :class: img-fluid +Configure the Odoo instance with the new zone +--------------------------------------------- -Now your website is using the CDN for the resources matching the -:guilabel:`CDN filters` regular expressions. +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 :doc:`Developer Mode <../../applications/general/developer_mode>` is activated. -You can have a look to the HTML of your website in order to check if the CDN -integration is properly working. +.. note:: + Ensure that there are two *forward slashes* (`//`) before the :guilabel:`CDN Base URL` and one + forward slash (`/`) after the :guilabel:`CDN Base URL`. -.. image:: cdn/odoo_check_your_html.png - :class: img-fluid +:guilabel:`Save` the settings when complete. +.. image:: cdn/cdn-base-url.png + :align: center + :alt: Activate the CDN setting in Odoo. -Why should I activate CORS? ---------------------------- +Now the website is using the CDN for the resources matching the :guilabel:`CDN filters` regular +expressions. -A security restriction in some browsers (Firefox and Chrome at time of writing) -prevents a remotely linked CSS file to fetch relative resources on this same -external server. +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. -If you don't activate the CORS option in the CDN zone, the more obvious -resulting problem on a default Odoo website will be the lack of font-awesome -icons because the font file declared in the font-awesome CSS won't be loaded on -the remote server. +.. image:: cdn/test-pull.png + :align: center + :alt: The CDN Base URL can be seen using the inspect function on the Odoo website. -Here's what you would see on your homepage in such a case: +Prevent security issues by activating cross-origin resource sharing (CORS) +-------------------------------------------------------------------------- -.. image:: cdn/odoo_font_file_not_loaded.png - :class: img-fluid +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. -A security error message will also appear in the browser's console: +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. -.. image:: cdn/odoo_security_message.png - :class: img-fluid +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: -Enabling the CORS option in the CDN fixes this issue. +``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 diff --git a/content/administration/install/cdn/cdn-base-url.png b/content/administration/install/cdn/cdn-base-url.png new file mode 100644 index 000000000..18b648a56 Binary files /dev/null and b/content/administration/install/cdn/cdn-base-url.png differ diff --git a/content/administration/install/cdn/keycdn-zone.png b/content/administration/install/cdn/keycdn-zone.png new file mode 100644 index 000000000..07f3e21a3 Binary files /dev/null and b/content/administration/install/cdn/keycdn-zone.png differ diff --git a/content/administration/install/cdn/keycdn_create_a_pull_zone.png b/content/administration/install/cdn/keycdn_create_a_pull_zone.png deleted file mode 100644 index f2f132722..000000000 Binary files a/content/administration/install/cdn/keycdn_create_a_pull_zone.png and /dev/null differ diff --git a/content/administration/install/cdn/keycdn_enable_CORS.png b/content/administration/install/cdn/keycdn_enable_CORS.png deleted file mode 100644 index a08e7afa4..000000000 Binary files a/content/administration/install/cdn/keycdn_enable_CORS.png and /dev/null differ diff --git a/content/administration/install/cdn/keycdn_progressbar.png b/content/administration/install/cdn/keycdn_progressbar.png deleted file mode 100644 index baae602e1..000000000 Binary files a/content/administration/install/cdn/keycdn_progressbar.png and /dev/null differ diff --git a/content/administration/install/cdn/odoo-security-message.png b/content/administration/install/cdn/odoo-security-message.png new file mode 100644 index 000000000..6312c51e2 Binary files /dev/null and b/content/administration/install/cdn/odoo-security-message.png differ diff --git a/content/administration/install/cdn/odoo_cdn_base_url.png b/content/administration/install/cdn/odoo_cdn_base_url.png deleted file mode 100644 index 4eea1fad6..000000000 Binary files a/content/administration/install/cdn/odoo_cdn_base_url.png and /dev/null differ diff --git a/content/administration/install/cdn/odoo_check_your_html.png b/content/administration/install/cdn/odoo_check_your_html.png deleted file mode 100644 index f50c11a1c..000000000 Binary files a/content/administration/install/cdn/odoo_check_your_html.png and /dev/null differ diff --git a/content/administration/install/cdn/odoo_font_file_not_loaded.png b/content/administration/install/cdn/odoo_font_file_not_loaded.png deleted file mode 100644 index 4f0448a9e..000000000 Binary files a/content/administration/install/cdn/odoo_font_file_not_loaded.png and /dev/null differ diff --git a/content/administration/install/cdn/odoo_security_message.png b/content/administration/install/cdn/odoo_security_message.png deleted file mode 100644 index 13d06e8ac..000000000 Binary files a/content/administration/install/cdn/odoo_security_message.png and /dev/null differ diff --git a/content/administration/install/cdn/test-pull.png b/content/administration/install/cdn/test-pull.png new file mode 100644 index 000000000..aba548952 Binary files /dev/null and b/content/administration/install/cdn/test-pull.png differ diff --git a/content/administration/install/cdn/zone-url.png b/content/administration/install/cdn/zone-url.png new file mode 100644 index 000000000..8ee239ab4 Binary files /dev/null and b/content/administration/install/cdn/zone-url.png differ