Static website private content Amazon S3 and Cloudfront - css, js and images not showing

Question

I have set the acl for the origin access identity on all objects as read. I have set up the bucket policy for the OAI. The only way I can get the css, or anything else apart from the html, to work is if I reference it with the the full signed URL ie domain name/css/main.css?parameters of signed url, in the index.html. I have ensured that all files have the correct content type. Is this standard practice? Do I have to reference every image, css, js file this way with the signed url? I have been searching for days on this, so any help would be greatly appreciated. Thanks in advance.

bucket policy: { "Version": "2012-10-17", "Id": "PolicyForCloudFrontPrivateContent", "Statement": [ { "Sid": " Grant a CloudFront Origin Identity access to support private content", "Effect": "Allow", "Principal": { "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity identity canoncal" }, "Action": "s3:GetObject", "Resource": "arn:aws:s3:::bucket/*" } ] }

Answer 1

My work around is this: I figure that I dont need to protect my css, image and js files. I created a new bucket and placed them all in there and made them public then referenced those from my private site. This works. This will probably suit me as I will be creating more buckets that can reference the same files.