Amazon CloudFront Hosting Toolkit: A new tool for frontend hosting (CDN312)

Cloudfront Hosting Toolkit

Introduction

  • Cloudfront Hosting Toolkit is an open-source tool created by the AWS team to help developers host static front-ends on AWS in a simple and easy way while retaining full control over the underlying infrastructure.
  • The speaker, Asha Suk, is an AWS Solutions Architect with 7 years of experience.

Challenges with Hosting Static Front-ends on AWS

  • The most common approach is to use AWS Amplify Hosting, which is a managed service that takes care of everything for you.
  • However, there are scenarios where you might want to customize the underlying infrastructure, such as:
    • Customizing content delivery
    • Serving static front-end and APIs on the same domain
    • Localizing the website using Edge functions
    • Customizing the hosting itself (e.g., encryption, multi-region origins)
    • Implementing custom deployment pipelines (e.g., A/B testing)

Cloudfront Hosting Toolkit Solution

  • The Cloudfront Hosting Toolkit deploys the necessary underlying infrastructure for hosting your static front-ends in your AWS account, allowing you to have full control over them.
  • It provides a simple developer experience using a CLI, allowing you to connect your GitHub project and deploy your website within a few minutes, without requiring extensive AWS knowledge.

Key Features

  • Integrates with GitHub for automatic and instant deployments
  • Applies best practices for Cloudfront and S3 configuration
  • Supports custom domains
  • Provides a deployment pipeline orchestrated using AWS services (CodePipeline, CodeBuild, Step Functions)

Architecture Overview

  1. Deployment Pipeline:

    • Orchestrated using AWS CodePipeline, CodeBuild, and Step Functions
    • New versions are deployed by uploading the build artifacts to a new folder in an S3 bucket
    • A change is then triggered to update the Cloudfront distribution to point to the new version
  2. Hosting Infrastructure:

    • Uses an S3 bucket to store the website artifacts
    • Serves the content through Amazon Cloudfront
    • Maintains a key-value store in Cloudfront Edge locations to track the current version of the website
    • Cloudfront functions running at the Edge locations rewrite the request URL to the correct version folder in the S3 bucket

Cloudfront Overview

  • Cloudfront is the content delivery service of AWS, recommended for all HTTP-based web applications.
  • It provides better reliability, performance, security, and cost-efficiency compared to direct S3 hosting.
  • Cloudfront has around 700 Points of Presence (PoPs) globally, enabling low-latency content delivery.

Request Flow

  1. User makes a request to the website (e.g., about page)
  2. The request is received by a Cloudfront Edge location
  3. A Cloudfront function running at the Edge location fetches the current build ID from the key-value store
  4. The function rewrites the URL to point to the correct version folder in the S3 bucket
  5. If it's the first request for the new version, the content is fetched from S3 and cached at the Edge location
  6. Subsequent requests for the same version are served directly from the Cloudfront cache

Getting Started and Contributing

  • The documentation for the Cloudfront Hosting Toolkit is available online, providing details on how to use the CLI and the CDK construct.
  • Contributions to the project are welcome, as the team has many ideas and would like to involve more volunteers to help maintain and add new features to the toolkit.

Additional Resources

  • The speaker, Asha Suk, posts educational content on LinkedIn related to Cloudfront and Edge security, which may be of interest to the audience.

Your Digital Journey deserves a great story.

Build one with us.

Cookies Icon

These cookies are used to collect information about how you interact with this website and allow us to remember you. We use this information to improve and customize your browsing experience, as well as for analytics.

If you decline, your information won’t be tracked when you visit this website. A single cookie will be used in your browser to remember your preference.

Talk to us