Using Amazon S3 with WordPress without monthly licence charges

Posted 17/05/2017 under General.

Find out how to setup AWS S3 buckets for use with WordPress – without ongoing monthly licence charges…

If you want to serve your WordPress website images from Amazon S3, there are some great options available, but what if you don’t want ongoing costs (over and above your S3 costs) and just need a simple solution to manage your media? Read our helpful guide below to help you setup your S3 bucket, create your user and permissions, and then configure a free WordPress plugin.

We are using the fantastic ILAB Media Tools available here – which is a free plugin to allow you to store images on to Amazon S3. It just needs a little configuration, and then you’ll be storing and serving images from S3 in no time!


Creating your new AWS S3 bucket

First of all you will need to set up a bucket on Amazon S3 for your images to go to.

1: Login into your Amazon S3 account.

2: Click ‘Services’ in the top left hand side then click on ‘S3’ found under Storage
S3 guide upload pic 1

3: Click ‘Create bucket’

4: Give the bucket a name: i.e. cdn.website-name.co.uk and also select the region you wish the bucket to be (we’re using EU (London)).
S3 guide upload pic 2

5: Leave ‘Copy settings from an existing bucket’ blank, and click ‘Next’.

6: Skip steps 2 and 3 by clicking ‘Next’ again, before clicking ‘Create Bucket’


Setting up a user and permissions

1: Click ‘Services’ in the top left hand side then you need to go into the IAM section found under Security, Identity & Compliance.
S3 guide upload pic 3

2: Click on ‘Users’ on the left hand side, and then click ‘Add user’ at the top of the screen. Enter a user name (this is only for your reference and not used with the plugin)

3: Select ‘Programmatic access’ as the ‘Access type’ and click ‘Next: Permissions’

4: Scroll to the bottom of the page and click ‘Next: Review’. You do not need to set any permissions here as we will be adding an Inline Policy for this.

5: Amazon will give you a warning saying “This user has no permissions” which can be ignored. Click ‘Create user’.

6: You should see a success message and the details for the user you have just created. Now, make a note of the ‘Access key ID’ and ‘Secret access key’ as you will need to enter these into the plugin settings in your WordPress website.

7: Click on the user you have just created and click ‘Add inline policy’
S3 guide upload pic 4

8: Select ‘Custom Policy’ and click ‘Select’ to enter a Policy Name.

9. Copy and paste the the below for the ‘Policy Document’, making sure you change ‘yourbucketname’ to be your actual bucket name (i.e. ‘cdn.website-name.co.uk’)

{
 "Version": "2012-10-17",
 "Statement": [
 {
 "Sid": "Stmt1392016154000",
 "Effect": "Allow",
 "Action": [
 "s3:AbortMultipartUpload",
 "s3:DeleteObject",
 "s3:GetBucketAcl",
 "s3:GetBucketLocation",
 "s3:GetBucketPolicy",
 "s3:GetObject",
 "s3:GetObjectAcl",
 "s3:ListBucket",
 "s3:ListBucketMultipartUploads",
 "s3:ListMultipartUploadParts",
 "s3:PutObject",
 "s3:PutObjectAcl"
 ],
 "Resource": [
 "arn:aws:s3:::yourbucketname*"
 ]
 },
 {
 "Sid": "AllowRootAndHomeListingOfBucket",
 "Action": [
 "s3:ListBucket"
 ],
 "Effect": "Allow",
 "Resource": [
 "arn:aws:s3:::yourbucketname"
 ],
 "Condition": {
 "StringLike": {
 "s3:prefix": [
 "*"
 ]
 }
 }
 }
 ]
 }

 

10. Click ‘Apply Policy’ – you have now added a User who can access the Bucket, and are now ready to add your settings to the plugin.


Configuring the WordPress plugin

1: First activate the plugin via Plugins (left hand menu) by clicking ‘Activate’ under the plugin title Media Cloud by ILAB.
Activate plugin

2: Once activated a new menu item on the left will appear:
S3 guide upload pic 5

3: Click on ‘Enable/ Disable Tools’ and select ‘Automatically upload media to Amazon S3′ – this automatically uploads media to the S3 bucket we created previously.

4: The option ‘Provides an easy to use tool for manually cropping images for all image sizes’ is optional and allows for inline image cropping (the other settings for this are under ‘Crop Settings’ in the plugin menu)
S3 guide upload pic 6

5: Click ‘Save Changes’ and then click on ‘S3 Settings’ in the menu.  Here you can enter the AWS Access Key, AWS Secret and AWS Bucket Name which you set up previously in the guide.

6. Update ‘Enter Cache Control’ to be ‘public,max-age=2592000’ – this sets a cache-control header for the media, so that browsers know whether to read the image from cache or fetch the image again. Click ‘Save Changes’.S3 guide upload pic 7


That should be it – when you upload images, or regenerate thumbnails, your images (and other media) should be uploaded to the S3 bucket and referenced from there in the frontend of your site.

Do you want want expert WordPress services from experienced developers based in Peterborough? Call us on 01733 394610 or get in touch here.