In this tutorial we will use a working website with WordPress installed. We assume that the website is hosted on an EC2 instance t2.micro. The purpose of this article is to provide a detailed technical description on how you to use Amazon CloudFront to offload your WebServer from serving images. This will help, during peak times or increased load of the application, to alleviate the EC2 instance from having to load images. We will also show you how to backup the DocRoot of your WebServer on S3. So that at any time you will have a full code backup of your WebSite.
Login on to the AWS management console, click on S3, create the first bucket to store your code (note that is always good practice to give meaningful names to the buckets):
Note: in this particular example we had already created the 2 buckets so that this why you see the message “Bucket name is owned by you”. S3 buckets naming use internet DNS that’s why are unique.
Create the second bucket to store your WordPress media assets:
Remember that you can create buckets from the aws cli (further in the article it is described how to create an IAM role to access S3 and attache it to an existing EC2 instance) :
ec2-user@localhost:~$ aws s3api create-bucket --bucket cloudcoopwordpressmedia --region eu-west-1
Login on to your EC2 using the ssh protocol, make sure your instance has the aws-cli available, you can install it following this procedure (note that if you are using Amazon AMI tools are installed by default). To grant your EC2 instance access to the S3 buckets we have created we will need to create an IAM role (e.g.: S3 Admin). To do this navigate to IAM through the AWS management console and click on role > create role:
After the role creation we need to associate it to the EC2 instance, you can do this browsing to EC2 on the AWS management console and click on Action>Instance Settings>Attach/Replace IAM Role:
Select the role we just created and attach it to the EC2 instance clicking apply.
Now you can ssh on to the EC2 run the command aws s3 ls and list all buckets you have created on your S3:
ec2-user@localhost:~$ aws s3 ls
2018-08-02 14:45:41 cloudcoopmediaassets
2018-08-02 14:44:57 cloudcoopwordpresscode
Running the first command will recursively copy all of the code stored in the DocRoot configured on your WebServer on the S3 destination bucket, the second command will recursively copy media assets to the S3 destination bucket:
sudo aws s3 cp --recursive /var/www/html/ s3://cloudcoopwordpresscode
sudo aws s3 cp --recursive /var/www/html/wp-content/uploads s3://cloudcoopmediaassets
Navigate on CloudFront from the management console, click on Create distribution:
The Origin Domain Name is going to be the S3 bucket we just created for the media assets (in this example cloudcoopmediaassets.s3.amazonaws.com), click on Yes for Restrict Bucket Access, click on Create a New Identity and finally click Yes on Grant Read Permissions on Bucket (this will allow your CloudFront distribution to read the images in the S3 bucket).
The final step to offload all WordPress media to our CloudFront distribution is the configuration of the rewrite module on Apache. This configuration will allow to monitor and benchmark our contents, improve the performance of the WebServer so that, in case of high traffic all of the images will be loaded and cached by CloudFront rather than from the WebServer.
To apply this configuration ssh on to your WebServer, navigate to your DocRoot directory e.g: /var/www/html edit with vim or your favourite text editor the file .htaccess and add this few lines of configuration:
RewriteRule ^wp-content/uploads/(.*)$ http://[changeme].cloudfront.net/$1 [r=301,nc]
Edit your httpd.conf file and change the setting from AllowOverride None to AllowOverride All:
Options Indexes FollowSymLinks
Require all granted
Reload Apache using the command
service httpd reload and this should be it!!! Now all the static of your WebSite are served using CloudFront. The ensure that this is is working correctly, check the links associate with the images right clicking on one of them and opening in a new tab (you can also try on one random image of this blog article, images are served with CloudFront) they should look like this link.
I really hope this article was helpful, feel free to leave a comment or a question, contact us if you need help!!!