I originally created an S3 bucket with a cloudfont to display the html code in the bucket at the publicly hosted domain hosted. I deleted the contents of the S3 bucket and uploaded new files. The endpoint for the S3 bucket displays fine in the web. The hosted url no longer works, I get an 404 error.
Failed to load resource: the server responded with a status of 404 ()
Could you please provide more details of your CloudFront distribution settings? I wrote this article explaining how Cloudfront and S3 works and how you can deploy React applications step by step! It might be useful for you.
Please have a look at: Medium - How to deploy single page applications to Cloudfront
I discovered my error. Instead of using the drop down menu for the orgin link I used the endpoint of the bucket. It works now.
Related
I followed a really really simple manual to create S3 bucket and put CloudFront in front of it.
See here [1]. If I create the S3 bucket in us-east-1 everything is working as expected: After I uploaded a file, I can see it via e.g. xyz.cloudfront.net/myExampleFile.txt link.
But when I create the S3 bucket in e.g. eu-west-1 or eu-central-1, then as soon as I open the xyz.cloudfront.net/myExampleFile.txt link, my browser gets redirected to the direct S3 bucket link xyz.s3.amazonaws.com/myExampleFile.txt which of course is not working.
--
I have no clue what I could be possibly doing wrong... And due to the fact, that I am not able to submit any support request to AWS directly ("Technical support is unavailable under Basic Support Plan"), I thought I might ask the community here, if anybody else experience the same strange behavior or has any hints, what is going wrong here?
Thank you in advance for any help
Phenix
[1] Step 1,2 and 4 under Using a REST API endpoint as the origin, with access restricted by an OAI on https://aws.amazon.com/de/premiumsupport/knowledge-center/cloudfront-serve-static-website/
You are probably encountering the issue described here.
If you're using an Amazon CloudFront distribution with an Amazon S3 origin, CloudFront forwards requests to the default S3 endpoint (s3.amazonaws.com), which is in the us-east-1 Region. If you must access Amazon S3 within the first 24 hours of creating the bucket, you can change the Origin Domain Name of the distribution to include the regional endpoint of the bucket. For example, if the bucket is in us-west-2, you can change the Origin Domain Name from bucketname.s3.amazonaws.com to bucketname.s3-us-west-2.amazonaws.com.
I am using reactJS to develop our website, which I uploaded to S3 bucket with both index and error documents pointing to "index.html".
If I use the s3 bucket's url, say http://assets.s3-website-us-west-2.amazonaws.com", I get served my index.html. So far, so good. If I then go to specific subpage by deliberately appending /merchant, it goes there to without any problem although there is no folder called /merchant in my s3 bucket.
However, if I now attach this S3 bucket to my CloudFront distribution, and I try to directly address "https://blah.cloudfront.net/merchant", it responds with "access denied" because it could not find the subfolder /merchant in s3 bucket.
How do people get around this issue with CloudFront? I have so many virtual subpages that don't map to physical folders.
Thank you!
I have the answer.
In the cloudfront, set a custom error response like this
I uploaded a blazor webassembly project to an static website hosted aws s3 bucket and when accessing it from a browser i get this error:
browser error
I figured that changing the content-type on the bucket of the file 'mono.wasm' to 'application/wasm' but that doesn't seem to help.
Apparently the content-type change had not gone through yet on CloudFront. A refresh on the associated CloudFront instance solved the problem.
I'm setting up an S3 bucket behind CloudFront that is meant to serve static assets. My problem is doing a / on any directory with no file name will have the browser download a download.txt with 0 bytes. I have my S3 bucket setup for Static Website Hosting and is pubic, so I'm able to access my assets.
https://s3-bucket.domain.com/path/to/file.jpg -> get asset, working
https://s3-bucket.domain.com/path/to/file-bad-name -> Error status 403, working. Renders error.html from S3.
https://s3-bucket.domain.com/path/to/ -> sends download.txt, not working
How do I configure #3 to not send a download.txt and render an error page instead?
There are few things happening there.
You need to map it to new origin if you want to point the path to an S3 object.
Your pattern is not having priority in CloudFront.
If you fix one of the above or both, then it should work as expected.
I have my S3 bucket setup for Static Website Hosting and is pubic
...but you selected the bucket from the dropdown list when defining the origin... yes?
You need to configure the origin domain name to use the web site hosting endpoint for the bucket.
When you configure your CloudFront distribution, for the origin, enter the Amazon S3 static website hosting endpoint for your bucket. This value appears in the Amazon S3 console, on the Properties page under Static Website Hosting. For example: http://bucket-name.s3-website-us-west-2.amazonaws.com
https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/DownloadDistS3AndCustomOrigins.html#concept_S3Origin_website
If you don't do this, and you created folders in the bucket using the S3 console, then what you are currently observing is the expected behavior, a side effect of the way the console creates those imaginary folders.
I have a React app served from an S3 bucket which is set up for static website hosting, behind a Cloudfront distribution, with a custom domain (https://dev.meal-plannr.com) managed by Route 53.
When I go to my custom domain or the Cloudfront URL I get a "Too many redirections" (Safari) or "dev.meal-plannr.com redirected you too many times." (Chrome). Going to the S3 bucket URL loads the website fine. Interestingly I only get the error in Chrome if I have the dev tools displayed - without that the website loads correctly on all URLs.
Here is the configuration for each of the services mentioned above.
S3
Cloudfront
Origin configuration:
General:
Behaviours:
Error Pages:
Route 53
Up until around 30 minutes ago my S3 bucket was set up to redirect to https://dev.meal-plannr.com but I've since removed this. Have I misconfigured something?
I had the same issue after setting up a redirect for my S3 bucket. After clearing my Cloudfront Cache, everything was back to normal.