Select your cookie preferences

We use essential cookies and similar tools that are necessary to provide our site and services. We use performance cookies to collect anonymous statistics, so we can understand how customers use our site and make improvements. Essential cookies cannot be deactivated, but you can choose “Customize” or “Decline” to decline performance cookies.

If you agree, AWS and approved third parties will also use cookies to provide useful site features, remember your preferences, and display relevant content, including relevant advertising. To accept or decline all non-essential cookies, choose “Accept” or “Decline.” To make more detailed choices, choose “Customize.”

AWS Logo
Menu

Deploy an Amazon CloudFront distribution for a web application with static and dynamic content

Leverage Amazon CloudFront as Content Delivery Network for a web application with static (Amazon S3) and dynamic content (REST API)

cloudfrontwebsiteperformancecdk
Francesco Bersani
Amazon Employee
Published Jul 19, 2024
Comments

How it works

Requirements

Deployment Instructions

Testing

Cleanup

This CDK application deploys a CloudFront distribution with two origins, one for static content stored in Amazon S3 and another for dynamic content available though a REST API. It deploys also a sample web page that loads data from a public rest API available though the Amazon CloudFront distribution.
This pattern demonstrates how to build a seamless integration of Amazon CloudFront as Content Delivery Network (CDN) with a web application that provides a static website (like a Progressive Web Application) and backend server. It provides an easy setup process based on configuration best practices.

How it works

Amazon CloudFront is a highly scalable and secure content delivery network (CDN) service that helps improve the performance and availability of web applications by caching content at edge locations close to users, reducing latency and improving the user experience. In this scenario, the web application consist of a web page that loads data, though an AJAX request, to a REST API.
Reference architecture
Reference architecture
The Amazon CloudFront distribution is configured with two origins:
  • The static content origin is the web page hosted in an Amazon S3 bucket. The S3 bucket is private and only accessible by the Amazon CloudFront distribution using Origin Access Control (OAC)
  • The dynamic content origin is a backend application that exposes a REST API.

Requirements

Deployment Instructions

  • Create a new directory, navigate to that directory in a terminal and clone the GitHub repository:
  • From the command line, use npm to install the development dependencies:
  • To deploy from the command line use the following:
Expected result:

Testing

Open the browser to: https://webappwithcloudfront.yourdomain.com You will get the page result though the Amazon CloudFront distribution.

Cleanup

To cleanup you need to execute the following commands in the CDK project:
 

Any opinions in this post are those of the individual author and may not reflect the opinions of AWS.

Comments

Comments