How can I use AWS CloudFront and API Gateway side by side for the same domain?

Question

I'm putting that static assets of my website on S3, and setting up CloudFront to distribute them. These essentially holds the content users would need for any GET request on my site, to existing paths that is, with a catchall for errors.

I also have some POST requests I need to handle. Form submissions, sending emails, notifications, interacting with the database.

How can I set up Lambda (or API Gateway) side by side with CloudFront for the same domain so that CloudFront handles GET requests, and API Gateway handles requests with a body or POST requests. Or can I do it by individual URL somehow?

Lorusso

Answer 1

Create the distribution in CloudFront and get it working with S3.

Then add a second origin, pointing to the hostname assigned in API Gateway.

Then create a second Cache Behavior in CloudFront, using the API Gateway origin, setting it for the appropriate Path Pattern (such as /api/*) that API Gateway expects, and configure it to forward all methods (GET, POST, PUT, etc... the default is only GET and HEAD but there's a radio button to enable all methods). You'll probably want to forward some headers, so select those... but don't forward the original Host header, because that won't work. You may also want to forward query string or cookies, and those need to be enabled on that same screen.

That's pretty much it. CloudFront sends the requests to the appropriate backend, based on path matching.

Saffron

You rock!!! This is perfect, and it's intuitive too. I like when the tech makes sense : ) Thanks, @Michael! – Lorusso

So, it seems that for the best performance you'd create a separate API gateway for various sets of needed Cache Behaviors. A whole set of backend services like emailing contact form submissions wouldn't need cookies, but a set of API calls that require authentication would very much need cookies. In this situation, you'd want to create two different CloudFront Behaviors. Am I getting it? – Lorusso

@Costa yes, that's true (to a certain extent). Only GET, HEAD, and OPTIONS responses can be cached -- POST, PUT, etc. responses wouldn't actually be cached by CloudFront so you whether send the cookies, etc., won't have a performance impact for those. For GET, HEAD, and OPTIONS, CloudFront caches the response against the entire request as forwarded -- not just one cached copy of each "page" (resource) -- so if (e.g.) session cookies are sent, a separate cache entry would be created for each different user reqesting the same resource. – Saffron

Note that, by default, you can create a maximum of 25 Cache Behaviors within one distribution. This appears to be something that can be increased by submitting a support request with justification of the use case, but since each behavior's path pattern has to be checked for each request until a match is found, you might get some pushback because eventually there would potentially be a performance issue from a large number of comparisons that would need to be processed for each request. – Saffron

Ah, interesting. That's helpful. So maybe we use one API gateway and split our "micro" services across lambda functions. There's also lambda@edge that I'm looking into. – Lorusso

Side note, apparently API Gateway uses CloudFront behind the scenes, I wonder if this hints at how/why Amazon is creating lambda@edge where it interacts directly in CloudFront. – Lorusso

I don't think so. CloudFront already does some things that API Gateway needed, so it's a logical synergy. Think about S3 -- you can't use a custom SSL cert on S3, and arguably that's a feature S3 never needs to re-invent, since CloudFront has already solved it. S3 Transfer Acceleration also uses the CloudFront network. Lambda@Edge is nice, but has very limited functionality compared to API-Gateway + Lambda... you can modify requests and responses, but you can't (e.g.) connect to your database to make decisions, using Lambda@Edge -- no network access, no /tmp, no SDK, and it's Node.js only. – Saffron

Ah, very limited indeed. API Gateway and Lambda it is. – Lorusso

Any chance you'd have a hint on how to create clean URLs (without the .html in the URL) on CloudFront? #42742339 – Lorusso

is there any way to avoid two ssl hits in this scenario when using https? one ssl connection to cloudfront and then another to the api gateway invoke endpoint? – Leung

@SterlingCamden there's no way to completely eliminate it, but Cloudfront does support maintaining keepalive connections to the origin for reuse. docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/… – Saffron

That’s interesting, thanks for the info. I’ll check to make sure our gateway allows that. – Leung