Menu Close

Configure AWS Cloudfront with S3 origin to render images on your WordPress with subdomain URL format

The goal here is to briefly illustrate how to configure AWS CDN Cloudfront as a Content Delivery Network or distributor of your image assets on edge locations around the world. The WordPress plugin used is Offload Media Lite and the AWS services used are Amazon S3 (Amazon Simple Storage Service), Amazon Cloudfront (Content Delivery Network) and IAM user. At the end of this, you should have images with url/path:

  1. On your wordpress, install Offload Media Lite plugin and browse around its tabs and buttons to get familiar what it will do. Later, on every posts you make, this will copy images to your AWS S3 bucket where they are pulled and cached by aws cloudfront for faster distribution.
    Offload Media Lite screenshot
    Offload Media Lite screenshot
  2. Browse to the Amazon S3 console. Create bucket making sure you select the region where your WordPress stack is running.
    AWS Create Bucket screenshot
    AWS Create Bucket screenshot
  3. Set the permissions as shown here:
    Permission setup - screenshot
    Permission setup – screenshot
  4. Follow default prompts until you finish creating your S3 bucket.
  5. Create An IAM User with programmatic access type and associate or attach this to the managed policies: AmazonS3FullAccess and CloudFrontReadOnlyAccess:

  6. Finish prompts and note of the “Access key ID” and “Secrete access key” to be used on to link to your wordpress.
  7. Go to your cloudfront distribution service and “Create Distribution”. The one important thing to enter and configure here is the Alternate Domain Name and Custom SSL Certificate so it would work properly.
  8. Try to post an article on your wordpress, inspect image element and you should now have image(s) cached with a url similar to the illustrated URL here:
    Image showing Assets subdomain
    Image showing Assets subdomain
  9. End.