The following steps will leave you with an AWS setup for serving your app’s files via xyz123.cloudfront.net
URLs:
- Create an S3 bucket (e.g.
my-app-bucket-staging
) and leave all settings at their defaults - Open the newly created bucket and navigate to Permissions → CORS configuration
- Create an XML
CORSConfiguration
that defines from which domain the contents of your bucket should be accessible:
<CORSConfiguration>
<CORSRule>
<AllowedOrigin>https://www.example.com</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
</CORSRule>
</CORSConfiguration>

<AllowedOrigin>*</AllowedOrigin>
, but be sure to understand any consequences that may arise- Use the
aws
CLI to upload the files in yourSTATIC_ROOT
to the newly created bucket:
aws s3 cp --recursive static/_root/ s3://my-app-bucket-staging/static/
- Do the same for any media files your app might already have:
aws s3 cp --recursive media/ s3://my-app-bucket-staging/media/
- Open CloudFront and choose to create a web distribution
- Choose the newly created S3 bucket as your distribution’s Origin Domain Name
- Optionally, activate Restrict Bucket Access to prevent users from directly accessing your Amazon S3 URLs
- Activate Create a New Identity and set its name in the Comment field (e.g.
access-identity-my-app-bucket-staging.s3.amazonaws.com
) - Choose Yes, Update Bucket Policy to automatically grant read permission to the origin access identity so that CloudFront can actually access objects in the S3 bucket
- Optionally, set Viewer Protocol Policy to Redirect HTTP to HTTPS or HTTPS Only (recommended)
- Set Allowed HTTP Methods to GET, HEAD, OPTIONS and add OPTIONS to Cached HTTP Methods to allow for preflighted requests
- As shown in the below screenshot, add the three required headers to Whitelist Headers in order to implement CORS in CloudFront

xyz123.cloudfront.net
URLs in the context of a custom domain- Enable Object Caching by activating the Customize option to have CloudFront deal with object caching. The default TTL (time to live) values are appropriate for most cases
- Optionally, activate the Compress Objects Automatically option to take advantage of CloudFront’s built-in compression capabilities (recommended)
- Set a Price Class according to your requirements and finally click the Create distribution button
- If necessary, create another CloudFront distribution for your media files with the same settings as above except Origin Path set to
/media
- Be sure to grab a beverage of your liking before trying to access your files via the
xyz123.cloudfront.net
URL as it can take a while for S3 to distribute everything in the background