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.


Share: FacebookGoogle+Email


comments powered by Disqus