S3 Hosting + Api Gateway

Question

I'm trying to host a static site in S3 with ability to handle some dynamic content using Lambda/Api Gateway. Can't seem to be able to do that. I want URLs to look like this:

example.com/index.html
example.com/images/*
example.com/css/*
example.com/api/* -> API Gateway 

Also, when redirecting I'd like to keep the example.com as a root domain. I tried RoutingRules in S3, but redirects from the client. I need this to be transparent from the user, like proxying requests.

Answer 1

While Bob's answer is pretty neat for public websites and is simple but if you are looking for other alternates which can work for internal sites or don't want to use CDN, you can try following options.

Option 1 -

This is most common option people prefer. You just configure 2 different DNS hosts for static vs api.(Assuming you enable proper CORS for *.example.com)

example.com(S3) --> S3 static content

api.example.com(APIGateway) --> Lambda

Option 2 -

Example.com(APIGateway) --> /apigLambda -->Lambda

Example.com(APIGateway) --> /* --> S3 Bucket/S3 File.

API Gateway Configuration -

API Gateway S3 Backend Proxy -

Example API Urls -

https://xxx.execute-api.us-east-1.amazonaws.com/dev/apigLambda

https://xxx.execute-api.us-east-1.amazonaws.com/dev/myfilename.css

Reference -

https://docs.aws.amazon.com/apigateway/latest/developerguide/integrating-api-with-aws-services-s3.html

Note - In above reference Url, the bucket name is being accepted in Url Path but my example hides bucket name so users have no idea of S3 bucket name when they see API Gateway Url.

Option 3 -

As per your comment just use {proxy+} as resource for proxying S3 to support sub-folders calls but as you suggested, making just pass-through proxy doesn't give much options to transform HTTP response body which I believe still ok since you know your website content files.

Answer 2

You can configure this by putting a CloudFront distribution in front of both the API Gateway API and the S3 bucket for static content. This would also allow you to take advantage of CloudFront's edge caching.