5 Steps to Store WordPress Static Files to AWS S3 / use CloudFront as CDN

When it comes to improving our WordPress website’s speed, we tend to use CDN technology to boost our website’s performance. Here is a post about how to store WordPress static files to AWS S3, and how to further use CloudFront as CDN for our WordPress websites.

We can use AWS S3 or AWS CloudFront (Global Content Delivery Network) to host our website’s static files, such as .png, .jpg, .css, and .js… Usually, AWS CloudFront is the first option, because CloudFront can be used as CDN. So that we can distribute our website’s content around the world.

In this post, I’m going to show how to store WordPress Static files on AWS S3, then use AWS CloudFront as a CDN.

So, how to use AWS CloudFront and S3 to store static files in the wp-content and wp-includes directories on WordPress sites?

How store WordPress static files to AWS S3 / use CloudFront as CDN

1) Create S3 bucket, create subdirectories wp-content, wp-includes

Go to your AWS console to create an S3 bucket. And create the subdirectories according to your WordPress website’s file directories.

Note that: Here, I recommend keeping the new S3 bucket Block public access (bucket settings) if you also use AWS CloudFront as CDN at the same time. Because, we can add S3 bucket policy statement to allow CloudFront distribution use the files in the bucket.

Block public access (bucket settings), just like this:

2) Upload WordPress static files to the corresponding S3 bucket directory

In this step, we first need to install the AWS command on our website server. Then, config the credentials.

Install AWS command on Ubuntu：

sudo apt install awscli

Setting the credentials:

aws configure

To enter the WS Access Key ID and AWS Secret Access Key when prompted. Regions can default or enter one.

Once configured, you can use the AWS command line.

The path of the configure file:

/home/ubuntu/.aws

Some operations about AWS S3

Copy a single file to AWS S3:

sudo aws s3 cp local_file.zip s3://bucket_name/sub_directory/

Copy a directory to S3:

sudo aws s3 cp --recursive local_file.zip s3://bucket_name/sub_directory

Sync file to AWS S3 bucket:

sudo aws s3 sync /local_file_or_directory s3://bucket_name/sub_directory/

sync files with – – delete：

$aws s3 sync path1 path2 --delete

The --delete parameter flag is thrown, and any files existing under the specified prefix and bucket but not existing in the local directory will be deleted.

3) Create a CloudFront distribution

Go to CloudFront and create a distribution.

Select the newly created S3 bucket as the origin. Configure it as the corresponding S3 bucket and set the policy.

Then, go to the S3 bucket to add permissions to allow the CloudFront distribution to read the files.

4) Configure URLs of static resources conversion on the WordPress server

Now, we need to configure URLs of static resources to be converted into our website’s content.

Add a function in the WordPress theme’s functions.php to modify the URLs for the web page content.

Here is my solution. It will change the URLs of the static resources in the article to CloudFront.

/** 
 * Begin - rewrite url to AWS cloudfront 
 */
function changeURLtoAWS(){
    function Rewrite_URI($html){
        $pattern ='/https:\/\/(www\.|)faqgeek\.com\/wp-([^"\']*?)\.(jpg|js|css|gif|png|jpeg|ttf|ttc|otf|eot|woff|woff2|)/i';
        $replacement = 'https://instead-this-part.cloudfront.net/wp-$2.$3';
    $html = preg_replace($pattern, $replacement,$html);
    return $html;
    }
    if(!is_admin()){
        ob_start("Rewrite_URI");
    }
}
add_action('init', 'changeURLtoAWS');

Of course, you can easily use the WP Super Cache plugin to change the URLs of the static files.

Once done the above, we can check if it works correctly.

However, we still need to set automatic sync to make the changes in our website server can be updated on AWS S3.

5) Set crontab to automatically sync

In this step, we set a crontab to automatically sync the wp-content and wp-includes directory files on our WordPress site server to the corresponding bucket directory on S3.

$vim /etc/crontab

Here is my solution:

*/1 * * * * root aws s3 sync --delete /home/wwwroot/rate/wp-includes  s3://bucket_name/wp-includes/
*/1 * * * * root aws s3 sync --delete /home/wwwroot/rate/wp-content  s3://bucket_name/wp-content/

Restart the cron:

#service cron restart

By now, we have finished the process of using AWS S3 to store our website’s static files and use AWS CloudFront as CDN for our WordPress websites.

We also used the crontab to automatically sync the changes of WordPress static files to AWS S3.