S3 Video
connecting wordpress

/ AWS EC2, SprUng, CODE-NOW-NOW-NOW, Websites - more cheats, wordpress - more cheats, TOOLS, video-player / 11 minutes of reading

TEST SITE: https://spiffy-nas-ty.space/

https://www.codeinwp.com/blog/wordpress-s3-guide/

What is Amazon S3?

Amazon S3 is an object storage service from Amazon Web Services. You might not realize it, but a huge chunk of the Internet relies on Amazon S3, which is why even a brief S3 outage in one location can cause the whole Internet to collectively…well, freak out.

The most common use of Amazon S3 is to store all of the files that you would usually store in your WordPress Media Library in the cloud. Essentially, you can store (“offload”) your:

Beyond that, some people also use S3 to store assets like CSS, JavaScript, etc.

Each Amazon S3 storage area is called a “bucket”. A bucket is basically a collection of files (you can read up about object storage if you want to know how those files are actually stored).

So essentially, rather than storing files on your own server, you’ll store them in a bucket at Amazon S3.

How to use Amazon S3 with your #WordPress site @awscloud

CLICK TO TWEET

What are the benefits of using Amazon S3 for your WordPress site?

  • Reduced requests to server – because your server no longer has to deliver media files (or potentially assets), you can reduce your page load times.
  • More affordable storage – if you’re butting up against your host’s storage limits, I can almost guarantee that S3’s storage prices are cheaper than what your host will charge.
  • Detached media – because your media files are detached from your site, it’s a heckuva lot easier to move your WordPress site around (like between hosts). You’re basically just moving the PHP files, which takes up almost no space.
  • Scalability – because Amazon S3 powers the entire Internet (ok, that’s a bit of hyperbole), you can be pretty confident that Amazon can scale with whatever’s happening to your site.

And here’s the fun part:

Amazon S3 is free for your first year (up to 5GB storage). And even after that, it’s surprisingly affordable.

What’s the difference between Amazon S3 and a CDN?

A lot of people talk about Amazon S3 as if it’s the same as a CDN. I understand why – there are definitely some surface-level similarities that make it easy to confuse the two.

That is, like a CDN, you can opt to load images from Amazon S3 instead of from your WordPress site’s server.

But here’s what’s not like a CDN:

When you create a bucket at Amazon S3, it’s located in one physical location (that you can choose).

A CDN, on the other hand, has distributed locations around the globe.

So in this respect, Amazon S3 actually has more in common with your own server (a single physical location) than a CDN (lots of locations around the globe).

In a nutshell:

Amazon S3: While you can definitely serve files from S3 to your visitors, S3’s primary focus is storage.

CDN: A CDN is focused on delivering files as quickly as possible, rather than affordably storing them (like S3).

Why not just use a CDN, then?

Well, here’s the thing:

You still can use a CDN. It’s surprisingly simple to connect your Amazon S3 bucket to your favorite CDN. You can use it with everything from Cloudflare to KeyCDN to Stackpath.

Amazon Web Services even has their own CDN, called CloudFront, that’s also super easy to connect to Amazon S3.

In fact, that’s how I recommend you do it if you have a global audience.

By using both, you:

  • still get the storage benefits of S3
  • also get the performance benefits of a CDN

You may also be interested in:

The WordPress S3 connection explained

If you follow the instructions in this post, here’s how your WordPress site is going to function at the end of this WordPress S3 tutorial:

  • You upload files to your WordPress Media Library like normal (i.e. through the regular Add Media button)
  • Your chosen WordPress S3 plugin automatically copies or moves those files to Amazon S3
  • Your WordPress site either serves the file that’s stored on S3 or uses a CDN that’s connected to your S3 bucket

Here’s what you need in order to set up the WordPress S3 integration

To connect WordPress to Amazon S3, you’ll need:

  • An Amazon Web Services account – this is free to sign up for.
  • A public Amazon S3 bucket – this is free for your first year (up to 5GB). I’ll show you how to create one.
  • A WordPress S3 plugin – this helps you automatically offload the files that you upload to WordPress to your S3 bucket.

Which WordPress S3 plugin should you use?

There are a few different WordPress S3 plugins that you can choose from:

  • WP Offload Media Lite – has a fairly generous free version, but that free version only works with newly uploaded files. If you go Pro, you’ll also be able to store and serve your assets from S3 and upload existing files. Also makes it very easy to use a CDN later on (if that’s in your plan).
  • W3 Total Cache – W3 Total Cache includes a feature that lets you connect your site to Amazon S3 if you choose S3 as your CDN in the W3 Total Cache settings.
  • Media Library Folders Pro S3 – lets you manage your WordPress media library with folders while simultaneously offloading all or some of those files to Amazon S3 and maintaining the same folder structure.
  • Human Made S3 Uploads – with no actual interface, this GitHub-hosted project from Human Made isn’t built for casual users. But developers should appreciate it. You can read more about it here.

The WordPress S3 plugin that I will use for this tutorial

For this tutorial, I’m going to use WP Offload Media Lite from Delicious Brains because it’s the most well-known option at the time that I’m writing this article.

WP Offload Media Lite for Amazon S3, DigitalOcean Spaces, and Google Cloud Storage

 

Author(s): Delicious Brains

Current Version: 2.5.3

Last Updated: March 3, 2021

amazon-s3-and-cloudfront.2.5.3.zip

But here’s the thing about the setup process:

Most of the steps will happen in the Amazon S3 interface and are identical across all plugins. That means you can probably follow most of this guide even if you decide to use one of the other plugins.

The only differences will be the very brief portions that happen inside each plugin’s interface.

How to use WordPress with Amazon S3: step-by-step

Here’s everything that you need to do to start using Amazon S3 with your WordPress site:

It should probably go without saying, but I highly recommend that you back up your site before you begin this process.

Step 1: Install and activate WP Offload Media Lite plugin

You’re not really going to do anything in the plugin’s interface quite yet. But before you jump into the Amazon S3 interface, it’s a good idea to make sure that you have the plugin installed and activated on your site.

When you activate WP Offload Media Lite, it will prompt you to Define your AWS keys.

Over the next few steps, you’ll follow the process to actually generate those keys.

Step 2: Create a new bucket at Amazon S3

If you haven’t already created a free Amazon Web Services account, go ahead and do that now.

Once you create your account, either navigate to the Amazon S3 section from inside your AWS account dashboard or click here to go straight to S3.

In the S3 interface, click the button to Create bucket:

On the popup interface:

  • Give your bucket a name
  • Choose a Region (make this as close to your target audience as possible, especially if you’re not planning to use a CDN)
  • Click Create

Step 3: Set your bucket policy

In order for everything to function properly, you need to make your S3 bucket public. To do that, you use something called a bucket policy.

To add a bucket policy, click on your bucket in the S3 interface:

In the screenshot above, you can see that my other bucket is already public, while the codeinwp bucket that I created for this tutorial is marked as Not public. After this step, you want that Public indicator for your bucket as well.

On the next screen, click on the Permissions tab and then select Bucket Policy:

You should see a JSON code editor. Paste in the below snippet and save your changes.

Make sure to replace codeinwp with the actual name of your bucket:

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

Once you save your changes, you should see your bucket marked as Public in the Amazon S3 dashboard:

Step 4: Create an IAM user and policy

Now, you need to create something called an IAM user. This user basically allows the plugin to manage your S3 bucket, which is essential if you want the plugin to automatically add the files that you upload to WordPress.

This is the most complicated part of the entire process, so I’m going to break everything down step-by-step and use plenty of screenshots.

Once you finish this process it will give you the AWS keys that the plugin asks for and you’re pretty much finished.

To create your IAM user, go to the IAM area in your AWS account.

From there, select the Users tab:

Then, click on Add user at the top:

In the Add user interface, you need to give your user a name. Then, make sure to select Programmatic access under Access type. Once you’ve done that, click Next: Permissions:

On the next page, select the Attach existing policies directly tab and select Create policy:

That will launch a new window. In that new window, go to the JSON tab and paste in this code snippet:

{
	"Version": "2012-10-17",
	"Statement": [
	{
		"Effect": "Allow",
		"Action": [
			"s3:CreateBucket",
			"s3:DeleteObject",
			"s3:Put*",
			"s3:Get*",
			"s3:List*"
		],
		"Resource": [
			"arn:aws:s3:::codeinwp",
			"arn:aws:s3:::codeinwp/*"
		]
	}
	]
}

Make sure to replace the two instances of codeinwp with the actual name of your Amazon S3 bucket.

Then, click Review policy at the bottom:

On the next screen, give it a name and then click Create policy:

Now:

  • Go back to the IAM Add User tab from before
  • Click Refresh
  • Select the policy that you just created from the list (you can search for it by name to save time)
  • Click Next: Review

On the next screen, click Create user:

On the next screen, you should see:

  • Access key ID
  • Secret access key (you’ll need to click Show to actually see the secret key)

Keep both these values handy because you’re going to need them in the next step.

Step 5: Add access keys to wp-config.php file

Phew! You’re officially done with the AWS interface.

Now, you can head back to the friendly confines of your WordPress site.

Specifically, you need to edit your wp-config.php file. You can either do this via FTP or via cPanel file manager.

Add the code snippet below to your wp-config.php file, making sure to replace the asterisks with your actual keys from the previous step:

define( 'AS3CF_AWS_ACCESS_KEY_ID', '********************' );
define( 'AS3CF_AWS_SECRET_ACCESS_KEY', '*********************' );

Here’s how it looks in my site’s wp-config.php file:

Make sure to save your changes.

Step 6: Select S3 bucket in WP Offload Media Lite settings

Now, go to Settings → Offload S3.

Type your S3 bucket’s name in the What bucket would you like to use? field and click Save Bucket:

Once you save your changes, you should see the full plugin’s interface:

Note – because of how I had you set up the IAM user policy, the buttons to Browse existing buckets or Create new bucket will not work. This is actually intentional as it’s more secure.

If you don’t like sacrificing this functionality for security, you can change the IAM user policy to the policy outlined here. But, as you’ll see in that same article, Delicious Brains recommends the method that I used as a more secure approach in the BUCKET RESTRICTIONS section.

Step 7: Configure Offload S3 settings (if desired)

At this point, you’re pretty much fully set up. Any new files that you upload will automatically be offloaded to Amazon S3. Additionally, the plugin will automatically rewrite the file URLs for those files so that the file is served from Amazon S3 instead of your server.

You can test this by uploading a new media file and looking at the source code when you insert it:

If you want the plugin to upload *existing* files to Amazon S3, though, you’ll need the premium version.

If you want to adjust any of the plugin’s functionality, you can make changes here. But for most situations, the default settings should be just fine.

Step 8: (Optional) Connect Amazon S3 to a CDN

Like I said at the beginning, it’s possible to use a CDN in conjunction with Amazon S3.

Showing you how to do this for every single CDN provider would require a lengthy post of its own, but I can give you some pointers.

If you want to connect to Amazon CloudFront, you can do it right from your AWS account by following this tutorial.

For origin pull CDNs like KeyCDN or Stackpath, pretty much all you need to do is enter your Amazon S3 bucket URL in the Origin URL box when you set up your CDN.

To find your S3 bucket URL, just follow this format:

https://bucket_name.s3.amazonaws.com/

For example:

https://codeinwp.s3.amazonaws.com/

And it’s even possible to use Cloudflare with Amazon S3 (though you may need to rename your bucket).

Once you get your CDN set up, you can use WP Offload Media Lite’s CloudFront or Custom Domain option to rewrite the file URLs to use your CDN instead of your S3 bucket:

If you opted to use one of the other WordPress S3 plugins, the CDN Enabler plugin can do pretty much the same thing.

Scroll to Top