AWS S3 Change Url, Proxy Url, Map to Domain in 2024

It is not hard to map your ugly s3 url to your domain so you can have nice urls to share with your customers.

I will take you to this
https://files.utickets.co.za/media_wHIuV57H_i5XWqS3KN.jpg

from this
https://s3.eu-west-2.amazonaws.com/files.utickets.co.za/media_wHIuV57H_i5XWqS3KN.jpg

https://files.utickets.co.za.s3.eu-west-2.amazonaws.com/media_wHIuV57H_i5XWqS3KN.jpg

Its easy so dont stress. Get it working and then you can refine from there. I recommend you experiment with a new bucket.

Steps Outline

1. create a bucket with your domain in the name
2. add the usual bucket policy to make your files accessible
3. add the usual cors permissions to make your bucket files accessible
4. add a cname dns entry into your domain manager

Steps

1: Your bucket name needs to have your domain in it, for example your bucket name can be "yoursite.com", "assets.yoursite.com", "files.yoursite.com", "cdn.yoursite.com" - whatever you want.

2: Copy and paste or set your own bucket permissions that you want. Here is the Bucket policy for public accessibility, swop out bucket name for your bucket name (the files.yoursite.com parts):

{
    "Version": "2012-10-17",
    "Id": "PolicyForCloudFrontPrivateContent",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": {
                "AWS": "*"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::files.yoursite.com/*"
        },
        {
            "Sid": "AllowCloudFrontServicePrincipal",
            "Effect": "Allow",
            "Principal": {
                "Service": "cloudfront.amazonaws.com"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::files.yoursite.com/*",
            "Condition": {
                "StringEquals": {
                    "AWS:SourceArn": "arn:aws:cloudfront::851725547726:distribution/EM48ANPH6LBEF"
                }
            }
        }
    ]
}

3: Copy and paste the Cross-origin resource sharing (CORS) or set/use your own:

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [],
        "MaxAgeSeconds": 3000
    }
]

4: In your domain manager where you manage your website domain DNS etc you will need to add a cname record that will map your custom url to s3's url.

I get the s3 url by uploading an image into the bucket and then viewing the image and copying its url.

The url will look like this (not exactly what we expect)
https://s3.eu-west-2.amazonaws.com/files.utickets.co.za/media_wHIuV57H_i5XWqS3KN.jpg

You can actually cut and paste your bucket name to the front of the url and it works:
https://files.utickets.co.za.s3.eu-west-2.amazonaws.com/media_wHIuV57H_i5XWqS3KN.jpg

Then in your DNS manager add your cname entry like so:
host: files.yoursite.com
value: files.yoursite.co.za.s3.eu-west-2.amazonaws.com

Save it and wait for it to take affect. Now you have beautiful urls.

If you try and view your bucket files through your new url and it throws a permission error, this is because your permission policy or cors might be blocking it, you will need to try the open policies I have given and then work from there.

Thanks for reading! I hope this helped.