AWS Lambda and S3 static file routing with custom domain

Question

I have been trying to setup a simple Serverless App on AWS but am failing to understand how to put the pieces together with a custom domain.

The web app routes should looks something like this:

• / -> Serves static HTML / CSS / JS from S3 Bucket
• /api/people/ -> Lambda Function call
• /api/dogs/ -> Lambda Function call
• /stats/ -> Lambda Function call
• /backend/ -> Serves static HTML / CSS / JS from S3 Bucket

I have tried using API Gateway and CloudFront and hooking them up with Route53 to my custom domain but either seem to only support static S3 or Lambda JSON routing.

How would an AWS Architecture look where I can freely choose routes to route to different AWS resources (e.g / -> S3, /api/people/ -> Lambda, /api/dogs/ -> Lambda, /backend/ -> S3)`

Thank you very much in advance.

Answer 1

One of the main challenges in setting up a full stack web application with serverless technologies is that having a proxy layer to route messages both for compute (Lambda) and static files (HTML, JS, CSS, Images). Although API Gateway is using CloudFront internally, it won't help in serving both the static content from S3 and dynamic content using the same domain (Avoiding Cross Domain Access).

Therefore its needed to use AWS CloudFront to proxy messages both to API Gateway and Lambda which I have been using for most of the web projects. The tradeoff is, there is an added latency and cost (Which is not significant though) while accessing API Gateway through CloudFront which should be acceptable.

For more details, you can refer my article on Full Stack Serverless Web Apps with AWS.

Answer 2

I am relatively new to AWS, but I recently was successful in getting a static site running via S3 and accessing Lambda functions, so it is pretty fresh in my mind.

First of all, there is no way to direct particular paths of domains to particular AWS resources. So, if you use Route 53 to point your domain to an S3 bucket to serve static resources, all the paths of that domain will attempt to fetch resources in that S3 bucket only. Now, since your "backend" is also serving static files from an S3 bucket this could technically be in the same S3 bucket as you use for "/" just stored in the folder called "backend" if that is acceptable.

Otherwise, the real answer is to use sub-domains.

With this concept you could do the following:

• www.yourdomain.com point to the S3 that contains the static site for "/"
• api.yourdomain.com point to an AWS API Gateway that can act as a proxy for accessing your Lambda functions
• backend.yourdomain.com point to the S3 bucket for your "/backend" site if needed

You can just add record sets to your hosted zone for your domain to create sub-domains. See documentation here.

Getting all of this set up is way out of the scope of this question and would be way to lengthy, but hopefully this information makes sense and helps to lead you in a direction that makes more sense.