Guide for Magento 2 Cloudflare R2 Storage

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.

Please also find below a video explaining the working of the extension,

• 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.

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:

#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

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

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

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.

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.

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.

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

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“.

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

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

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

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

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”.

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

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

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

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

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

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

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

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

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.

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.

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.

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.

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”.

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.

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.

Base URLs (Secure)

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

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.

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.

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.

Base URLs (Secure)

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

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”.

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

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.

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

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.

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

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.

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.

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

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