S3 content access through domain URL
In this article, I will walk through steps we need to take for accessing content from the S3 bucket using your domain URL, where content maintained in a separate bucket than your static website. We can access content directly using the S3 URL. But I do not want to expose S3 bucket for public and content access should use your custom domain URL instead of S3 URL.
You should be able to access the file directly using the S3 URL.
https://s3.us-east-2.amazonaws.com/images.example.com/public/content/cat.jpg
I prefer to access cat.jpg using a custom domain URL created in Route53 (pub.example.com). Static website content maintained in an S3 bucket “pub.example.com.”
You can follow other blogs to check how to enable Route53, CloudFront, and S3 using certificates. The rest of the blog assumes you already have Route53, CloudFront, and S3 bucket (Static Website hosted in pub.example.com).
Below steps will take you to configure Cloudfront to retrieve files from “images.example.com.”
CloudFront Origins and Behaviors
Origins:
Cloudfront caches all the content from the origins defined. As part of this step, ensure you have added the “images.example.com” S3 bucket as one of the origins.
Behaviors:
CloudFront compares a request for an object with the path patterns in your cache behaviors based on the order of the cache behaviors in your distribution. Arrange cache behaviors in the order in which you want CloudFront to evaluate them.
Add headers to avoid CORs or inflight errors when you try to embed the end URL on your static website. Let the remaining fields be the default.
The essential part to note here is the path. The path should have the file path “public/content/*.” All the configuration does is to refer “images.example.com” bucket for all files accessed using
S3 Bucket updates
S3 bucket requires the CORS set up to access the files using the GET method.
<CORSConfiguration>
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>HEAD</AllowedMethod>
<ExposeHeader>x-amz-meta-description</ExposeHeader>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
After this configuration, you should able to access the content on your static website using your domain URL.