This guide covers the setup of the WP Offload Media plugin for WordPress. The plugin is set up with an IAM Role in AWS, and offloads WordPress media files to S3 and CloudFront. This enables your WordPress site with unlimited low cost media storage, and a fast, affordable content delivery network to cut down page load times.
When hosting WordPress on an AWS EC2 instance, all uploaded media files are stored on the attached EBS Volume storage by default.
Although it’s usually not an immediate issue for most WordPress admins, EC2 volumes are limited to a certain amount of storage.
Because of that, EC2 volumes can fill up if you are heavy user of images in your blog or website. When an EBS volume fills up, it can cause unplanned website issues, and potential downtime.
Luckily, you have an option to store your media files in AWS S3 instead. S3 gives you unlimited low cost (and highly available) storage.
Hosting media files in S3 also allows you to easy turn on AWS CloudFront, a CDN that will deliver your images and cut down page load times.
With AWS S3 and CloudFront, you only pay for what you use. S3 is billed off total storage, and CloudFront is billed based on the amount of data transfer, making it extremely affordable for small to medium websites and blogs.
Therefore, If your site is just starting with light traffic and a small amount of media, you’ll be charged a very small amount at the end of the month.
This cost can grow as your site grows, but that usually a good problem to have. Keep an eye on your cloud costs over time, and set up a create a CloudWatch billing alarm to alert about unexpected cost spikes.
Check out my actual CloudFront bill so far this month!
Prerequisites for this Guide:
Hopefully you are running your WordPress website on Amazon Web Services. (If not, you may be surprised at the cost benefits it can have).
For the purpose of this article, we will assume the following:
- You have set up or transferred your website domain name into Amazon Web Services Route 53.
Having your domain managed by AWS Route 53 makes setting up CloudFront much more seamless, and it is also cost efficient as well.
Installing the WP Offload Media Plugin in WordPress:
First, log into your WordPress website and go to Plugins. We need to add the following plugin by Delicious Brains.
This plugin allows us to seamlessly make sure all new content we upload goes to our AWS S3 storage bucket. Once installed and activated, go to Settings–>Offload Media.
Amazon S3 will be set up as our storage provider. The EC2 server needs to have permissions to put things in the S3 bucket. This is done by creating a IAM Role within AWS.
Once you create the IAM Role in AWS, you also need to update the wp-config.php file as described in the screenshot below.
Creating a new S3 Bucket for media files in AWS.
For the next step, log in to your Amazon Web Services console. Go to the S3 service screen and Create Bucket.
All of your WordPress media files will be stored in this bucket. Name the bucket appropriately and jot down the bucket name for use later in this guide.
Create IAM Role and Policy for WordPress EC2 Instance
Next, go back into the AWS console. Type “IAM” in the search bar to pull up the IAM console.
We need to create a new IAM Role, because the WP Media Offload plugin needs to be able to call S3 services in our account securely. Within the IAM console, click on Roles–>Create Role.
Choose AWS Service and then choose EC2 below. This Role will allow your WordPress server instance to call S3.
On the next screen, select Create Policy.
Create the policy to give full access to S3 (S3*). You will need to define the Bucket we created in the earlier step, as well as “Any” (*) Object in the bucket.
Review Policy and name the policy. Then click Create Policy below.
Attach IAM Policy to IAM Role
Go back to the IAM Roles page and attach the newly create policy to the Role.
On the Review screen, name your Role. Finally, click Create Role at the bottom of the screen.
Attach the IAM Role to your WordPress EC2 Instance.
Go to the EC2 Console. Right click your WordPress server, and scroll to Instance Settings. Next click Attach/Replace IAM Role.
Attach the newly created IAM Role to your WordPress EC2 instance.
Complete WP Offload Media Plugin Configuarion
Add IAM Role line to wp-conifg.php
Finally, you will have to SSH into your server and paste the following line near the top of your wp-conifg.php file:
Assign S3 Bucket in WP Offload Media
Back in the WordPress Offload Media settings, choose the S3 bucket we gave access to. The Offload Media plugin will now be able to access and create files in your S3 bucket. By “offloading” the images to multiple delivery points, WordPress loads faster for end users.
Enable AWS CloudFront CDN for Media
Create CloudFront Distribution
The last step involves turning on CloudFront in your AWS Account. Go into the AWS console and go to CloudFront. Click Create Distribution.
Select “Get Started” under the Web delivery method.
Fill in Origin Domain Name with the S3 bucket. Leave Origin Path blank. Leave the rest of the setup options as default.
You can drill down see all the information once the CloudFront Distribution is deployed. Copy the Domain Name as highlighted in the screenshot below.
Create CNAME in Route53
Go into Route 53 in the AWS console. Go into the Hosted Zone for your domain. Create a CNAME record. For the name, use something SEO friendly like “cdn.yoursitehere.com”.
Paste the copied domain name from the CloudFront distribution into the “Value” pane, and save the record.
Enable Custom Domain in WP Offload S3
For your last step, go back into the Offload Media settings in WordPress. Enable “Custom Domain (CNAME)” and populate it with the SEO friendly domain name you created in Route 53.
Set up completed!
WordPress media files are now served from the AWS S3 bucket to viewers of your site via CloudFront CDN. As a result, you’ll have a more flexible and fast WordPress website. You can also go back and re-point old media files at the new CDN url, if you’ve uploaded the media to your S3 bucket.