Steps to Use Amazon S3 and Cloudfront to Host Your WordPress Images

If you have hundreds of large high resolutions images on your wordpress blog, it is best to make use of a CDN to serve your images.

There are many options when it comes to using a CDN, but in this article, we are going to see how you can use Amazon S3 and Cloudfront to serve your images.

Difference between Amazon S3 and Cloudfront

There are many who get confused as to what S3 is and how is it different from Cloudfront. So let's get things clarified:

Amazon S3: Simply put, S3 is a storage engine. It can be used to store data, and in this case, your website images. It can also be used to serve images, but S3 is not a CDN. In other words, all data is stored at a single location. Hence, your images will not load fast.

Cloudfront: Cloudfront on the other hand is a CDN (Content Delivery Network). It has hundreds of servers located all across the world. These servers cache your images and hence serve them faster. A CDN uses serves closet to the user to fulfill the request. For example, if someone is requesting your file in Asia, servers located in Asia will be used, and for Europe, servers closer to Europe will be used.

This way your images will load much faster and consumption of your server resources will be lower.

Cost of using Amazon S3 and Cloudfront

The best part about using Amazon S3 and Cloudfront is that you are allowed 1 year of free usage.

Yes there are bandwidth and storage limitations, but these limitations are set pretty high. After the first year, you will be charged as per your usage.

At the end of this article, we will have an in-depth look at what you get with the free tier and how you can calculate your overall costs after the free tier is over.

Steps for using Amazon S3 and Cloudfront as your Image CDN

Here are steps to use Amazon S3 and Cloudfront to serve your wordpress images.

Step 1: Create an AWS (Amazon Web Services) Account

The first step is to create an AWS account.

Simply go to the following URL and sign up: https://aws.amazon.com/

You will be asked to enter your credit card information. You will also be charged a small amount to verify the credit card. But this charge will be refunded. You will not be charged anything else unless your usage exceeds the free quote which is highly unlikely.

Step 2: Create an 'Amazon S3 Bucket'

Once the account is created, login to AWS and go to your 'AWS Management Console'.

If you are unsure, simply click this link and login: https://aws.amazon.com/console/

After logging in, select 'Amazon Simple Storage Service (S3) (Under the heading - 'Storage'), from the 'Services' link located in the header section.

Or you can click this link to be directly taken to 'Amazon S3': https://s3.console.aws.amazon.com/s3/

Step 3: Create a 'S3 Bucket' to store your images in

Once in S3, click on the 'Create Bucket' button.

On the menu that pops up, and enter the following details:

Name and region: Enter your 'site name' as the bucket name, select a region nearest to your website visitors and click the Next button. For example, if most of your visitors are from Canada, select Canada (central). For a global audience, you can leave it to the default value which is US East.

Set properties: You need not make any changes to 'Set properties', so simply click the Next button.

Set permissions: You need not make any changes here. Click the Next button.

Review: Click the 'Create bucket' button to create your bucket.

This bucket is generally referred to as your 'Amazon S3 Bucket'.

Think of this 'bucket' as a folder. All your images will be uploaded and stored to this bucket.

Step 4: Create an user account

We now need to create an user account with proper permissions to access our 'S3 bucket'.

To achieve this, we need to do the following two things:

a.) We first need to create a Group and attach a policy to this group. A policy defines what permissions the group has.

b.) Secondly, we need to create an User and add the User to the Group we created. This way the User will have all permissions of the Group.

Start by clicking on the 'Services' link (Top right corner of your AWS management console) and click on 'IAM' under 'Security Identity and Compliance'.

You can also reach here by clicking on your account name (located top right next to the bell icon) and then clicking on 'My Security Credentials'.

a.) Create a group

Once here, click on 'Groups' link from the left panel and then click the 'Create New Group' button.

Simply specify a group name and click the Next button.

On the page that follows, search for the keyword 'S3' and select 'AmazonS3FullAccess' and click the 'Next' button.

Create AWS group

Finally, click on 'Create group' button, to create your group.

b.) Create a user to access the group

Next, click on the 'Users' link from the left panel and then click the 'Add User' button.

In the page that follows, Add a username and select 'Programmatic Access', and then click the 'Next' button.

Create AWS user

Select the 'group' that you just created and then click the 'Next:Review' button.

Finally, click the 'Create User' button to create your user.

In the page that follows, copy the 'Access Key ID' and 'Secret Access Key' (Click show before copying).

Note these details down in a Notepad. These keys will be used to access our S3 Bucket using the AWS WordPress plugin.

Step 5: Create an Amazon Cloudfront Account

Cloudfront is Amazon's CDN (Content delivery network) and hence, serving images through Cloudfront will result in faster image delivery.

If you want, you can skip this step and serve images directly from S3, but using a CDN for your images is highly recommended.

To create a Cloudfront account, click on the 'Services' link (Top right corner of your AWS management console), and click on the 'CloudFront' link under 'Networking and content delivery' subheading.

Or you can go directly to the Cloudfront Console by clicking here: https://console.aws.amazon.com/cloudfront/

Once there, click on the 'Create Distribution' button. Next, click on the 'Get Started' button under 'Create a Web Distribution'.

The screen that follows will have a multitude of options. Simply click the 'Origin Domain Name' input box and select the 'S3 bucket' that you created previously.

That's about it, you can leave all other options as it is. Scroll down and click the 'Create Distribution' button.

Step 6: Install the AWS WordPress Plugin

Login to your wordpress account and install and activate the AWS wordpress plugin. This plugin will connect your wordpress account to your 'Amazon S3 Bucket' using the Access Keys that we generated.

Simply go to 'Plugins > Add New' and search for the 'AWS WordPress Plugin by Delicious Brains'.

After activating the plugin, go to 'AWS > Access Keys' (located in the left panel of your wordpress dashboard) and add your 'Access Key ID' and 'Secret Access Key' that you noted from 'Step 4'.

Step 7: Install the S3 Lite WordPress Plugin

Next, you need to install and activate the S3 lite wordpress plugin also by Delicious Brains.

This plugin will automatically save images that you upload to wordpress (via media library) to your Amazon S3 bucket.

After activating the plugin, go to AWS > S3 and Cloudfront (left panel of your WordPress dashboard) and click on 'Browse existing buckets' link and select the bucket that you created.

Next, configure the following options:

Bucket: Your bucket will be automatically selected. Click 'Change' if you would like to change the bucket.

Copy Files to S3: ON

Rewrite File URLs: ON

CloudFront or Custom Domain:ON

Path: ON

Year/Month: OFF

Force HTTPS: OFF

Remove Files From Server:OFF (Keep this ON is you do not want your files on WordPress)

Object Versioning:ON

And click 'Save Changes'.

Note: After this is done, all images that you upload to your 'Wordpress Media Library' (including all sizes) will be automatically uploaded to your S3 Bucket and will be served via Cloudfront. The plugin will automatically change the Image URLs to point to CloudFront URLs.

Example of an Image URL served via Cloudfront:

https://d4cu8ltbd49g4.cloudfront.net/wp‑content/uploads/photo.jpg

Uploading existing images to S3

As you would have realized, the S3 lite plugin only uploads new images to S3. In other words, if you upload an image to WordPress Media Library, the image will be uploaded to S3.

Your existing images will not be uploaded. To upload your existing images, you will need to buy a paid version of the plugin which costs around $59 for a basic licence.

But there is a workaround. Check out this article if you want to know more about this workaround: http://www.joe0.com/2017/03/13/how-to-move-wordpress-images-to-amazon-s3-free-solution/

Using custom URLs to serve your images

As mentioned above, once you use Cloudfront, your Image URLs will look as follows:

https://d4cu8ltbd49g4.cloudfront.net/wp‑content/uploads/photo.jpg

If you don't like this, you have the option to use your own domain name in the URL, so your URLs look as follows:

https://images.example.com/wp‑content/uploads/photo.jpg

To achieve this, you will need to add a CNAME (Canonical Name) pointing to your Cloudfront URL with your hosting account.

To know more, check out this tutorial: https://orbitingweb.com/blog/use-custom-url-with-cloudfront/

Monitoring your monthly usage

Even when you are in the free tier, it is crucial that you monitor your monthly usage. For one, you will be charged if your usage exceeds the free tier limits. Secondly, you will be able to get a clear estimate of your monthly usage data which you can use to calculate your rates once the free tier is over using the AWS calculator.

To track your usage, simply go to your billing page. You can reach this page by clicking on your account name (Top right corner) and then clicking on 'My Billing Dashboard'.

Or you can click here: https://console.aws.amazon.com/billing/home#/

Click 'View All' under the 'Top Tier Services by Usage' to get complete breakdown of your data usage.

Uninstalling AWS

If you no longer want to use Amazon S3, you can simply uninstall the 'S3 lite plugin' and all your Image URLs will change back to your wordpress URLs.

Since all images have a copy in wordpress media library, you don't have to worry about downloading the images.

Understanding free tier for S3 and Cloudfront

As mentioned earlier, both Amazon S3 and Cloudfront are free for the 1st year. This is what you get under the Free tier:

Amazon S3: 5GB Storage and 15GB Bandwith/month free for 1 year. This includes 2000 PUT requests and 20,000 GET requests.

A PUT request is when you upload a file to your S3 Bucket. So in our case, every image that you upload to S3 will be considered a PUT request. So, you can upload up to 2000 images/month in the free tier.

A GET request happens is when a server requests a file. So in this case, every time someone views an image (that has been uploaded to S3) on your site, it generates a GET request. You get 20,000 image requests per month in the free tier. In other words, your images can be downloaded 20,000 times a month.

But if you are using Cloudfront along with S3, your GET requests will reduce significantly as Cloudfront caches your images at various distribution points. Also, Amazon has announed that it will not charge for data transfer out from S3 to Cloudfront, so you really need not worry about GET requests if you are using Cloudfront.

Amazon Cloudfront: Cloudfront gives you 50GB Bandwidth per month free for 1 year. This includes 2,000,000 requests/month.

Note: Even when you are in the free tier, always keep a track of your resource usage. You can check your usage details by going to your billing page here: https://console.aws.amazon.com/billing/home#/

This is because, if your usage, exceeds the set limits, you will be charged.

Cost for S3 and Cloudfront after 1st year

After the first year, you will be charged as per your usage. Let's roughly calculate how much you will be charged.

Amazon S3: For S3, you will be charged $0.023 per GB of storage space. In other words, if your requirement is 50GB of storage (which is a lot), your cost would be less than '$2/month'.

S3 also charges you $0.005 per 1,000 PUT requests. In other words, if you upload 1000 images, you will be charged $0.005. Let's say you upload 20,000 images a month (which is a lot), you will be charged less than a cent.

GET request are even cheaper at 0.004 per 10,000 requests. But as mentioned earlier, you need not worry too much about GET requests if you are using Cloudfront. This is because, data transfer out to Cloudfront from S3 is Free.

So as you can see, your Amazon S3 costs per month are quite negligible.

We can also calculate this using the AWS calculator.

Open the AWS calculator by going here: https://calculator.s3.amazonaws.com/index.html

Select, 'Amazon S3' from the left sidebar, un-check the free tier option and enter your estimated values under 'Standard Storage' and the calculator will show your estimated monthly bill.

Calculator monthly cost for Amazon S3 using AWS calculator

As showing in the image above, the monthly bill comes around $2 for 50GB data storage, 20,000 PUT and 20,00,000 GET requests per month.

As you can see, the data transfer out to Cloudfront is free.

Amazon Cloudfront: Cloudfront offers you 50GB of data transfer free for the 1st year. If your requirement remains within 50GB you will be paying somewhere around $5/month to $12/month.

As Cloudfront is a CDN with various distribution servers, you rates will differ based on where your visitors are located. If your visitors are most located within the US and Canada, your rates will be lower as opposed to your visitors located in India.

Below is a rough tariff calculated using the AWS calculator if 50% of your visitors are from the US and your data transfer is 50GB:

AWS calculator for Amazon Cloudfront

Note: Make sure to reset your calculator and un-check the free tier as shown in the image above.

Again, as mentioned earlier, the best way to estimate your daily usage is to sign-up for the free tier and keep a track of the usage.

Why use Amazon S3?

S3 as mentioned earlier is primarily a storage engine. Unless your site has thousands of high res images, the storage provided by your hosting provider should be more than enough.

But if you are using Cloudfront as your CDN, it makes sense to use S3 to store your images. For one, it increases delivery speeds as the images are located in Amazon servers. Secondly, data transfer out from S3 to Cloudfront is free.

Considering these two advantages, it makes sense to host your images with S3.

Why use Cloudfront?

In comparison to other CDN services out there, Cloudfront offers you comparatively lower costs. This coupled with the robust network that Cloudfront has, it makes a lot of sense to choose Cloudfront over others.

If you found this article useful, don't forget to share!

 
 
 
 

Comments

  1. Vishal says:

    Excellent Tutorial

Leave a Reply

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