Static websites on AWS — Designing Lift

Matthieu Napoli
Apr 16 · 3 min read

This article is part of a series on Lift, an open-source project that simplifies deploying serverless applications.

Thanks to tooling like the Serverless Framework, deploying serverless apps on AWS is easier than ever. However, some parts are still harder than they should be.

This is why we started Lift, an open-source project that simplifies deploying serverless apps. Lift will be distributed as a plugin that adds new features to the Serverless Framework. The project is currently work in progress, with a first beta planned for May 2021.

Let’s kick-off the series with a first feature: deploying static websites, like React, Vue or Angular applications:

  • How to deploy production-ready static websites on AWS today,
  • How we plan to simplify that with Lift.

The naive approach

To serve static files without managing servers, we can use Amazon S3.

To do this, we create a S3 bucket, make it public, enable “Website hosting”, and upload our website in there. We can also set up a custom domain with a few extra steps.

Problems with the naive approach

  1. S3’s “Website hosting” feature does not support HTTPS.

In 2021, HTTPS is a must-have: that’s a deal breaker.

2. No CDN.

While not a hard requirement for everyone, most alternatives (Netlify, Vercel…) automatically provide a CDN with static websites hosting. This allows caching all over the globe, which can drastically improve performances.

A production-ready approach

Amazon CloudFront can solve both our problems:

  1. It supports HTTP and HTTPS.
  2. It’s a CDN: it can cache our websites all over the world.
AWS architecture with CloudFront in front of Amazon S3.
AWS architecture with CloudFront in front of Amazon S3.

While the architecture looks simple on the surface, there are many details to get right:

  • Instead of making the S3 bucket public, we should setup “Origin Access Identity” to allow CloudFront to read in S3.
  • To support Single Page Applications like React/VueJS, CloudFront must be configured to serve index.html when the requested URL does not match in file in S3.
  • Options like “HTTP 2 support”, “Gzip compression” and “HTTP to HTTPS redirections” should be enabled.
  • Caching should be optimized for static content: with a (sane) default TTL, ignoring cookies and query strings.
  • On deployment, the CloudFront cache must be invalidated to make sure all visitors get the new version of the website.

To automate this with CloudFormation, we would need over 70 lines of YAML… All that for a static website!

This should be simpler!

Deploying static websites with Lift

Lift is a Serverless plugin that simplifies deploying AWS resources and serverless architectures.

We are currently working on a “Static Website” component that can be deployed via serverless.yml:

service: myappprovider:
name: aws
functions:
# AWS Lambda functions
# [...]
static-websites:
landing:
path: landing/build

On serverless deploy, Lift will create the necessary resources (CloudFront and S3) and configure them for production.

Lift will also upload the content of the public/landing directory to S3, and purge the CloudFront cache to make sure the new version is visible by everyone.

Deploying static websites is a small part of what we are working on with Lift.

To follow Lift’s development, star or watch Lift on GitHub.

We are also looking for feedback on the Static Website feature: get involved in the GitHub discussion.

Serverless Transformation

Serverless Tools, Techniques, and Case Studies