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.
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.
We have a S3 bucket serving a static website, and it's located 'behind' a CloudFront distribution (for SSL access). It uses the www subdomain, and something like https://www.our-domain.com/ works fine.
Now we also want the 'apex' or 'naked' domain to work correctly by redirecting (via a 301 redirect) all requests to that website above. Unfortunately, that does not seem to work.
For the setup, we created another S3 bucket, something like redirect-our-domain-website, and in the properties we enabled static website hosting, selecting to redirect all requests to the target www.our-domain.com.
When we retrieve this latter bucket via the S3 bucket endpoint for static websites, http://redirect-our-domain-website.s3-website-eu-west-1.amazonaws.com we are being redirected correctly to the intended target www.our-domain.com.
Unfortunately, when creating a CloudFront distribution to also front that 'static website redirector' (again, for SSL), the redirection does not seem to get activated.
The browser result for request on the 'naked' domain https://our-domain.com/ shows that AWS S3 XML document:
<ListBucketResult xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<Name>redirect-our-domain-website</Name>
<Prefix/>
<Marker/>
<MaxKeys>1000</MaxKeys>
<IsTruncated>false</IsTruncated>
</ListBucketResult>
So, instead of redirecting to the intended target, it shows a ListBucketResult of the S3 bucket of the static website redirector.
I had expected that the S3 static website redirection would redirect the request to the other S3 static website (actually containing the website).
Since no configuration details have been provided, would be difficult to identify the causes.
As there are many articles that have done the same, by comparing it will identify what is missing, or just re-using them would do the work.
Redirect Bare Domain to WWW
Setting up SSL-enabled S3 redirection with CloudFormation
cloudformation-s3-website-ssl-with-redirect.yaml
Step 4: Configure Your Subdomain Bucket for Website Redirect
At the moment I have mydomain.com pointing to a Django EC2 instance with ABL in front of it and CF in front of the ABL.
Now I have the requirement of serving a React single page app under an specific path mydomain.com/my-specific-path (of course everything under HTTPS)
I tried everything I could to host my SPA in an S3 bucket and use CF to redirect the calls to that S3. But it was impossible to serve the app over HTTPS that way (because of S3 hosting and subfolders).
I am thinking now about setting a reverse proxy in front of my Django app. But I don't know if that is the best solution, and I don't know the best way to do it.
Could you please give me some insights about how to serve a SPA under a specific path?
Thank you in advance.
You need to:
1) Add your ALB as an origin to your CloudFront distribution
2) Add your S3 bucket website URL as an origin to your CloudFront distribution
Note: Adding S3 as an origin from the dropdown box that auto populates here will not work for hosting a website out of S3. This feature is for hosting static files only.
2a) Optionally lock your S3 bucket down to CloudFront using a condition in the bucket policy that checks for header value that only CloudFront and your S3 bucket knows
3) Set the default root object in your CloudFront distribution to be index.html
4) Upload your react app to a sub-folder in your S3 bucket, not in the root. This sub-folder must match the path you set on your React app origin in CloudFront
5) Set a default behaviour in your CloudFront distribution that points to your ALB
6) Set a behaviour in your CloudFront distribution that points my-specific-path/* to your S3 bucket origin
7) Terminate SSL on your CloudFront distribution using AWS Certificate Manager
This setup should give you SSL on both your Django app and your React app being hosted in S3.
I've got this running, screen shots below:
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.
I have created a redirect from url get.blahblah.com to point to a beta version of our app. I created an S3 bucket, then created a Cloudfront distribution using it, and then added an A entry in Route 53 and everything is working.
Now I wanted to test out updating the URL in S3 so that once we update our final app we can update the URL. I changed the S3 bucket redirect to google.com. When I click on the link in the S3 bucket it correctly redirects to google.com.
But when I go to my get.blahblah.com website, it's still pointing to our beta app and not google.com.
Is there something I have to do in order to make the redirect url "update" in all of this? I'm an AWS noob and getting here took me some time because it's not too straight forward in the guides.
EDIT:
Here is the cache TTL I am talking about that I modified: