Category: English
Date:
This tutorial is compiled from my notes while creating a CloudFront CDN distribution for my old Wordpress site. I haven't tested the instructions from start to end once again so it might have missing points. Please drop a comment if you find any such points.
Amazon Part
- In S3, Create a bucket called mysitecom-cdn (replace it accordingly).
In IAM, Modify policies for the user to include the following (you may have to merge this with existing settings if you have any):
{ "Statement": [ { "Effect": "Allow", "Action": "s3:ListAllMyBuckets", "Resource": "arn:aws:s3:::*" }, { "Effect": "Allow", "Action": ["cloudfront:ListDistributions", "cloudfront:CreateDistribution"], "Resource": "*" }, { "Effect": "Allow", "Action": "cloudfront:CreateInvalidation", "Resource": "*" }, { "Effect": "Allow", "Action": "s3:*", "Resource": [ "arn:aws:s3:::mysitecom-cdn", "arn:aws:s3:::mysitecom-cdn/*" ] } ] }
In CloudFront section, type www.mysite.com for origin and press Create Distribution. A new distribution will be created.
Wordpress Part
- Install W3 Total Cache plugin.
- In the General Settings, choose Amazon CloudFront as CDN.
- Move to CDN section.
- Enter Access Key and Secret Key for your Amazon user (can be setup in AWS IAM section). Suppose our user is mysitecom.
- Uncheck "host theme files" to avoid your fonts to be uploaded. It causes CORS errors on Chrome and IE.
- Press Test Cloudfront Distribution button. If the test passes, you're ready to go!
Font Problem
One thing I could not solve was the font files causing CORS error. Indeed uploading theme files would be much better. If anyone can solve this or have any other issues, please drop a comment.