Skip to main content

Guidance for Improved Single-Page Application Performance Using Amazon CloudFront

Overview

This Guidance demonstrates how your Amazon CloudFront distribution can be configured to serve content with multiple origins while using the same domain. It details how a CloudFront distribution is used to improve the performance of single-page applications (SPAs) when accessing dynamic content through Amazon API Gateway REST APIs, or any other RESTful backends, while serving static content through Amazon Simple Storage Service (Amazon S3).

How it works

These technical details feature an architecture diagram to illustrate how to effectively use this solution. The architecture diagram shows the key components and their interactions, providing an overview of the architecture's structure and functionality step-by-step.

Well-Architected Pillars

The architecture diagram above is an example of a Solution created with Well-Architected best practices in mind. To be fully Well-Architected, you should follow as many Well-Architected best practices as possible.

CloudFront offers fast change propagation and invalidations, where changes are propagated to the edge in a matter of a few minutes, and invalidation times are under two minutes. After an API is deployed and in use, API Gateway provides you with a dashboard to visually monitor calls to the services.

Your CloudFront distribution can be configured with multiple behaviors which govern how CloudFront will process your request and what features will be applied. This feature allows you to configure multiple origins to serve content while using the same domain. Using API Gateway allows you to monitor requests to the backend applications without additional configuration.

Read the Operational Excellence whitepaper

By leveraging the managed services used throughout this Guidance, you can provide a secure experience for end users, authorize and authenticate requests, and encrypt all data at rest. Specifically, Amazon S3 offers flexible security features to block unauthorized users from accessing your data and encrypts all new data uploads. API Gateway allows you to configure authorization and authentication based on workload requirements. CloudFront can create and configure out-of-the-box AWS WAF protection for your application as a first line of defence against common web threats. 

Read the Security whitepaper

CloudFront supports multiple origins for backend architecture redundancy. The native origin failover capability for CloudFront automatically serves content from a backup origin when the primary origin is unavailable. The origins setup with origin failover can be any combination of AWS origins, like Amazon Elastic Compute Cloud (Amazon EC2) instances, Amazon S3 buckets, media services, or non-AWS origins, like an on-premises HTTP server. Additionally, you can implement advanced origin failover capabilities with CloudFront and Lambda@Edge.

It's important to note a few things about API Gateway when configuring the service for this Guidance. One, it sets a limit on a steady-state rate and a burst of request submissions against all APIs in your account. Two, you can configure custom throttling for your APIs. Three, you can use Amazon Route 53 to customize your Domain Name System (DNS). And four, you can run health checks to control DNS failover from an API Gateway API in a primary Region to an API Gateway API in a secondary Region.

Read the Reliability whitepaper

CloudFront pairs with thousands of tier 1, 2, and 3 telecom carriers globally, is well connected with all major access networks for optimal performance, and has hundreds of terabits of deployed capacity. To deliver content to end users with lower latency, CloudFront uses a global network of 450+ Points of Presence and 13 Regional edge caches in 90+ cities across 49 countries. 

Furthermore, your applications can easily achieve thousands of transactions per second in request performance when uploading and retrieving storage from Amazon S3, with Amazon S3 automatically scaling to high request rates. 

Finally, API Gateway allows you to configure caching and payload compression to optimize performance.

Read the Performance Efficiency whitepaper

Not all origins are alike, and some may involve processes, such as just-in-time packaging, that are more computationally expensive per gigabyte (GB) than fetching content out of storage. With CloudFront, you get Regional edge caches at no additional cost to decrease the operational burden on origins and lower operating costs.

With Amazon S3, you get strong read-after-write consistency automatically for all applications, without changes to performance or availability, without sacrificing Regional isolation for applications, and at no additional cost. Amazon S3 simplifies the migration of on-premises analytics workloads by removing the need to make changes to applications; it also reduces costs by removing the need for extra infrastructure to provide strong consistency.

Read the Cost Optimization whitepaper

The serverless and managed services used throughout this Guidance scale to meet changes in demand, which allows you to use resources only when required. And because AWS handles the provisioning of the underlying resources, you avoid provisioning unneeded resources and reduce the overall infrastructure footprint.

Read the Sustainability whitepaper

Disclaimer

The sample code; software libraries; command line tools; proofs of concept; templates; or other related technology (including any of the foregoing that are provided by our personnel) is provided to you as AWS Content under the AWS Customer Agreement, or the relevant written agreement between you and AWS (whichever applies). You should not use this AWS Content in your production accounts, or on production or other critical data. You are responsible for testing, securing, and optimizing the AWS Content, such as sample code, as appropriate for production grade use based on your specific quality control practices and standards. Deploying AWS Content may incur AWS charges for creating or using AWS chargeable resources, such as running Amazon EC2 instances or using Amazon S3 storage.