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!!
Related
I created a Django Rest APIS using the Django Rest framework.
I used Zappa to deploy my DJANGO API and got a working URL
https://autocreatedname.execute-api.region.amazonaws.com/dev
Zappa created an s3 bucket and a lambda function
After that, I created a Cloudfront distribution with my custom domain name and got
d3b779m4oksdfs.cloudfront.net --> this works in isolation on the browser.
I created AWS certification and added CNAME and Value to my Godaddy DNS and it's active and validated.
Now, I am not sure if I need Amazon route 53/API Gateway to connect these.
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.
I'm not very familiar with deployment and networking as I'm primarily a frontend developer. I want to create a project with Laravel and React (separated, not integrated with blade), and deploy them to AWS. I want to use Laravel only as an API server, and I'm planning to deploy it on EC2. If I host my React app on S3, how will it be possible for me to share the same domain with the API sever running on the EC2 instance?
I know that I can have separate subdomains,like www.example.com for my React app and api.example.com for my API server. However, if I want to have www.example.com for my React app and www.example.com/api for my API server, what options do I have? And what resources can you recommend for me to get more up to speed on this topic? Thanks!
As you want to use S3 and EC2 you would need to use a service that can distribute to both endpoints based on a condition.
The best service for this would be CloudFront, which supports distribution to S3 and EC2 (as a custom origin).
To do this you would create your distribution with an origin for the S3 bucket, and an origin for the API. As your API is hosted on the /api/* path you would add this as the path pattern when adding the secondary origin via a behaviour.
CloudFront will then route any requests to /api/* paths to your EC2 origin.
I have found an article named How to route to multiple origins with CloudFront which I hope will explain the steps to accomplish this in greater detail.
I have an application deployed on AWS, the frontend (a react static site) is on Amplify and the backend (ASP.Net Core) is on Elastic Beanstalk. I can't send requests to the API because of CORS rules.
So far I've tried:
Adding CORS to the backend following this guide: https://learn.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-3.1
It didn't worked and I can't find any guides on the internet, all of them talk about adding CORS to the S3 Bucket.
I'm pretty noob with AWS, it's my first time working on it (Came from Azure) and feel so frustated by all the clutter and the complexity involved in any operation (compared with Azure).
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.