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).

Please note: [Disclaimer]

Architecture Diagram

[Architecture diagram description]

Download the architecture diagram PDF 

Well-Architected Pillars

The AWS Well-Architected Framework helps you understand the pros and cons of the decisions you make when building systems in the cloud. The six pillars of the Framework allow you to learn architectural best practices for designing and operating reliable, secure, efficient, cost-effective, and sustainable systems. Using the AWS Well-Architected Tool, available at no charge in the AWS Management Console, you can review your workloads against these best practices by answering a set of questions for each pillar.

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 

Implementation Resources

A detailed guide is provided to experiment and use within your AWS account. Each stage of building the Guidance, including deployment, usage, and cleanup, is examined to prepare it for deployment.

The sample code is a starting point. It is industry validated, prescriptive but not definitive, and a peek under the hood to help you begin.

Open implementation guide
Open sample code on GitHub

Related Content

Networking & Content Delivery
Blog

Improve Single-Page Application (SPA) Performance with a Same Domain policy using Amazon CloudFront

This post demonstrates how you can use a same domain policy with Amazon CloudFront. 

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.

References to third-party services or organizations in this Guidance do not imply an endorsement, sponsorship, or affiliation between Amazon or AWS and the third party. Guidance from AWS is a technical starting point, and you can customize your integration with third-party services when you deploy the architecture.

Was this page helpful?

 Feedback