Simple serverless API+static website in AWS

Mauro
2 min readApr 28, 2022

I like using serverless architectures for new projects because of how much cheaper it is compared to having your own servers/instances running all the time, and I need to worry less about the infrastructure. If my project is a sudden success (not probable, but still possible), everything should scale smoothly.

At the same time, I try to keep my development as much cloud provider agnostic as I can. And since as a solo developer I need to take care about everything, I want the overall orchestration and configuration small.

That’s why I like using a single AWS Lambda function for the entire API. I can keep developing using my regular packages (like ExpressJS) and I can run everything locally using containers. Not long ago that AWS added support for deploying lambda using containers, and this makes the whole processes even smoother.

For my webapp projects I’ve used AWS API Gateway to route all the API calls to a Lambda while hosting the client side React app in an S3 bucket. To avoid having to handle CORS configuration and requiring the client side to do pre-flight requests, I prefer having everything under the same domain and just route the API using a /api prefix in the path, and everything else routed to the bucket. To achieve this, I used CloudFront, but this adds yet another set of configurations and complexity to my deployment.

That’s why I decided today to try to build everything using just AWS API Gateway v2. Since I always use CloudFlare too with my projects, I don’t need the caching features that CloudFront provides. So I came up with this simple architecture:

Simplified design of the architecture

With a custom domain name, I can configure it in CloudFlare, and have all this behind a nice domain protected and cached, avoiding multiple calls to the S3 bucket.

It took me a few hours to write the CloudFormation template, mostly because the examples that I found were using API Gateway v1 and not v2. Also not many people are using it to also route static content to S3. But here it is:

This already allows me to deploy different environments for my project with ease. My next step is to take advantage of how easy is to create environments using this template, to have an environment setup for new feature branches using GitLab’s Review Apps. Come back again to read about how that worked out.

--

--