AWS CloudFront CDN: How to configure it to speed up wordpress

In this tutorial I will show you how to configure AWS (Amazon Web Services) CloudFront CDN to speed up your wordpress blog.

The contents of the article

  • Differences between Pull mode and Push mode
  • Why use Push mode or Pull mode?
  • Create a new user for accessing CloudFront
  • AWS CloudFront CDN in “Origin Pull” mode
    • Configure the W3 Total Cache plugin
  • AWS CloudFront CDN in “Origin Pull” mode with S3
    • Configure AWS S3 Buckets
    • Configure AWS CloudFront to sync with S3
    • Configure the S3-Uploads plugin
    • Configure ssh for web space access
    • Test the functioning of the wp-cli
    • Enable the S3-Uploads plugin and check that it works
    • Upload files to S3 via wp-cli
    • Make files public from S3 console
    • Enable automatic url rewrite
    • REMEMBER: By enabling the flag all new images will be hosted only on AWS, they will no longer be saved in the uploads folder of your blog!
    • Carry out the last functional tests
    • What do you think of this guide? Have you ever thought about using AWS to speed up your wordpress blog?

In this article I will show you how to best configure the AWS (Amazon Web Services) CloudFront CDN to speed up your wordpress blog as much as possible .

We will analyze two different ways of working together:

  • Origin Pull: Files remain on your website (CloudFront only mode)
  • Origin Push: Files will be transferred to an AWS S3 bucket (S3 + CloudFront mode)

When I talk about files I am referring above all to the images of your blog, so the whole uploads folder of a standard wordpress installation is usually found in: [wwwroot] / wp-content / uploads

AWS CloudFront CDN: How to configure it to speed up wordpressCLICK TO TWEET

Using a CDN to ” serve ” the images of our blog brings a series of benefits in terms of performance as:

  • Downloadyour webserver the terms of traffic and CPU usage (images are the bulk of an http request)
  • Parallelizethe download
  • Distributesthe download across multiple geographic nodes

In short, it is a good idea to use a CDN.

If you want to read some more advice on ” speed up your blog ” then you should also take a look at this my previous article , in which I talk about hosting, cdn, templating and caching .

Differences between Pull mode and Push mode

The main difference lies in using two different storage areas in which to store your images.

As already mentioned, the ” Pull ” mode involves the use of the CDN ” hooked ” to your webserver, so the images will continue to be stored in the position in which they have always been stored ( [wwwroot] / wp-content / uploads )

Instead in ” Push ” mode you will have to move the images saved up to now in the uploads directory in an Amazon Bucket S3 (S3 = S imple S torage S ervice), moreover all the new images must be automatically saved in Bucket S3.

A plugin will take care of all this that we will see in detail later.

Why use Push mode or Pull mode?

It’s up to you to decide which is the best solution for your wordpress blog, consider that:

The Cloufront CDN in Pull mode is very simple to set up, does not upset the asset of your files used up to now and has a very low cost (you only have to pay the AWS Cloudfront monthly fee ).

The Cloufront CDN in Push mode is more complex to configure, it upsets the asset of your files and has a higher cost (you also have to pay the S3 bucket fee), however it has a number of significant advantages such as:

  • You are putting all your wordpress blog files in the cloud(you are going to the future …)
  • Buckets S3 are very performing “objects”designed to do the job  of file storage in the best possible way
  • You are downloadingyour website both in terms of disk space used and in terms of CPU usage and network traffic
  • In the future, a possible  migrationto another hosting provider will be much easier and faster, as all the images will remain on AWS

In short, there are many aspects to be evaluated, including the cost is a variable that must be taken into consideration.

At this link you will find a simulator that will allow you to understand the cost of this infrastructure , while at these links you will find the prices of the two solutions (S3 and CloudFront):

  • S3 ->  https://aws.amazon.com/it/s3/pricing/
  • Cloudfront ->  https://aws.amazon.com/it/cloudfront/pricing/

Consider that for standard dimensions we are talking about sums ranging from less than 2 to a maximum of 4 dollars / month.

IMPORTANT : KEEP IN MIND THAT THE FIRST YEAR AWS SERVICES ARE FREE, SO YOU MAY WANT TO EXPERIMENT AND DECIDE IF AND HOW TO PROCEED NEXT YEAR.

All the details of the AWS Free Tier are available at this link

Now let’s see in detail what you need to do to configure your wordpress blog in the two ways, but first you need to create a new user on AWS and set the grant (permissions) for access to CloudFront .

[sociallocker] Thank you [/ sociallocker]

Create a new user for accessing CloudFront

To create a new user must access the console administration of AWS , available at this link . Remember that the first year you can take advantage of the AWS Free Tier.

Once in the administrative console you will find all the AWS services available in one large panel:

Select the IAM service under Security, Identity & Compliance

Select the ” Users ” menu item and then click on the blue ” Add user ” button

Enter a username of your choice and then select the type of access ” Programmatic access ”

At this point select ” Attach existing policies directly ” and select the following policies: ” CloudFrontFullAccess ” and ” AmazonS3FullAccess ”

At the end of the process you will need to have the following policies connected to your account

User creation finished

remember to download the .csv file with your AWS access keys :

  • Access key 
  • Secret access key

Keep them because you will need them to configure wordpress

AWS CloudFront CDN in “Origin Pull” mode

As mentioned above, the ” Origin Pull ” mode allows you to configure a cdn (Content Delivery Network) without moving your files to an AWS S3 bucket , so CloudFront will ” deliver ” your images by ” fishing ” them directly from your blog.

The configuration is very simple.

My advice is to use a plugin like W3 Total Cache to configure the cdn directly from wordpress, the procedure is very fast.

Configure the W3 Total Cache plugin

After installing the W3 total Cache plugin go to configure the cdn from the “General Setting” menu item, select Amazon CloudFront  :

At this point, access the ” CDN ” -> ” Configuration ” menu item and enter the ” Access Key ID ” and ” Secret Key ” values you just downloaded from AWS

Click on the ” Test Cloud Front distribution ” button

And verify that ” Test Passed ” appears

At this point click on the ” Create distribution ” button to create a new CloudFront distribution on AWS

Once you have clicked on the ” Create Distribution ” button, go back to the AWS CloudFront administrative console and verify that a new distribution has been created ( Origin Column ) and that it is enabled ( Enabled in green):

Copy the value you find before ” .cloudfront.net ” in the Domain Name column , go back to wordpress and enter the value in the field:

Replace site’s hostname with

In this way all the url of your images will be rewritten in the form:

<img src = ”https: // 322jdnecdk .cloudfront.net 

But physically they will continue to be uploaded to your website’s wp-content / uploads  folder .

AWS CloudFront CDN in “Origin Pull” mode with S3

This second mode, on the other hand, is more complex to configure but, once finished, it will allow you to:

  • Createnew AWS S3 bucket
  • Createa new CloudFront distribution linked with the S3 bucket
  • Moveall your already uploaded images to the AWS S3 bucket
  • Loadautomatically all the new images on the AWS S3 bucket

The tools you will need to do all this are:

  • S3-Uploadsplugin  downloadable at the following link
  • sshaccess to your web space (if you use siteground  you will find a guide at this link )
  • wp-cliconfigured and working (if you use siteground  the wp-cli is enabled by default)

Start by setting up your AWS S3 bucket

Configure AWS S3 Buckets

 

Configure AWS CloudFront to sync with S3

From the main AWS panel click on CloudFront under Networking & Content Delivery

Then click on the ” Create Distribution ” button

Continue on ” Get Started ”

Under ” Origin Domain Name ” select your S3 bucket visible under “- Amazon S3Buckets -“

Leave the default settings

and click on ” Create Distribution ”

In the general panel you will see your new distribution in the ” In Progress ” status

At the end of the creation the status will be ” Deployed ” and the status ” Enabled in green”

You have thus finished configuring the CloudFront cdn , connecting it with your new AWS S3 bucket .

At this point you have to start transferring the files (the images of your blog) to the S3 bucket so that the cdn starts to do its delivery  and parallelization work .

Configure the S3-Uploads plugin

To transfer all the images of your blog to S3 you need to use a specific wordpress plugin for this job.

There are many in circulation, almost all are paid , the best of the paid ones is the “ WP Offload S3 lite ” plugin which in its freeware version has significant limitations, especially in relation to the transfer of old files to S3.

I needed something more flexible and above all less expensive .

After a lot of searching, I finally found a free plugin that does everything we need: transfers old files and configures automatic upload of new ones .

The plugin is called  S3-Uploads and can be downloaded from gitHub at this link

It has only one flaw (if we can speak of a defect): it  does not have a graphical interface , so you can only use it through the command line which in wordpress means:

  • sshaccess to the webserver
  • use of wordpress wp-cli

Ready for setup ?

First, insert these entries in the wp-config file of your wordpress:

define (‘S3_UPLOADS_BUCKET’, ‘*** the name of your S3 bucket ***’);define (‘S3_UPLOADS_KEY’, ‘*** your Key ***’);define (‘S3_UPLOADS_SECRET’, ‘*** your secret Key ***’);define (‘S3_UPLOADS_REGION’, ‘eu-west-1’);

A list of the available regions can be found at this link

Disable the automatic rewrite of the url, always in the wp-config file:

define (‘S3_UPLOADS_AUTOENABLE’, false);

Download, edit and transfer the modified file with a normal FTP management software (eg FileZilla ).

Finally install the S3-Uploads plugin you  just downloaded from gitHub, but don’t activate it!

Configure ssh for web space access

To make the plugin work you will first need to configure ssh access to your web space, if you use siteground  you will find a simple guide at this link

First you need to create a new “ SSH key pair ” from cPanel

Once created, copy and paste it into a file that you will call “ private_key “.

At this point from the command line (linux shell, mac terminal and windows command) you have to launch the command

$ ssh-add “[path_al_private_file] / private_key”

Once you have added your ssh private key locally, you can access your webserver with the connect command:

$ ssh user @ ipaddress -pport

As a user you can use the one you use to access cPanel , the ip address is the one you find on your administrative panel and the port depends on Hosting ad Hosting, usually the default port (22) is not used but a port different, on  siteground is 18765

If all goes well you will have access to the linux shell of your hosting and you will be able to browse the wwwroot of your site.

Make a functional check with the command:

$ ls -la

If you find all your files and folders you will be connected in ssh to your webserver .

Test the functioning of the wp-cli

Once inside the linux shell of your web space you can test the correct functioning of the  wp-cli  that if you use siteground  is enabled by default.

Then run the command:

$ wp

And check that a list of commands appears, it means that the wp-cli is installed and running, Bingo !

Enable the S3-Uploads plugin and check that it works

At this point, still from shell ssh access the root of your website, with the command:

$ cd / www / [possible_wp_installation_folder]

Now activate  the plugin you just loaded with the command

$ wp plugin activate S3-Uploads

And go check that it is actually active among the list of available plugins

Now run the following command:

$ wp s3-uploads verify

This command loads and then deletes a file verifying that everything is OK (settings and configuration to the AWS S3 bucket)

Then run the following command:

$ wp s3-uploads ls

which list the files currently on S3 (it should return you an empty list )

Upload files to S3 via wp-cli

You’re ready, you can start uploading files to your Amazon S3 bucket with the command:

$ wp s3-uploads upload-directory wp-content / uploads / s3: // uploads /

This command starts the transfer process.

You can go and verify that it is actually transferring files by accessing your bucket, you should find a file and folder structure equal to that of your blog:

Make files public from S3 console

At the end of the synchronization process, you will have to make public the newly transferred files or you can not view them in your blog pages.

Then access your bucket on AWS, select it and click on ” More ”

Click the ” Make Public ” link

This will make your images public and no longer private.

Enable automatic url rewrite

Everything we have done so far does not have in any way turned on the new process, you only have transferred the files to S3 using the wp-cli , but your blog is still ” serving” the images hosted on your hosting.

To activate the rewriting of the url going to take the images of the S3 bucket it is necessary to change the value of the variable you put in the wp-config.php file  :

define (‘S3_UPLOADS_AUTOENABLE’, false);

in:

define (‘S3_UPLOADS_AUTOENABLE’, true);

By effectively enabling the url rewriting process for all images on your blog.

From this moment on, all the old images will be taken from the S3 bucket but above all all the new uploads will be transferred directly to AWS.

REMEMBER : By enabling the flag all new images will be hosted only on AWS , they will no longer be saved in the uploads folder of your blog !

Carry out the last functional tests

You can verify that the files are served by cloudfront by checking the url of any image on your blog:

If in the src field of the html img tag you find something like xyz.cloudfront.net then the rewriting of the url will be correct.

You can also do an upload test of an image and verify that it is actually saved on S3.

In short, do some checks and check that everything is working well but above all that your blog has put the turbo

 

by Abdullah Sam
I’m a teacher, researcher and writer. I write about study subjects to improve the learning of college and university students. I write top Quality study notes Mostly, Tech, Games, Education, And Solutions/Tips and Tricks. I am a person who helps students to acquire knowledge, competence or virtue.

Leave a Comment