Go back to the main page

Using S3 and Cloudfront to serve up images

 
Tutorial is done on OSX – adjust for your ecosystem. An Amazon Web Services (AWS) and DNS account is assumed.
  1. From the AWS console, create a new or use an existing S3 bucket. I'll use an existing bucket named 'minimul-images'
    1. Click the magnifying glass icon to the bucket's left to display the bucket properties.
      2. Bucket properties will expand in a right panel.
    2. Click on 'Edit bucket policy'
      3. This will trigger a popup policy editor
    3. Replacing your bucket name, cut and paste the following JSON inside of the popup policy editor. This gives the proper public access permissions to all sub-folders of the bucket.
      4. {
"Version": "2008-10-17",
"Id": "Policy1342052196146",
"Statement": [
  {
    "Sid": "Stmt1342052192499",
    "Effect": "Allow",
    "Principal": {
      "AWS": "*"
    },
    "Action": "s3:GetObject",
    "Resource": "arn:aws:s3:::YOUR-BUCKET-NAME/*"
  }
]
}
      Click 'Save'
  2. Set up s3cmd
    3. $ brew install --devel s3cmd # installs multipart-upload-capable version of s3cmd.
$ s3cmd --version
s3cmd version 1.5.0-beta1
$ s3cmd --configure 
# Go thru the wizard and select defaults for everything
# but enter in your AWS access and secret 
s3cmd ls s3://YOUR-BUCKET-NAME # Test
  3. Upload some files
    4. # Example
s3cmd sync /public/images/articles/112 s3://minimul-images/articles/
    This is will create a directory structure on s3 as such: s3://minimul-images/articles/112. Because there is no trailing slash after the 112, this directory will be created. The articles directory will also be created if it does not exist.
  4. From the AWS console, create a new Cloudfront distribution.
  5. Click 'Continue' on the next screen to create a web distribution.
  6. Choose YOUR-BUCKET-NAME.s3.amazonaws.com from the dropdown for 'Origin Domain Name'. Also, add a CNAME like img.YOUR-DOMAIN-NAME.com
  7. Click 'Create Distribution' and wait until the status goes from 'inProgress' to 'Deployed'.
    8. Not ready yet.
    Ready.
  8. Set up the CNAME at your DNS provider.
    1. Get the Cloudfront domain name.
      2. Click on info icon.
      Copy to your clipboard.
    2. Add CNAME entry
      3. Follow your DNS providers documentation regarding creating a CNAME record. Set the TTL to 60 seconds to speed up propagation.
  9. After the CNAME record has propagated try to access the image e.g. https://d38ux1iykvusrb.cloudfront.net/articles/112/s3-cloudfront-distro-deployed.png
  10. Congrats, you are serving up images via Amazon's Cloudfront CDN.

  • Pushed on 02/12/2014 by Christian