AWS Lambda and S3 Static Routing Files with a Custom Domain

Question

I am trying to configure a simple serverless application on AWS, but I do not understand how to assemble elements with a custom domain .

Web application routes should look something like this:

• / → Serves static HTML / CSS / JS from Bucket Builder
• /api/people/ → call the Lambda function
• /api/dogs/ → call the Lambda function
• /stats/ → Lambda function call
• /backend/ → Serves static HTML / CSS / JS from Bucket Builder

I tried using the Gateway and CloudFront APIs and connected them to Route53 to my user domain, but it seems to only support static S3 or Lambda JSON routing.

What would the AWS architecture look like, where I can freely choose routes for routing to various AWS resources (for example, / → S3, /api/people/ → Lambda, /api/dogs/ → Lambda, /backend/ → S3)

Thank you in advance.

Answer 1

One of the main problems when setting up a full stack web application using serverless technologies is the presence of a proxy level for message routing for both computation (Lambda) and static files (HTML, JS, CSS, Images). Although the API gateway uses CloudFront internally, it will not help to serve both static content from S3 and dynamic content using the same domain (avoiding cross-domain access).

Therefore, you must use AWS CloudFront for proxy messages for both the Gateway API and Lambda, which I used for most web projects. The trade-off is that there is additional latency and cost (which is important, though) when accessing the Gateway API through CloudFront, which should be acceptable.

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

Answer 2

I am relatively new to AWS, but recently I managed to get a static site running through S3 and access to Lambda features, so it’s very fresh in my mind.

First of all, there is no way to direct specific domain paths to specific AWS resources. So, if you use Route 53 to point your domain to the S3 bucket to serve static resources, all paths of this domain will try to retrieve resources only in this S3 bucket. Now, since your backend also serves static files from the S3 bucket, it could technically be in the same S3 bucket as for the / / just saved in the backend folder, if appropriate.

Otherwise, the real answer is to use subdomains.

With this concept, you can do the following:

• www.yourdomain.com point to S3, which contains a static site for "/"
• api.yourdomain.com points to the AWS API Gateway, which can act as a proxy to access your lambda functions
• backend.yourdomain.com points to an S3 bucket for your "/ backend" site if necessary

You can simply add entries to your zone for your domain to create subdomains. See the documentation here .

Getting all of this setup is beyond the scope of this question and will be a way for a long one, but hopefully this information makes sense and helps lead you in a direction that makes more sense.