I'm fairly noob and new to AWS, but I've been stuck on a bug.
I have a React App hosted as Static Website on A S3 Bucket with a Cloudfront distributions setup for it so it is secured with SSL. I also have a NodeJS/express Backend hosted on EC2 with a SSL certificate that I made myself and the EC2 is all set up to receive HTTPS request(I added a load balancer to handle HTTPS request).
Here is the twist. So basically in React project config, I have the Backend URL like this :https://long-url-to-ec2..... , you get the vibe.
So I basically have 2 environments, the React App in the S3 bucket (the unsecured app) and the React App in Cloudfront which is secured. But the problem is that in the S3 Bucket version of my app, all of my request are sent to https://my-backend but in the Cloudfront version, the request are only sent to http://my-backend . Cloudfront seems to not care about the URL and just send all of my request through HTTP even if https is specified in the URL!
Does anybody know what do I have to setup In Cloudfront so it sends my request to the good HTTPS URL and not just HTTP?
Whether you use the S3 url or the CloudFront url, it's the same React app which is hosted in S3. The issue is when your react app calls the backend, which is just an ALB url, correct? So it must be an issue with your react code. You define in your react app how you call the backend. It's got nothing to do with CloudFront.
Although I'm a bit confused how you could have different results when using the S3 url and the CloudFront url. Ultimately it's the exact same react app that calls the backend. You should start with the question of how you call the backend from your react app. The exact piece of code you're using. That should give you a clue.
Related
I have a react app hosted on s3 bucket and a Django rest api hosted on elastic beanstalk. The problem comes when I go to my bucket website endpoint and inspect network urls. I realize that the request endpoint is not the one defined in my react app (api url) but it's the bucket website endpoint. I would appreciate any help. Thanks!!
I got the following setup: Cloudfront in account A and the ALB loadbalancer/webserver in Account B.
Cloudfront got a domain for the user, the loadbalancer a domain and certificate for the connection between cloudfront and loadbalancer / with security header and so on.
The initial website loads fine, but all links and scripts got the url of the loadbalancer. The webserver thinks that the client connects directly via the loadlanacer and adds the url of the loadlabancer to links and scripts etc. How can I tell the webserver that the origil url is the one from cloudfront? Is there a header I can set somewhere? The website is programmed in .net nuke, but Im not the developer of the website...
Thanks and best
Context: I have a 3rd party application running in an EC2 instance via HTTP, and a Cloudfront distribution placed infront for caching and to serve the app via HTTPS.
Website URL: https://elvis.********.com
Problem: I don't have much control over the 3rd party application - but it makes an api call to my app via http. Since the website is hosted over https, this causes an error blocked:mixed-content
(The 3rd party app makes a server call to itself, but via http - See Request URL and Origin)
In this case, shouldn't Cloudfront route this to API call from HTTP to HTTPS? It is a call to the same URL & Server after all.
Wondering if adding a Lambda#Edge function would help (viewer-request | viewer-response | origin-request | origin-response?). But i'm quite skeptical as it looks like the browser blocks the request immediately.
Any insights would be appreciated.
Thanks!
Cloudfront does not do the protocol switching or delegation. This error is coming from the browser and it clearly says it does not allow mixed content. To fix this, you need to host your endpoint on https. If you are using AWS for your endpoint hosting, then it is easy to set up a load balancer with HTTPS certificate. Or you can set up another Cloudfront endpoint for your application origin.
I am trying to deploy my angular app and nodejs server on aws. To deploy the angular app, I am using s3 bucket and enable static website hosting.
To deploy nodejs, I am using ec2. I have chosen to keep both the server and angular frontend separate.
I wanted to know how this will be available to the outside world. I have purchased a domain name say www.example.com. I am attaching with an s3 bucket, so upon launching www.example.com, I get to see my angular app. But I also want to use the same domain for my nodejs server as my angular app is making API calls to the nodejs server. Do I need to purchase a different domain for my backend server?
In my local development, I was simply running my frontend on localhost:4200 and nodje on localhost:3000. But I am not sure how it would work on the cloud.
There are multiple solutions to this problem.
You could have www.example.com point to your S3 bucket and api.example.com point to your backend.
Another solution would be to use CloudFront and configure it with multiple origins: one for your frontend (S3) and one for your backend (custom origin, API gateway or Application Load Balancer). You would then have a specific behavior like /api/* serve your backend. This solution has the advantage of having a CDN in front of both your frontend and backend and avoiding CORS request in the frontend (+ many more features offered by CloudFront).
I've made the following diagram showing the pieces which this request will flow through:
As #jogold has said, the key is CloudFront, which will behave redirecting to FrontEnd or BackEnd (Same distribution, multiple origins, multiple behaviors)
Remember to create a new origin ("Origins and Origin Groups" tab), but also a new behavior ("Behaviors" tab): Use the expected "Path Param" (Your app also should have this as a BasePath) and pay attention to "Precedence" (Default must always be the last).
In my case, "PathParam" value for BackEnd was "/api/*"
I have s3 serving my React App. Whats the best way to redirect any requests that have /api in the url to my webserver. Currently my CORS config in S3 redirects GET only and I know this is not the correct way to handle api endpoints.
somedomain.com -> serve static s3 react app
somedomain.com/api -> send requests to webapp (hosted at api.somedomain.com)
My other option is to just let nginx handle serving the app and api.
Use Cloud Front and Change the incoming patterns to different origin.
A static website hosted on Bitbucket will only allow (and redirect) GET requests.
I'd recommend you set the api.somedomain.com as your api endpoint in your JS. This would avoid the need for the /api route.