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.
Related
I have 2 setup,
1) Cloud-Front -> Api-Gateway -> Lambda
2) Cloud-Front -> S3 bucket (enabled web server) -> static UI files
Now is there any way to block my 1st cloud front url to allow request only from my UI cloud-front domain name? i.e If the browser is making a backend api call then it should work. But if the same api call is made from POSTMAN / CURL outside of browser then it should be blocked.
I tried enabling CORS with specific domain name, it is not blocking the request when we do from "Curl"
One way would be to setup WAF for your CF domain to filter incoming requests using Referer header. This process is explained in:
How to Prevent Hotlinking by Using AWS WAF, Amazon CloudFront, and Referer Checking
You could also do the same with using lambda#edge or CF functions, if you don't want to use WAF.
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 would like to setup my S3 bucket to rewrite the path of the route /api to a API Gateway URL.
So take the following:
User goes to website bacon.com
Website goes from Cloudflare DNS to S3 bucket
Website is a react app
React app makes a call to api which is bacon.com/api
S3 rewrites /api path to api gateway url https://ljsdflkjlsdk.execute-api.us-east-1.amazonaws.com/dev
I was able to get this to work here:
however, it forwards the URL to that API gateway URL which is not desired.
I'm not entirely sure this is possible. I'm thinking it might require either me implementing something like Route53 or writing a cloudflare worker to handle the rewrite?
Thanks in advance for your help!
So you want to proxy requests to the /api path to your backend API, while other routes, e.g. /login are served by the React app.
I may be wrong but I think neither S3 (as a static hosting provider) nor Route 53 (as a DNS tool) can help with that.
Since you mentioned you're already using Cloudflare, you can do this with CF Workers with little effort though!
Make sure bacon.com is proxied by CF (orange cloud ON on DNS tab)
Create a new worker with this code:
const backendUrl = "https://ljsdflkjlsdk.execute-api.us-east-1.amazonaws.com/dev"
addEventListener('fetch', event => {
event.respondWith(handleRequest(event.request))
})
/**
* Respond to the request
* #param {Request} request
*/
async function handleRequest(request) {
return fetch(backendUrl, request)
}
Associate the worker with the /api path on the Workers tab for the bacon.com
bacon.com/api is now a proxy sending requests to the backend url!
I have an S3 bucket with which I want to use SSL. I also want to serve up index.html by default.
When accessed over http, my-bucket.s3-website-us-west-2.amazonaws.com/ serves up index.html. However, AWS doesn't maintain an SSL certificate for this subdomain so it cannot be accessed over SSL. AWS does maintain an SSL certificate for my-bucket.s3.amazonaws.com/ which does resolve, as expected. But, that domain doesn't serve up index.html by default (even though index.html is set as the index document).
Is there a solution to this problem that does not require CloudFront (which is currently set up) or flexible SSL with CloudFlare? I'm trying to reduce the cost without sacrificing security.
When using the "Static Website Hosting" option for hosting websites from S3, only HTTP can be used. HTTPS is not supported. This is done using the my-bucket.s3-website-* URL.
The my-bucket.s3.amazonaws.com endpoint is not an endpoint for serving up a website. It's simply an endpoint for the S3 API. This is why it supports HTTPS. So you can GET, POST, etc. to this endpoint when you're authenticated (or as anonymous if public ACLs are configured).
But it's not a website endpoint and won't serve index.html or the 404 page automatically.
To act as a website and use SSL, you must use a fronting service such as CloudFront.
I'm building a single page app with an api backend. All of the static assets including html are hosted on s3 with static hosting turned on. Let's say the domain for the SPA is mydomain.com. Is there a way for me to forward all requests from mydomain.com/api/v1 to the ip address of my api backend, without setting up a dedicated proxy server?
i think it's no possible. You have to set up web server that does follow:
hosts the start page of SPA
reverse proxy requests from API to ip address you need
and put all static content under separate domain (e.g. static.mydomain.com) and associate with S3