I am trying to host multiple websites with similar subdomains in the same S3 bucket under different folders with a cloudfront distribution that redirects to each folder.
Suppose my bucket is example.com and I want to host my angular website at sub1.example.com and another one at sub2.example.com. I have created folders for each of them in the bucket named sub1 and sub2. I have also created cloudfront distributions with the origin name points to the S3 bucket and added the origin path to the corresponding folder.
After doing this, if I try to go to sub1.example.com it works fine. But if I try sub1.example.com/home I get a 404 page with Code: NoSuchKey. I think this is because S3 is trying to look for sub1/home in the bucket rather than serving the angular file in the sub1 folder.
Is this something that can corrected? I need to do this with a single S3 bucket.
I've managed to fix the issue by following these instructions. I was able to fix the issue after adding Default Root Object when creating the cloudfront distribution and adding custom error responses in the cloudfront distribution that redirects 404 and 403 error codes to index.html.
Related
Existing App
I have a website hosted on S3 and CloudFront. APIs are hosted on ECS and are served by CloudFront via /api/* Behaviour. To handle the manual entered routes I've configured Error Pages 404 and 403 to route to /index.html on Default Behaviour.
URL -> CF -> S3 (default origin)
URL/api/** -> CF -> LB -> ECS+Fargate
Requirement
What I'm trying to do is host Admin site under a new path /admin pointing to new S3 bucket (origin 3).
URL/admin -> CF -> S3 (Origin 3)
Problem
All the traffic at /admin path is falling under Error pages and is getting routed to Default origin.
Things I've checked:
There are no conflicting paths
Cleared Cache
S3 configs are exactly same on Default Origin Bucket and Origin 3 Bucket
I figured out the solution when I removed the Error pages config. After removing this config, I was getting Access Denied error. This is the error when really the access is not there OR when the object doesn't exists. So it seems that CloudFront was unable to access files on S3 bucket.
The solution was that /admin/ path require admin folder in s3 as well for both paths to map on each other. When I moved my files in 2nd S3 bucket in correct folder everything started working.
This is a great way to host 2 sites which can share the Cookies and FrontEnd context with each other as both are under the same domain. And you don't need to manage CORS as well for this.
I have the following setup:
S3 bucket where Website hosting is enabled, "block all access" default feature is disabled. In the bucket I have an index.html file a css and a js folder with some files. I referencing them in the HTML code like <link rel="stylesheet" href="index_files/style.css"> and <script src="js/somejsfile.js"></script>. I haven't made any of the objects public directly. The bucket name is mydomain.com (I also have a www.mydomain.com and s0ubqconfigured as website enabled resdirecting everything to mydomain.com bucket)
I have a single certificate with all the cname included (naked, www, sub1). Certificate is validated using Route53
I have created a Cloudfront distribution.
Origin Domain Name points to mydomain.com.s3.amazonaws.com
Origin Path was left empty
Restrict Bucket Access: yes
Created new Identity
Allowed Cloudfront to Update bucket policy (I verified later that the policy indeed was modified)
Alternate Domain Names: listed all 3 domains
Custom SSL certificate --> used the previously created cert
default root object: index.html
redirect HTTP to HTTPS
everything else is default
Route 53 alias for the cloudformation dns entry.
The problem:
The site seems completely broken both on mydomain.com and the cloudformation url. After checking the page source in Firefox it turnes out that somehow all the CSS and JS reference got overwritten like href="index_files/some-css-file.css" and src="index_files/some-js-file.js". I have no clue where this index_files comes from. I have double checked on S3, downloaded my index.html and the code does not have this index_files nonsense.
I used Firefox Web Developer tool to overwrite temporarly index_files to css and js and the sites load as it should be...
What am I missing? And where this index_files stuff comes from? My google-fu fails me on this one.
Edit/Update:
I used the AWS Console to configure everything so no terraform or cloudformation or even aws cli is involved. (this was supposed to be a fast PoC)
The content in S3 was copied there using S3 sync. Original content comes from a website which I httrack-ed (basically downloaded all the static content of the site)
BTW today I have checked the site again and it is working. No clue why. My modifications:
I have added new origins to the distribution using same settings but with the www and the sub1 S3 buckets as soruce (so now the distributiuon has 3 origin). I don't know why would this fix it, since those S3 buckets are empty and I was always testing the site using the naked mydomain.com.
I have added a CORS rule to the bucket to allow "*" and all GET methods. But since all the files in the same naked domain s3 bucket I don't know why whould this fix the issue.
So the usual meme:
my stuff is not working... Why?
my stiff is working... But why?
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'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.
We have a website hosted which uses s3 bucket for storing different files (say policy repo). we want to reorganize the files in a proper folder under S3 bucket without breaking the link to these objects in our website. Is there a way to achieve this in S3?
You could use a Cloudfront distribution in-front of your s3 bucket and use AWS Lambda Edge to re-write the URLs mapping to the new moved folder paths without breaking the old URLs.
From Configuring a Webpage Redirect - Amazon Simple Storage Service:
If your Amazon S3 bucket is configured for website hosting, you can redirect requests for an object to another object in the same bucket or to an external URL.
You set the redirect by adding the x-amz-website-redirect-location property to the object metadata. The website then interprets the object as 301 redirect. To redirect a request to another object, you set the redirect location to the key of the target object.