Reading list Switch to dark mode

    Guide for Magento 2 Cloudflare R2 Storage

    Updated 6 March 2024

    Magento 2 Cloudflare R2 Storage extension allows the admin to store data, including product images, descriptions, and short descriptions, securely on Cloudflare R2.

    It also supports the storage of static files like HTML, CSS, and JS, optimizing website performance.

    Additionally, the admin can upload various product media files from their local disk to Cloudflare R2.

    This functionality helps enhance site and page load speeds by eliminating unnecessary pauses, ensuring a smoother user experience even during high-traffic periods.

    Also if you are looking for the Amazon S3 Cloud storage then you can check Magento 2 Amazon S3 Extension.

    Searching for an experienced
    Magento 2 Company ?
    Find out More

    Features

    • Compatibility for all product types within the Adobe Commerce Cloud.
    • Magento 2 Cloudflare R2 storage is used to store and retrieve media files for different product types, product images, media in product descriptions, short descriptions, and image editing files.
    • The admin can save static files on Cloudflare R2 ie (HTML, CSS, and JS).
    • This extension offers flexible configuration.
    • Store and download files from Cloudflare R2.
    • The admin can check bucket availability with one click.
    • Customers can download the files from Cloudflare R2.
    • This extension is fully Open Source and easy to use.

    Installation

    The installation is quite simple just like the standard Magento 2 extensions.

    #1 Download Module

    Firstly, you need to log in to the Webkul Store, go to My Account>My Purchased Products section, verify, and then download and extract the contents of this zip folder on the system.

    #2 Upload Folder

    Once the module zip is extracted, follow path src>app and then transfer the app folder into the Adobe Commerce Cloud root directory on the server as shown below:

    screenshot_from_2023_12_28_13_15_59

    #3 Run Commands

    After uploading the module folder, you need to run the following commands in the Magento 2 root directory:

    composer require aws/aws-sdk-php
    php bin/magento setup:upgrade
    php bin/magento setup:di:compile
    php bin/magento setup:static-content:deploy
    php bin/magento indexer:reindex
    php bin/magento cache:flush

    Multi-Lingual Configuration

    Therefore, for Multilingual support, please navigate to Store>Configuration>General >Locale Options.  Also, select your desired language from the Locale option.

    Configuration-Settings-Stores-Magento-Admin

    Thus, in this way, a multi-lingual configuration can be done.

    Language Translation

    For Magento 2 Cloudflare R2 Storage translation, navigate to the following path in your system src/app/code/Webkul/CloudflareR2/i18n.
    Open the file named en_US.CSV for editing as shown in the below screenshot.

    screenshot_from_2023_12_28_13_17_07

    Now, upload it to the path src/app/code/Webkul/CloudflareR2/i18n where the installation of Magento 2 is on the server. The module gets translated into the desired language.

    The user can edit the CSV like the image below.

    screenshot_from_2023_12_28_13_18_33

    After editing and translating the CSV file, you need to save the translated file name according to your region language and country code such as – de_DE.CSV.

    Followed by uploading the translated file to the same folder from where you have obtained it. Now your module translation is complete.

    screenshot_from_2024_01_09_17_28_02-1

    Thus, in this way, language translation can be done.

    How to Get API Credential?

    To get Cloudflare R2 Storage API credentials the admin needs to click the below link.

    https://www.cloudflare.com/en-gb/.

    After clicking the link the admin will redirect to the Cloudflare website. Here the admin needs to “Sign Up” or if already have an account then click on “Log in“.

    Cloudflare-The-Web-Performance-Security-Company-Cloudflare

    Here the admin needs to provide a valid email ID and password to log in.

    Cloudflare-Web-Performance-Security

    After login, the admin needs to scroll down the left side menu and click on “R2”.

    Home-Webkul-Software-Private-Limited-Cloudflare

    Clicking on R2, now the admin needs to click on “Manage R2 API Tokens”.

    Overview-Webkul-Software-Private-Limited-Cloudflare-1

    After clicking on “Manage R2 API Tokens”, now the admin needs to click on “Create API Token”.

    Webkul-Software-Private-Limited-Cloudflare

    After clicking on “Create API Token”, now the admin needs to choose “Object Read & Write: Allows the ability to read, write, and list objects in specific buckets.” then needs to click on “Create API Token”.

    Webkul-Software-Private-Limited-Cloudflare-1

    Here the admin will get the Access Key ID, Secret Access Key and storage endpoint URL.

    Webkul-Software-Private-Limited-Cloudflare-2

    Bucket Creation

    Here the admin needs to click on “Create Bucket”.

    Overview-Webkul-Software-Private-Limited-Cloudflare-2

    Clicking on “Create Bucket”, then the admin needs to define the bucket name choose “Automatic” and click on “Create Bucket”.

    Webkul-Software-Private-Limited-Cloudflare-3

    After clicking on “Create Bucket”, the admin needs to click on “Setting”.

    Webkul-Software-Private-Limited-Cloudflare-1-1

    After clicking on “Setting”, they needs to choose “R2.dev Subdomain” and then click on “Allow Access”.

    Webkul-Software-Private-Limited-Cloudflare-2-1

    Clicking on “Allow Access”, the admin needs to enter “allow” in small letter and then click on “Allow”.

    Webkul-Software-Private-Limited-Cloudflare-3-1

    After clicking on “Allow”, then the admin will get the bucket URL.

    Webkul-Software-Private-Limited-Cloudflare-4

    Note: Now, you have to make sure that Cors permissions are given to the bucket provided in Cloudflare R2.

    screenshot_from_2024_01_09_17_30_48-1

    Configuration of Magento 2 Cloudflare R2 Storage Extension

    After the extension installation, the admin will configure the module settings by navigating to Stores > Configuration > Cloudflare R2 Storage as per the below image:

    General Setting

    • Allow files to save on Cloudfare R2 Storage: To save the file on the Cloudflare R2 Storage set this as YES else set it as NO.
    • Storage Endpoint URL: Enter the storage endpoint URL, here which you will get after creating an account on Cloudflare R2 storage.
    • Access Key ID: Need to enter the access key ID, which you will get after creating an account on Cloudflare R2 Storage.
    • Secret Key: Here you need to enter the secret key, which you will get after creating an account on Cloudflare R2.
    • Bucket Name: Put the Cloudflare bucket name which you have created in the Cloudflare R2 account.
    • Region: Here the admin can choose any specific region or select auto for saving data automatically by the region.
    • Check Bucket Availability: Click the “check” button to check the bucket availability. If it is available and exists in the Cloudflare R2, it shows the message “Available” otherwise it displays “Error Message”.
    • Re-Synchronize Media Storage Without Uploading Media To Bucket: If enabled, executing the ‘import: media’ command will not upload media contents to the bucket, it only Re-Synchronize Media Storage to the Cloudflare R2 bucket.
    Configuration-Settings-Stores-Magento-Admin

    Static View Files Settings

    • Enable For Static View files: Here the admin can set “Yes” or “No” to upload static view files at Cloudflare R2.
    • Bucket Name: Here the admin needs to define the bucket name.
    • Region: The admin can select the region from the list.
    Configuration-Settings-Stores-Magento-Admin-1

    Cache Setting

    The admin has the capability to control the cache by specifying file extensions, setting the maximum age in seconds, and manipulating rows by adding or deleting them.

    Magento 2 Cloudflare R2

    Storage Configuration for Media

    After the extension configuration, now the admin needs to do media storage configuration for Cloudflare R2.

    For configuring media storage for Cloudflare R2, the admin can do it by two methods one is from command and the second they can setup by manually.

    Command:

    Here the admin needs to run the below command to configure media storage for Cloudflare R2.

    php bin/magento import:media

    After running this command, the Media Storage field will get set to the Cloudflare R2 automatically and all media will get synchronized with the Cloudflare R2 server.

    screenshot_from_2023_12_28_15_50_22-1-

    Manual:

    Second, the admin can also configure media storage for Cloudflare R2 storage by manually clicking “Store>Configuration>Advanced>System>Storage Configuration for Media>Set as Cloudflare R2”.

    Magento 2 Cloudflare R2

    After selecting the Cloudflare R2 from the list, the admin needs to click on the Synchronize button to synchronize all media with the Cloudflare R2 server and then “Save Config“.

    Note:-  Media will not be available in the new location until the synchronization process is complete.

    Setup Base URLs for the User Media File

    Base URLs:

    Here the admin can set the base URL for the user media file by clicking “Store>Configuration>General>Web”.

    Further, in the “Base URL for User Media Files” option, the admin will enter the Cloudflare R2 bucket URL that saves and retrieves the media files.

    Magento 2 Cloudflare R2

    Base URLs (Secure)

    The admin will also set base URLs in the secure mode as well.

    Magento 2 Cloudflare R2

    For Example:

    In the below screenshot, you can see that the media files of the website are served from Cloudflare R2 instead of the system or database storage.

    Magento 2 Cloudflare R2

    Setup for the Static View files

    If Static View files are enabled then add the static content bucket URL into the Base URL for Static View Files and run the below command.

    php bin/magento import:static-content

    Once the above-mentioned command is run, all the static files will be imported to the server as shown in the image below.

    Magento 2 Cloudflare R2

    Base URLs:

    Further, in the “Base URL for Static View Files” option, the admin will enter the Cloudflare R2 bucket URL that saves and retrieves the static files.

    Magento 2 Cloudflare R2

    Base URLs (Secure)

    The admin will also set base URLs in the secure mode as well.

    Magento 2 Cloudflare R2

    Uploading Products Media

    Upon the successful configuration of Cloudflare R2, when the admin uploads any media product, it will be stored on the Cloudflare R2 server, generating a corresponding URL.

    Let’s illustrate this process using both downloadable products and other media files as examples.

    For Downloadable Products:

    Here the admin will add downloadable products by clicking ” Products -> Catalog -> Add Product>Downloadable Product”.

    Magento 2 Cloudflare R2

    After adding all downloadable product details, then the admin needs to upload the file.

    Magento 2 Cloudflare R2

    Once the file is uploaded, then the admin needs to save the downloadable product and after saving the products the admin will get the Cloudflare R2 server file URL.

    Magento 2 Cloudflare R2

    Media Files

    In this module, information related to different product types will be stored on the Cloudflare R2 server.

    This information comprises media files, including images, videos, and GIFs associated with the respective products.

    These visual elements, such as the primary product image, configurable images, demo product video, description image, GIFs, and others, contribute to presenting detailed information

    Magento 2 Cloudflare R2-admin

    So, either it is any of the simple, virtual, configurable, grouped, bundle, and downloadable products, the media files will get a store to the Cloudflare R2 buckets.

    Frontend Product Page View

    Hence, the appearance of the same product in the store front-end will be the same as shown in the image below.

    Magento 2 Cloudflare R2

    Moreover, if the customer will view the image in the new tab, the source includes CloudFront in the URL as shown in the image below.

    Magento 2 Cloudflare R2

    CMS Page View

    The images or media files are present anywhere in the store. Therefore take an example of the CMS pages.  This2 CMS page contains regular images, these will also be fetched from the Cloudflare R also.

    Magento 2 Cloudflare R2

    Furthermore, the same will happen with the images in CMS pages too.

    Magento 2 Cloudflare R2

    Now, wrapping this up, this shows that all the images get retrieved from the Cloudflare R2 if the same will be used as the storage area.

    Thus, that’s all for the Magento 2 Cloudflare R2 Storage Extension. Furthermore, if you still, have any issues, feel free to add a ticket at webkul.uvdesk.com

    Current Product Version - 4.0.1

    Supported Framework Version - Magento 2.0.x, 2.1.x, 2.2.x,2.3.x, 2.4.x

    . . .

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home

    Table of Content