hosting static site in s3 bucket multiple environments using cloudfron

Question

I've bucket named projectX that have 3 folders under (dev/staging/prod)

Each one of the folders contain VueJs Application that should be served by cloudfront.

I managed to serve it by S3 API endpoint but when user refresh the page it's try to access the wrong place.

Is this possible or I need to create bucket for each environment and use S3 website endpoint.

Thanks you in advance

Answer 1

You have to create each Route53 A record respective bucket and CloudFront S3 as origin. As in Route53 console it allow only mapping bucket ARN or name not inside folder or CloudFront ARN.

Recommended: create separate bucket for each environment and mapped respective Route 53.