Static websites on AWS — Designing Lift
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
- 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:
- It supports HTTP and HTTPS.
- It’s a CDN: it can cache our websites all over the world.
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.htmlwhen 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: awsfunctions:
# 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.
