Amazon CloudFront and Amazon S3 for Single Page Application Hosting

Amazon CloudFront distribution → Amazon S3 bucket

This project hosts a Single-Page App using Amazon CloudFront & S3, where CloudFront serves the SPA from an S3 bucket for static hosting.

Here's how hosting a static website using Amazon CloudFront and Amazon S3 works:
- An Amazon S3 bucket is created and configured for static website hosting
- A CloudFront web distribution is created, with the S3 bucket configured as the origin server. CloudFront acts as a content delivery network (CDN) for the website
- When a user requests a file from the website, CloudFront first checks if the file is cached at one of its edge locations (data centers) closest to the user. If the file is cached, CloudFront serves it directly to the user.
- If the requested file is not cached at an edge location, CloudFront fetches the file from the S3 bucket origin. It then caches the file at the edge location for subsequent requests
- For subsequent requests, CloudFront serves the cached files from the nearest edge location to the user, providing low latency and fast content delivery.
- When website files are updated in the S3 bucket, CloudFront automatically detects the changes and retrieves the updated files from the origin. Cache invalidation can also be manually triggered to force CloudFront to fetch the latest versions.

< Back to all patterns

GitHub icon Download this pattern (.zip)

GitHub icon View this pattern on GitHub


Clone repo

git clone https://github.com/aws-samples/serverless-patterns/cd serverless-patterns/s3-cloudfront-spa-tf

Deploy

<code>terraform init</code><code>terraform plan</code><code>terraform apply</code>


Testing

Refer to README

Cleanup

terraform destroy

Created by:

Junaid Ansari

Junaid Ansari

Cloud Application Architect at AWS.

Follow on LinkedIn