Tutorials

Using Amazon S3 with WordPress to securely deliver media files

Listen to this article
  1. Implementing a highly available Lightsail database with WordPress
  2. Using Amazon S3 with WordPress to securely deliver media files
  3. Increasing security and performance using Amazon CloudFront
  4. Increasing performance and scalability with a Lightsail load balancer
Advertisements
Advertisements

Introduction

As a quick review, in the first post, I explained how to deploy a WordPress instance with a standalone MySQL database on Lightsail. In that post I also talked about how the WordPress data is stored not only in the database, but also on the web server’s file system.

In this post, I show you how to configure WordPress to store shared media files (pictures, videos, etc) on Amazon Simple Storage Service (Amazon S3). Amazon S3 is a managed storage service that provides an affordable, performant, and secure method for storing all kinds of data. The interface between WordPress and Amazon S3 is the WP Offload Media Lite plug-in from Delicious Brains. The plug-in takes any file uploaded to WordPress and copies it over to Amazon S3 where your other WordPress instances can access it.

Prerequisites

You should have deployed your WordPress instance, and configured it to work with a standalone MySQL database in Lightsail.

In this post, I use additional AWS services beyond Lightsail. You need an AWS account with sufficient privileges to the rest of AWS.

Solution Overview

This blog covers how to install and configure the WP Offload Media Lite plug-in with the following steps:

  1. Create an Amazon S3 bucket to hold your media files.
  2. Add an AWS Identity and Access Management (IAM) user and policy.
  3. Update the WordPress configuration file with the user credentials.
  4. Install and configure the actual plug-in.
  5. Upload an image to WordPress to test it all out.

Solution

Create an S3 Bucket

This bucket hosts files that are publicly accessible on the Internet, so you must ensure your account-wide S3 permissions allow for public bucket access.

  1. Navigate to the S3 console.
  2. From the left-hand menu click Block public access (account settings).
  3. If Block all public access is checked, click Edit.
    If the check box is cleared and at least the first two sub boxes are also unchecked (see image below) you can move onto the next section.
    Otherwise, continue with step 4.
  4. Clear the checkbox next to Block all public access.
  5. For the application, you only need to allow access via ACL. So, ensure the first two boxes are cleared and the last two are checked.
S3 Bucket Permissions
  1. Click Save Changes.
  2. Type confirm into the text box and click Confirm.

Note: These settings are account wide, so you must ensure that permissions on all buckets in your account are set appropriately.

Now that the public access permissions have been set appropriately, you can create your bucket.

  1. From the left-hand menu click Buckets.
S3 Buckets
  1. Near the top right click Create Bucket.
  2. Give your bucket a name. Note: All S3 bucket names are globally unique, so you cannot use the same name as the one I use in this blog. Make a note of the name you choose, you need to enter it into your WordPress configuration later in this tutorial.
    Choose the region for your bucket. You should create all your resources for this tutorial in the same region, so make a note of which region you choose.
Bucket Name
  1. Uncheck Block all public access, and then check the last two sub boxes. This is similar to the steps you took in the prior section. Only this time you are setting the policy for this particular bucket instead of the whole account. 
Grant Public Access
  1. Check the box to acknowledge that you are making this bucket public.
Public Bucket Warning
  1. Click Create bucket.

You now have a bucket to store your media files. In the next section, you create an IAM user with the appropriate permissions to copy files from WordPress into the S3 bucket.

Create an IAM User

In order to store your media files on Amazon S3, WordPress needs to present credentials that prove it has the correct permissions. To do so, you first create an IAM policy. Next, you add a new IAM user and assign the policy you just created. Once the credentials are created, add them to your WordPress configuration file.

Let’s start by creating the IAM policy.

  1. Navigate to the IAM home page.
  2. From the left-hand menu click Policies.
IAM Policies
  1. Near the top left click Create policy.
  2. Click the JSON tab.
  1. Clear the contents in the edit box, and paste in the text below. You need to ensure you use the name of the bucket you created in the previous steps where indicated.
{

    "Version": "2012-10-17",

    "Statement": [

        {

            "Sid": "VisualEditor0",

            "Effect": "Allow",

            "Action": [

                "s3:PutObject",

                "s3:GetObjectAcl",

                "s3:GetObject",

                "s3:PutBucketAcl",

                "s3:ListBucket",

                "s3:DeleteObject",

                "s3:GetBucketAcl",

                "s3:GetBucketLocation",

                "s3:PutObjectAcl"

            ],

            "Resource": [

                "arn:aws:s3:::<your bucket name>",

                "arn:aws:s3:::<your bucket name>/*"

            ]

        }

    ]

}

Your text windows should look similar to the one below, with the exception being your bucket name being used in the Resource section:

IAM JSON Policy
  1. Click Review policy.
  2. Name your policy wp-s3-policy and click Create policy.

Next you create a new user, and apply the policy you just created to that user.

Advertisements
Advertisements
  1. Click on Users from the left-hand menu.
New IAM User
  1. Click the Add user button at the top of the page.
  2. Give the user a meaningful name, in my example I call it wp-s3-user
  3. Check the Programmatic access box
New User
  1. Click Next: Permissions
  2. Click Attach existing policy directly and then in the Search box enter wp-s3-policy (without quotes)
  3. From the search results check the box next to wp-s3-policy.
Attach Policy
  1. Click Next: Tags at the bottom of the screen
  2. Click Next:Review at the bottom of the screen
  3. Click Create User at the bottom of the screen

The next page then loads, and shows you the credentials you need to configure the WP Offload Media Lite plug in.

Click Show under Secret access key and copy and paste both values (Access Key ID and Secret Access Key) into another document so you can reference them later. You can also download a CSV file with the information by clicking the button in the middle of the screen

Important: If you navigate away from this screen, you will not be able to obtain the credentials again and will need to create a new user. Be sure to either download the CSV or temporarily copy and paste both values into another document. Treat these credentials the same way you’d treat any sensitive username / password pair.

Next, connect to your WordPress instance by using your own SSH client or the web-based SSH client in the Lightsail console.

SSH Connection

Once you’re at the terminal prompt for your WordPress instance, you need to set two environment variables (ACCESS_KEY and SECRET_KEY) that contain the credentials for your IAM user.

To set the environment variables substitute the values for your IAM user’s access key and secret key into the lines below and input each line one at a time at the terminal prompt:

ACCESS_KEY=AKIAIOSFODNN7EXAMPLE

SECRET_KEY=wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY

Next, you must update your WordPress configuration file (wp-config) with the credentials.

First, copy and paste the following command to create a file with the credentials that you insert into the configuration file in the next step:

cat <<EOT >> credfile.txt

define( 'AS3CF_SETTINGS', serialize( array (

    'provider' => 'aws',

    'access-key-id' => '$ACCESS_KEY',

    'secret-access-key' => '$SECRET_KEY',

) ) );

EOT

Next, copy and paste the following sed command to insert the temporary file you just created into the WordPress configuration file:

sed -i "/define( 'WP_DEBUG', false );/r credfile.txt" \
/home/bitnami/apps/wordpress/htdocs/wp-config.php

The sed command changes the permissions on the WordPress configuration file. Copy and paste the following command to reset it:

sudo chown bitnami:daemon /home/bitnami/apps/wordpress/htdocs/wp-config.php

Restart the services on the instance by copying and pasting the following command into the terminal window:

sudo /opt/bitnami/ctlscript.sh restart

After the services restart, your WordPress instance is configured to use the IAM credentials and you are ready to configure the WP Offload Media Lite plug-in.

Install and Configure the Plug-in

Now that the configuration file holds your credentials, you can move on to installing and configuring the WP Offload Media Lite plug-in.

The next step requires you to log into the WordPress dashboard. To do that you need the Bitnami application password for your WordPress site. It’s stored at /home/bitnami/bitnami_application_password.

Enter the following cat command in the terminal to display the value:

cat /home/bitnami/bitnami_application_password

This is the password for your WordPress dashboard:

WordPress Password

Log into the administrator control panel of your WordPress site. The WordPress login screen can be accessed at http://SiteIpAddress/wp-admin, where SiteIpAddress is the IP address of your WordPress instance, which can be found on the card for your instance in the Lightsail console.

Site IP

For example, the instance above has the IP address 192.0.2.0, so you’d access the login screen using http://192.0.2.0/wp-admin.

As far as login credentials, the default user name is user. Use the Bitnami application password you copied or wrote down previously.

Once signed in, install and configure the WP Offload Media Lite plugin by following these steps:

  1. From the left-hand menu click Plugins and Add new.
Add New Plugin
  1. On the add new plug-in page, enter WP media offload into the search bar.
WP Media Offload
  1. Click Install Now on the WP Offload Media Lite plugin.
Install and Activate Plugin

After a few seconds the Install Now button will change to read Activate.

  1. Click the Activate
  2. You should be back to the WordPress plug-in screen.
    Scroll down until you find WP Offload Media Lite. It will be near the bottom as the plugins are listed alphabetically. Click Settings.
WP Offload Media Settings
  1. Enter the name of the bucket you created earlier, and click Save Bucket Settings. Be sure to use your bucket name instead of the one in the image below.
Choose the Bucket
  1. Note: You cannot use ‘Browse existing buckets’ or ‘Create new bucket’ because the security policy you created does not have the appropriate permissions. Enabling those permissions would give the plug-in access to all your account’s S3 buckets, which is not advisable.

Your WordPress website is now configured to upload files to the Amazon S3 bucket managed by the WP Offload Media Lite plugin.

Test the plug-in

You can test to see if the plugin is working correctly by uploading a new media file, and verify it’s being served from the Amazon S3 bucket. Follow these steps:

  1. From the left-hand menu of the WordPress server click Media and then Add new.
Add New Image
  1. Either drag and drop a file or click the Select button and choose a file from your local machine.
  2. After the file uploads, click the Edit button next to the thumbnail
Edit Image
  1. On the right-hand side of the screen the File URL should point to your S3 bucket.
S3 Bucket URL
  1. Copy that URL into a browser and ensure your file loads up correctly.

Your media files are now being centrally served out of Amazon S3. At this point you’re ready to finalize the look and feel of your site, and then scale out the front end – which you do in a subsequent blog post.

Conclusion

In this post you learned how to install and configure the Media Offload Lite plug-in. Your media files are now centrally served out of S3. You are ready to finalize the look and feel of your site and scale out the front end. A subsequent post in this series explores that process.

Advertisements
Advertisements

Leave a Reply

%d bloggers like this: