How to use Amazon S3 + Cloudfront?

[queen eagle]

Dear all, I would like to use Amazon S3 to upload my files, however when the URL is generated so that I can access my files in the Bucket I would like the output to be from the cloudfront CDN, in Laravel is there something that I can make sure that all URL outputs are with the CDN URL?

[hybrid hill]

running into this problem too with user uploads. did you ever figure it out?

[nova pier]

I think you'll have to create something custom for your needs or make use of AWS SDK to support CloudFront.

[hybrid hill]

thanks, i figured it out today. it's not quite out of box with Vapor. for others running into this using Vapor:

1. You need to set AWS_URL=<your cloudfront dist url> in your environment
2. then in vapor.yml
   storage: your-bucket-name-with-uploads
3. for the s3 bucket policy for above, you either have the option to make it public like vapor's asset bucket or you can block all access for more security and only allow Cloudfront access. here's the bucket policy for the latter:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AllowCloudFrontOACGetObject",
            "Effect": "Allow",
            "Principal": {
                "Service": "cloudfront.amazonaws.com"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::your-bucket-name-with-uploads/*",
            "Condition": {
                "StringEquals": {
                    "AWS:SourceArn": "arn:aws:cloudfront::<your account>:distribution/<cloudfront dist ID"
                }
            }
        }
    ]
}

4. create a Cloudfront Origin Access Control with S3 as the origin and always sign
5. Add a new Origin to your Cloudfront distribution and select your bucket as well as the OAC you just created (go w/ recommended, don't need it to be public)
6. add a new Behavior to your Cloudfront distribution that matches the path of the files you're serving from your s3 bucket. example /article/* because you're letting users create a new article and uploading their files to the /article/ folder on s3. (your-bucket-name-with-uploads/article/)
7. Wait for CF to re-deploy.

This should give you the following:

1. your-bucket-name-with-uploads is still private and files cannot be accessed via direct URL of s3. Only Cloudfront can access the files
2. All your files should be coming from Cloudfront now
3. If you're using Vapor, you can utilize custom asset url. This will work with dynamic images
4. This should work even if you're not using Vapor.