In this tutorial, you will learn how to offload WordPress images and other assets to AWS S3 and Cloudfront CDN (Content Delivery Network) without using WP-plugins.
If you are planning to speed up your websites, want to rank fast on Google search engine, and quickly load your site from a web browser, and then planning to achieve the best top performance score in Google PageSpeed Insight. This guide might be helpful for you.
Amazon Cloud Infrastructure is the top Leader in Cloud Computing today according to Gartner Magic Quadrant for Cloud Infrastructure as a Service.
Take advantage of the Amazon CloudFront feature below:
Amazon CloudFront uses a global network of 216 Points of Presence (205 Edge Locations and 11 Regional Edge Caches) in 84 cities across 42 countries, to deliver content to end users with lower latency.
What do you think? It’s awesome and powerful!
What will you do
- Add new IAM Users and Permission
- Create S3 Bucket and Enable Public Access
- Generate SSL Certificate using AWS Certificate Manager
- Create an Amazon CloudFront Distribution
- Install AWS CLI and Configure IAM User Credentials
- Upload Your WordPress Assets to Amazon S3 Bucket
- Define static URL in WordPress Configuration File
- Verify Static Content using CloudFront CDN
Requirements
- AWS Account. Create an AWS Account
- Amazon EC2 Ubuntu 18.04. Learn how to launch an EC2 Ubuntu 18.04 on AWS Console
- A user with sudo privilege command.
This guide will show you through step process how to offload WordPress images and other assets to AWS S3 and Cloudfront CDN without using WP-plugins.
Step 1. Add New IAM Users and Permission
Signed into your AWS Management Console and open the AWS IAM console at https://console.aws.amazon.com/iam/home.
Next, Create a new IAM user with the right permission to allow Amazon EC2 access on the Amazon S3 bucket object.
Use the tutorial guide below to create an AWS IAM user:
See: Learn how to create a new AWS IAM user on AWS Console
Step 2. Create S3 Bucket and Enable Public Access
Open the Amazon S3 console at https://s3.console.aws.amazon.com/s3/home and create a new S3 bucket to manage your static content.
Use the tutorial guide below to create an Amazon S3 bucket:
See: Create an Amazon S3 bucket and enable to public access
Step 3. Generate SSL Certificate using AWS Certificate Manager
Open the AWS ACM console at https://console.aws.amazon.com/acm/home and request a new SSL certificate for your static content within Amazon S3 bucket. AWS Certificate Manager (ACM) handles the complexity of creating and managing public SSL/TLS certificates for your AWS based websites and applications.
Use the tutorial guide below to request a new SSL certificate using AWS ACM console:
See: Generate Free SSL Certificate using AWS Certificate Manager
Step 4. Create an Amazon CloudFront Distribution
Open the Amazon CloudFront console at https://console.aws.amazon.com/acm/home and create an Amazon CloudFront distribution to serve your static website hosted on Amazon S3 bucket.
Use the tutorial guide below to create a new distribution in Amazon CloudFront.
See: Create an Amazon CloudFront distribution for Amazon S3 bucket
Step 5. Install AWS CLI and Configure IAM User Credentials
AWS CLI manage to access on your AWS resources. To install AWS CLI, connect SSH into your remote EC2 instance, type command:
ssh -i yourEC2key.pem ubuntu@172.XX.XX.XX
Then run apt update to install available upgrades of all packages currently installed on the system, type command:
sudo apt update
Next, Install the AWS CLI using:
sudo apt install awscli -y
Next, verify the AWS CLI if installed properly, type command:
which aws
The output similar to this:
/usr/bin/aws
Once you have installed the AWS CLI, you now need to configure the AWS CLI with your AWS IAM User credentials. To do so, enter the command below:
aws configure
On the AWS CLI command prompt, enter your AWS IAM User credentials such as Access ID and Secret Key.
Next, provide the Region of your EC2 instance and leave as default for output format.
The output similar to this:
AWS Access Key ID [None]: AAAABBBBBBCCCCCCDDDDD AWS Secret Access Key [None]: aabbccffeeffggghhiijjkklmn Default region name [None]: us-west-2 Default output format [None]:
Now verify the AWS configuration, type command:
aws s3 ls
If everything is good, you will find your S3 bucket list, like this:
2020-05-06 08:02:56 testbucket1 2020-05-13 14:21:09 testbucket2
Step 6. Upload Your WordPress Assets to Amazon S3 Bucket
We assume that you have completed the AWS CLI configuration. Next, create a new bash file, type command:
sudo vim sync_files_s3.sh
These commands represent to upload/sync your assets content under the wp-content directory into your public S3 bucket.
Now, add the following lines:
aws s3 sync /var/www/wordpress/wp-content s3://testbucket1/mycontentdir --delete --exclude "*" --include 'uploads/*' --include 'css/*' --include 'js/*' --include "*.css" --include "*.js" --include "*.png" --include "*.svg" --include "*.jpeg" --include "*.jpg" --include "*.gif" --include "*.woff2" --include "*.json"Then, save and close the file.
As you can see, the command above contains specific assets that should only be included and not included in the aws s3 sync. In fact, you can modify the commands anytime if needed.
–delete (boolean) Files that exist in the destination but not in the source are deleted during sync.
See: https://docs.aws.amazon.com/cli/latest/reference/s3/sync.html
Next, make sure the file is executable, type command:
sudo chmod +x sync_files_s3.sh
Begin to execute the bash file to uploads all your assets, run command:
./sync_files_s3.sh
While, Uploading your assets into your public S3 bucket, proceed on step 7.
Step 7. Define static URL in WordPress Configuration File
You need to define now the CloudFront URL in the wp-config.php file within the WordPress directory, type command:
sudo vim /var/www/wordpress/wp-config.php
Add the following line at the bottom section.
define('WP_CONTENT_URL', 'https://static.example.com/mycontentdir');Note: The URL referred to above example is that the CloudFront domain name that you pointed in your previous DNS settings.
Refer to this guide: https://linuxbeast.com/tutorials/aws/create-an-amazon-cloudfront-distribution-for-amazon-s3-bucket/
Save and close the file.
Step 8. Verify Static Content using CloudFront CDN
To verify the static content, open your browser and enter your websites address. Right click on the page and then select Inspect Element. Click on Network tab and you will see similar to this:
Click here>> to enlarge the image.
Next, select any content files using AmazonS3 server and go to headers and then you will see something like this Hit from cloudfront.
Go to your web browser and begin to analyze your website URL using Google PageSpeed Insight and then you will see similar to this results.
Disclaimer: The score shown above is based on without AdSense installed on my website.
That’s all.
I hope this tutorial helped you and feel free to comment section below for more suggestions.
Tags: acm, aws, aws-cli, cloudfront, ec2, iam, s3
Nice post but you could keep in mind WP Media Folder where the process could be easier and you have the option for more cloud services
Hi, First of all a very good and informative post. I have a question however.
Does this process also enable all future static content update and uploads to automatically sync to s3 bucket or we will have to run the bash file every time?
Hi Smart, I used cron job in linux ubuntu to run the bash file every time. If you don’t want to automate then you can run the bash file manually to upload the object to S3 bucket 🙂