I have a React-website running on a CloudFront, hosted in a S3 bucket. The website has been working properly for a long period, but now I've updated it, and then it kept showing the old site, until i reload the page - then the new one will show.
To fix this, I tried to invalidate some of the files, as I thought it was a cache thing. Here's what I invalidated:
After doing this, my website now shows a blank page the first time it loads - in the developer console it gives me this:
So now it seems like I cant reach the files (Failed to load resource: the server responded with a status of 403 ()). The thing is, that if I reload the page, the right site will show.. So I'm a little confused.. I tried to change the bucketpermissions to this:
{
"Version": "2008-10-17",
"Statement": [
{
"Sid": "Allow Public Access to All Objects",
"Effect": "Allow",
"Principal": {
"AWS": "*"
},
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::my.bucket.name/*"
}
]
}
- with the right bucketname obviously :-)
Maybe the permissions will take long time to have an effect? It's just strange that the old website worked as expected, until I updated the files..
Anyone has an idea of a fix?
Have a lovely day :-)
Update:
Here's an image of the network tab from chrome, when loading the page: