Cloud Images Storage Add-on

A general overview of the add-on facilities.

Seller Labs avatar
Written by Seller Labs
Updated over a week ago

Cloud Images Storage add-on allows a store admin to move all category and product images over to Amazon's or Digital Ocean "cloud" storage services, reducing the overall website's bandwidth and not exceeding the limit set by a hosting provider. The add-on also allows using an Amazon CloudFront CDN account to get the site images loaded quickly by customers' browsers.

To start using the "Cloud Images Storage" add-on, you must ensure it is installed and enabled as described in Installing Add-ons from X-Cart App Store. You also need to have an active Amazon AWS or Digital Ocean account.

Creating Bucket in Amazon AWS Account

In case you want to use Amazon S3 as a storage for your store images, start with creating a new bucket and getting the AWS access key and AWS secret key in your Amazon AWS account. You will need this data to configure the "Cloud Images Storage" add-on in your store Admin area.

First, sign up to Amazon AWS if you have not done so yet. For this purpose, fill in the sign-up form at https://aws.amazon.com/console/:

If you already have an Amazon AWS account, sign in and locate the "Amazon S3" section. There you'll need to create a new bucket to upload the category and product images. For this purpose, click on the "Create bucket" button:

You will need to complete the following basic steps:

  1. specify the bucket name;

  2. select the region where the bucket should be located (it is recommended to choose the region that is geographically close to you);

  3. specify bucket properties;

  4. set public access permissions (if public access is blocked for all options, the migration of images will fail).

More info on bucket creation and management is available here.

You can set public read permissions for files in the bucket using "Bucket Policies." Note that permissions can apply for existing files as well as for all new files. Here is an example of "Bucket Policy" that makes all files in a bucket publicly available:

{
"Version": "2008-10-17",
"Statement": [
{
"Sid": "AllowPublicRead",
"Effect": "Allow",
"Principal": {
"AWS": "*"
},
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::your-bucket-name/*"
}
]
}

You can manage "Bucket Policy" using AWS Console.
โ€‹

After a bucket creation, you need to find your "AWS access key" and "AWS secret key" or create new in the "Your Security Credentials" section:

If you decide to use an Amazon Cloudfront domain name for faster image uploading, you will need to create a distribution for your bucket in the "Cloudfront" section of your Amazon AWS account as described here.

The Amazon Cloudfront domain name you will find by clicking the distribution ID. It reveals the distribution properties, and the domain name is one of them:

Creating Digital Ocean Space

In case you want to use Digital Ocean as a storage for your store images, start with creating a project space and getting the access and secret keys in your Digital Ocean account. You will need this data to configure the "Cloud Images Storage" add-on in your store Admin area.

If you don't have a Digital Ocean account, register here.

If you already have a Digital Ocean account, sign in and create a new space to upload the category and product images.

For this purpose,

  1. Click on the "Create" button:

  2. Select "Spaces":

  3. Configure a new space to upload images:


    When configuring the space, pay special attention to the datacenter region and the space name. The latter you will need to configure the "Cloud Images Storage" add-on in the X-Cart Admin area.

  4. Click "Create a Space."

After creating a new space, check its "Settings" for the endpoint URL. You will need it for the "Cloud Images Storage" add-on setup.

After the space creation, you need to find your "access key" and "secret key" or create new in the "API" section of your Digital Ocean control panel.

To generate the keys:

  1. In the API section, scroll down the page and locate the "Spaces access keys" section:

  2. If you have no keys by far, click the "Genegate New Key" button. In the line that appears, define the group name.

  3. The access key and secret key will be generated automatically. Copy them to use for the "Cloud Images Storage" add-on setup.

  4. If you already have a generated access key, click "More" to regenerate a secret key for it.

That's it! Now you have all required data for the "Cloud Images Storage" add-on setup.

Configuring Cloud Images Storage Add-on

After installing the "Cloud Images Storage" add-on, you will see an active "Settings" link on the add-on information card in the "My Apps" section. Use this link to access the settings page and configure the add-on.

Click on the "Settings" link to be redirected to the "Cloud Images Storage Addon Settings" page, where you can specify your storage account data:

The settings that you need to define are as follows:

  • Storage: Select the cloud storage you want to integrate. Your options are:

    • Amazon S3

    • Digital Open Space

  • Access key: Specify your account access key here.

  • Secret key: Specify your account secret key here.

  • Bucket name: Specify either your Amazon S3 bucket name or Digital Ocean space name here.

  • Save origin images on the store server: If the toggle is disabled, all photos will be removed from your store file system after the images' migration is complete.

Depending on the "Storage" configure the settings below:

  • Digital Ocean Endpoint: If you selected Digital Open Space as your storage, specify the endpoint URL here. The endpoint field value must contain the full path with the domain name without "https://".

  • Amazon CloudFront domain name: If you selected Amazon S3 as your storage, specify your Amazon Cloudfront domain name here.

  • Viewer protocol policy: For Amazon S3 storage, this setting determines the protocol used by X-Cart to form the image upload URL. If you select "HTTP or HTTPS" mode for the "Viewer protocol policy" setting on the Amazon CloudFront end, please enable the same option here. Otherwise (if you prefer to use HTTPS at all times), enable the option "HTTPS only." The "Viewer protocol policy" setting is responsible for the protocol currently used for the page opened in the viewer's browser.

Submit the settings to make them active.

Migrating Images to Cloud Storage

Once the add-on has been configured, the "Migrate to Cloud Storage" button becomes available at the bottom of the settings page:

Click this button to start images migration. The process may take a while.

When the migration is complete, a notification on a successful images migration displays:

If necessary, you can migrate images back from the storage to a file system. To do so, use the "Migrate from Cloud Storage" button on the add-on settings page.

The button becomes available after the initial images migration.

Related pages:

Did this answer your question?