Cloudfront CDN for Wordpress

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):

  :::json
  {
    "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.