I work with CloudFront and S3 and I would like to assist you to resolve this issue.
Firstly, your use case is widely used, so there is nothing wrong there.
Generally , S3 returns a 403 when either the incorrect permissions are on the bucket, or you are trying to access a path/file that does not exist. Using OAI is also the best way to access S3 bucket, while keeping the bucket private.
So to do this, make sure your settings are as below:
- Make sure your origin is an S3 origin type, and not a custom origin. This will be for the static bucket and the media bucket.
- S3 Bucket Access, select your OAI, and let CloudFront update your bucket policy for you.
- Save the changes.
For the behavior, I am assuming your static site is on the root of the bucket. That is fine.
- Make sure the media content is in a folder and not the root of the bucket. Example: bucket-name/mediafolder/mediafile.mp4
- Create a bahavior, set the behavior path = /mediafolder/*
- For the Origin, select the S3 media bucket.
- Select your protocol and allowed methods.
- If you would like to cache the content, select the CachingOptimized policy, otherwise select the CachingDisabled policy.
- For the Origin request policy, select the CORS-S3Origin. But if you are not doing CORS requests, then you can leave this as None and save the behavior.
- Setup the default behavior for all other requests, mainly for your static bucket.
Please note that when using S3, the URL and behavior path needs to match the S3 folder structure. If your URL is https://example.com/media/mediafile.mp4, then there needs to be a folder structure like that. bucketname/media/mediafile.mp4.
Let me know if the above works. If not, we can dive a bit deeper.
You can place the media files in the same bucket as the web site, however, you add an additional Behavior to the CloudFront Distribution with a specific PathPattern like "*.mpeg" and use the CachingDisabled policy so that the videos are treated as dynamic content.
Full disclosure, I am not an S3 support engineer. I found the query interesting.
I am not sure if you have tried CORS yet. If not, you can find more details here:
Maybe try allowing your domain and the cloudfront's domain to access the secondary bucket and use the URL to the objects in your code?
"AllowedOrigins": [ "http://www.example1.com"
Please let me know if it works. If not, maybe I will try digging through a few documents.
Take care and stay safe !
Cloudfront X S3 website + secondary bucket for specific mediaAccepted Answerasked 24 days ago
Why doesn't react's BrowserRouter work on cloudfront when s3 oai settings are applied?asked 2 months ago
S3 bucket policy to allow CloudFront loggingAccepted Answerasked 8 days ago
OAI or not OAI for serving a static website in S3 using CloudFrontasked 4 months ago
Cloudfront with a Lambda@Edge pointing to a private S3asked 2 years ago
S3 Static Website RoutingRules when using Cloudfront and a domain nameasked 3 years ago
Access S3 object via cloudfront as a specific IAM userAccepted Answerasked 8 months ago
Does an S3 bucket have to be provided for a Braket DWave run?asked 2 years ago
Serve web static pages stored in S3 bucket from Eks clusterasked a month ago
A lambda function to delete old archive files in s3 bucketasked 3 years ago