Reading list Switch to dark mode

    Magento 2 Amazon S3 Extension

    Updated 21 March 2024

    Magento 2 Amazon S3 Extension is a useful module that supports media files (like product images, media in the product description and short description, etc.) for all types of products and one can save Static files on the Amazon S3 server ie (HTML, CSS, JS).

    Moreover, the extension enables the admin to upload media files of different product types from its local disk to the Amazon server.

    Further, this module uses Amazon S3 for storing the files and uses CloudFront for serving the content CloudFront URL.

    Therefore, will experience faster site loads or page loads due to unnecessary pause elimination and cater to heavy traffic.

    You can also optimize the server storage by uploading the product, and CMS media content via the Magento 2 Digital Ocean storage extension so that the media is fetched and provided to customers directly from Digital Ocean servers.

    Searching for an experienced
    Magento 2 Company ?
    Find out More

    (Amazon Simple Storage Service) is a cloud storage service offered by AWS(Amazon Web Service).

    Amazon S3 is based on CDN(Content Delivery Network) which stores multiple copies of content on strategically distributed servers.

    And dynamically measures which server is nearest to the requesting client and accordingly delivers the fast content.

    Note:

    • To use the Amazon S3 and CloudFront service, the user needs to have an Amazon AWS account. Users will register themselves from here.
    • The users will click here to understand how to get started with Amazon S3.

    Watch the video tutorial below to know the extension workflow:

    dANcyj6i07g

    Features of Magento 2 Amazon S3  Extension

    • Support all Adobe Commerce Cloud product types.
    • Also, all media files of all types of products (like product images, media in the product description, short description, editing images, etc) are stored and retrieved from the Amazon Simple Storage Service (Amazon S3) bucket.
    • One can save Static files on the Amazon S3 server ie (HTML, CSS, JS).
    • Moreover, flexible settings to configure the module settings.
    • Further, set the server(Local/Amazon) on which file upload will happen.
    • Store and download the files from Amazon S3 Server.
    • Check the bucket availability in just a click.
    • The CloudFront feature is also available.
    • Customers can download the files from the Amazon Server irrespective of time and place.
    • Additionally, the extension is fully open source and easy to use.
    • Now serving of cache images will be from Amazon s3 Server and CloudFront as well.

    Installation of Magento 2 Amazon S3 Extension

    Customers will get a zip folder and they have to extract the contents of this zip folder on their system.

    The extracted folder has an src folder, inside the src folder you have the app folder.

    After that, you need to transfer this app folder into the Magento2 root directory on the server as shown below.

    INSTALLATION

    After the successful installation of the Adobe Commerce Amazon S3 module, you have to run these commands in the Magento2 root directory.

    First Command –

    composer require aws/aws-sdk-php

    Second Command –

    php bin/magento setup:upgrade

    Third Command –

     php bin/magento setup:di:compile

    Fourth Command –

    php bin/magento setup:static-content:deploy

    Moreover, after running the commands, you have to flush the cache from the Adobe Commerce Cloud admin panel by navigating through->System->Cache management as shown below.

    INSTALLATION

    Thus, in this way, you can install the module.

    Multi-Lingual Configuration for Magento 2 Amazon S3 Extension

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

    change-language-magento-2-locale

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

    Language Translation

    For module translation, navigate to the following path in your system app/code/Webkul/S3amazon/i18n/en_US.csv.
    Open the file named en_US.CSV for editing as shown in the below screenshot.

    LANGUAGE TRANSLATION

    Then replace the words after the comma(,) on the right in the file with your translated words.

    scds

    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.

    Language translation

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

    Setting Up Credentials in Amazon S3 Server

    Follow the steps mentioned below to create Amazon S3 Credentials-

    1-aws-amazon-com_-Webkul-Store-

    • After that, you will get two options Create an AWS account for the new users and Sign in to an existing AWS account for the already registered users followed by multi-factor authentication.

    2-Fregistration-confirmation-Webkul-Store-

    3-sign-in-page

    4-2fa

    • After that, your Amazon server will look like this. Here you need to click on the All services – > S3.
    • Alternatively, you can also search the S3 in the search box given at the top.

    5-AWS-Management-Console

    6-AWS-Management-Console

    This will direct you to a page where you can see the list of the buckets that you have created or you can create a new one. Click on the Create bucket button to create a new bucket.

    7-s3-console-aws-amazon-com_s3_home_region-us-east-2-Webkul-Store-

    • After clicking on the Create bucket button this Create bucket page will come up where you need to fill in all the details to create a new bucket. Then click Create bucket at the bottom.

    Note:- Make sure to uncheck the “Block all public access”.

    8-S3-Management-Console

    • Here you can upload the files and create a folder to save the data. Also, you can view the saved data.

    9-S3-Management-Console

    • For creating access key ID and secret access key click on IAM under Security, Identity & Compliance

    9-AWS-Management-Console

    In the IAM dashboard click on Users to view and to delete the existing users and to add the new user.

    11-IAM-Management-Console

    • After it, a new page will open up where you have options to Add, View and Delete users.

    12-IAM-Management-Console

    • Click on the Security Credentials to create a new access key.
    • Now you have to go for Access keys – > Create Access Key.
    • Now you can see your Access Key ID and Secret access key generated as depicted below.


    15-IAM-Management-Console

    • Also, if you want to add a new user as explained above.
    • You will get a success message page for the newly created user with your security credentials.

    13-IAM-Management-Console

    Note:

    • Now, you have to make sure that putObject,putObjectAcl and putObjectCors permissions are given to access keys provided in Amazon AWS.
    • You can check it from IAm>Groups>group

    Magento 2 Amazon S3 Extension Configuration

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

    General Settings:

    Screenshot-6-6

    CloudFront Settings:

    Configuration-Settings-Stores-Magento-Admin-6

    Static View Files Settings:

    Configuration-static-file-admin-settings

    General Settings of Magento 2 Amazon S3 Extension:

    192-168-15-118_magento2_pub_admin_admin_system_config_index_key_ca51c34caa1c2bc6df89115980fb633915ee8f2634803b0e2b379a37892c2be6_-halla-bol-1-

    Here, the admin under general settings will:

    • Allow files to save on Amazon – to save the file on the Amazon server set this as YES else set it as NO.
    • Access Key ID – enter the Amazon server access key which you will get after creating the account on Amazon S3.
    • Secret Key – Fill the Amazon server secret key which you will get after creating the account on Amazon S3.
    • Bucket Name – Put the Amazon bucket name which you have created in the Amazon S3 account.
    • Region – Enter the region of the bucket where you want the bucket to reside. Mention the same region same as meThe region name should be as you have mentioned the region while creating the bucket in the Amazon S3 account.
    • Check Bucket Availability – Click the “check” button to check the bucket availability. If it would be available and exists in the Amazon S3, it shows the message “Available.Configuration-Settings-Stores-Magento-Admin-1-2
      Else, will show the error message as per the below image:bucket-status-1
    • 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 Amazon S3 bucket.

    cf2-1

    Commands to Configure the Module Settings through Command Line Interface

    You can check the command line below for configuring the credentials in Adobe Commerce Amazon S3 Extension:

    Active –

    php bin/magento config:set s3_amazon/general_settings/active

    Access Key – 

    php bin/magento config:set s3_amazon/general_settings/access_key

    Secret Key – 

    php bin/magento config:set s3_amazon/general_settings/secret_key

    Bucket – 

    php bin/magento config:set s3_amazon/general_settings/bucket

    Region

    php bin/magento config:set s3_amazon/general_settings/region

    Distribution ID – 

    php bin/magento config:set s3_amazon/cloudfront_settings/distribution_id

    You need to provide the value after each command.

    CloudFront Settings:

    webkul-amazon-s3-configuration-2

    Manage:

    Create Distribution – Click on the Create Distribution button to create a Distribution Id for AWS CloudFront else you can click here.

    Check Status – Click on the Check Status button to get the Domain Name (URL) and Status of the Distribution

    Distribution Id – Here, the distribution id will get visible after saving the configuration.

    In your AWS account you can check the created distribution ID or can create a new one as per the below snapshot:

    cdf_dashboard

    Static View File Settings

    Another section of the admin configuration is the Static View File Settings where the admin needs to configure fields such as Enable for Static View Files, Bucket Name, Region, and Cache-Control as shown in the image below.

    Configuration-static-file-admin-settings-3

    The admin can configure the following fields under Static View Files Settings-

    Enable for Static View Files- The admin can set this field as Yes or No.

    Bucket Name- Now, the admin needs to add a name for the bucket.

    Region- Further, the admin can select a region from the list.

    Cache-Control- Furthermore, under the Cache-Control field, the admin will the file extension, max-age, and action columns. After the max-age exceeds, the file will refresh on its own.

    Storage Configuration for Media in Cloud Commerce Amazon S3

    Firstly, the admin can run the command in the Adobe Commerce Cloud root directory:

    php bin/magento import:media

    Therefore, just after running this command, the Media Storage field will get set to the Amazon S3 automatically and all media will get synchronized with the Amazon S3 server.

    Secondly, this can be done manually by moving to the Advanced > System menu option under the configuration setting. For setting up the Storage Configuration for Media.

    Magento 2 Amazon S3 Extension-4

    Under the Media Storage field, the admin will select the media storage location where all the website media will get the store.

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

    Magento 2 Amazon S3 Extension-5

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

    Setting Up Base Url in Adobe Commerce Amazon S3 for user media files

    The admin needs to now navigate to the web sub-menu option under the general setting option, to configure the Base URLs settings.

    configuration-settings-base-url-for-user-media-files

    Further, in the Base URL for User Media Files option, the admin will enter the Amazon S3 bucket URL that saves and retrieves the media files.

    Moreover, if the CloudFront setup is complete, then need to enter the CloudFront URL at the place of the bucket URL to serve the files from CloudFront.

    For Example:-

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

    cloudfront_console_url-1

    Setting Up Base Url in Adobe Commerce Cloud Amazon S3 for Static files

    Initially, the admin needs to run the following 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.

    command-run

    Also, we can set the base URL for the static file running the following command-

    php bin/magento config:set web/unsecure/base_static_url

    *Above-mentioned command will be followed by the Amazon S3 bucket URL. 

    Note: 

    • One must always run “php bin/magento import:static-content” command, just after “php bin/magento setup:static-content:deploy” command.
    • It is better to use the static files feature in the production mode.

    The Amazon S3 bucket URL is responsible for saving and retrieving the static files.

    Configuration-Settings-web-set-base-url

    Uploading Downloadable Product

    After the successful module configuration by the admin, the admin can now upload the media files concerning the products on the Amazon S3 and on the CloudFront.

    For this, the admin will navigate to the Products -> Catalog -> Add Product as per the below image.

    Magento 2 Amazon S3 Extension-6

    Select Downloadable Product from the Add Product drop-down list. This will navigate you to the New Product page.

    link-1st-image

    link-32ndimage-1

    link-information-1

    Physics-Book-Products-Inventory-Catalog-Magento-Admin-44-1

    Here, the admin will fill in all the required details of the downloadable product and upload the downloadable file and hit the Save button.

    After saving the downloadable product, the file gets saved on the Amazon Server and therefore, will get the Amazon S3 link.

    gwenerated-popup

    Book-Products-Inventory-Catalog-Magento-Admin-1

    Note: The admin will get the Amazon S3 link only after saving the product successfully.

    The customer will download the product from the Amazon Server just like any other product from the local Server.

    However, if we are talking regarding the downloadable product, the customer can download the product only after the admin has created the order invoice.

    Media Files

    Further, in this module, the data will get stored in Amazon S3 and CloudFront for all types of products. The data includes media files.

    Media files are the images/ videos associated with the products. Even, these images and videos are generally used to show the product details and give a better description of the same.

    For example, the product’s main image, configurable images, demo product video, description image, GIFs, audio node, etc all fall under the category of media files.

    product_details_page

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

    product-images-and-videos

    Further, when the customers will view the product they will get to see the product image will appear quickly. Also, the upload and retrieval rates are pretty quick for media files.

    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.

    Teton-Pullover-Hoodie-Product-Page-1

    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.

    cloudfront-link-1

    CMS Page View

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

    CMS-page-1

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

    cms-view

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

    Thus, that’s all for the Adobe Commerce Amazon S3 Extension module. Furthermore, if you still, have any issues, feel free to add a ticket at webkul.uvdesk.com.

    Also, if you want to upload your media and static files on Cloudflare R2 Storage then you can check out our Magento 2 Cloudflare R2 Storage.

    Current Product Version - 4.1.2-p1

    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*


    13 comments

  • Hui Cong
    • Rajan Dimri (Moderator)
  • Felipe Silva
    • Subhangi (Moderator)
  • Starlyn Tejada
    • Archana Tiwari (Moderator)
  • Santosh Singh
    • Nishad Bhan (Moderator)
  • peter
  • Blue Otter Group
    • kajal sharma (Moderator)
  • John Maldivas
    • kajal sharma (Moderator)
  • 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