WordPress Continued: How to Migrate Assets to AWS S3 And CloudFront

WordPress Continued: How to Migrate Assets to AWS S3 And CloudFront

So in my WordPress experiment, one of my goals has been to create a fully scalable WordPress site that can be scaled up (increase host resources) and/or scaled out (increase number of hosts). To do this, our core WordPress hosts must be stateless. By that I mean that, for example, my stored images cannot be different on one host than another. Otherwise, users will get inconsistent experiences. The solution to this is to store all of our assets (css, images, media, etc.) in Amazon S3 and distribute those assets using Amazon CloudFront. That way, when a user browses a page containing an image, the image will be served to the user through CloudFront, rather than the webserver. This means that I can add as many WordPress hosts as I need to without worrying about an inconsistent browsing experience for my users. Not only that, but it will significantly speed up the load time of my site.

Fortunately the setup for this is fairly straightforward and very low cost. The W3 Total Cache plugin we will use is free. There is a small fee for using S3 and CloudFront. You can check out the pricing details on the Amazon Webservices website.

Here’s how to set it all up.

  1. Ensure that you have an AWS account. You can sign up at aws.amazon.com.
  2. Next, we need to create our S3 Bucket. Once logged in to AWS, click Services at the top and select S3.
  3. Click the ‘Create Bucket’ button. Name the bucket the same as your domain name (e.g. sethfuller.cloud). Submit changes.
  4. Go to Services -> IAM. Here we will create the user that will be used to upload our WordPress content to our Amazon S3 bucket.
  5. Click ‘Users’ in the left sidebar, then the blue ‘Create Users’ button. Enter your desired username into the first field and click ‘Create.’
  6. On the next screen, copy and/or download the user access ID and secret key to a desired location. These credentials are crucial for WordPress to access Amazon Web Services. I usually save my credentials in a secure S3 bucket.
  7. On the next screen, click the user just created, then click the ‘Permissions’ tab. Click the ‘Attach Policy’ button. Search for and select ‘AmazonS3FullAccess’ and ‘CloudFrontFullAccess’ and then click the ‘Attach Policy’ button. The IAM user is now ready.
  8. Next we need to create our CloudFront distribution. Select Services -> CloudFront. Click the ‘Create Distribution’ button, and select ‘Get Started’ under the Web section.
  9. Click your mouse inside the Origin Domain Name field. Select the S3 bucket that you created in Step 3. You can leave the other settings unchanged.
  10. Click the ‘Create Distribution’ button at the bottom of the form. Now our S3 and CloudFront settings are complete.
  11. Login to your WordPress dashboard and install the W3 Total Cache plugin.
  12. In your dashboard’s left sidebar, hover your mouse over ‘Performance’ and click ‘General Settings.’
  13. Scroll down to the section labeled ‘CDN.’ Check the ‘Enable’ checkbox. In the ‘CDN Type’ dropdown, select ‘Amazon CloudFront’ under Origin Push. Do NOT select ‘Amazon CloudFront’ under ‘Origin Pull.’ Click the ‘Save All Settings’ button.
  14. A warning message will appear about your settings missing. Click the associated button to be taken to the settings page.
  15. In the ‘Configuration’ box, enter the Access ID and Secret Key you acquired in Step 6. The Bucket field should be your domain name, which should be the same S3 bucket name you created in Step 3.
  16. In the ‘Replace site’s hostname with’ field, you will need the subdomain of your CloudFront distribution. To get this, go back to CloudFront as you did in Step 8. You will see your CloudFront distribution listed in the table. One of the columns is ‘Domain Name’ and it will look something like dpwm89le6w360.cloudfront.net. Copy the part before .cloudfront.net. Paste that into the the ‘Replace site’s hostname….’ field.
  17. Click the ‘Test S3 upload & CloudFront distribution’ button. You will see ‘Test passed’ if your settings are correct. If you get an error, review the steps provided to ensure they were followed properly.
  18. Click the ‘Save all settings button.’
  19. On the same page in the General section, check the boxes desired. You want to host attachments, includes, theme files etc. in order for your site to be fully scalable and cloud enhanced for speed.
  20. Click the buttons ‘Upload attachments’, ‘Upload includes files,’ etc. to upload your WordPress files to S3.
  21. Congratulations, your WordPress assets are now being served on the cloud. You can verify this by checking the URLs of your post images, which should now be from CloudFront.

Leave a Reply

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