CloudFront前端托管工具包：全新的前端托管工具_d3l3bzexjrt9b7 cloudfront net

技术文档

CloudFront前端托管工具包：全新的前端托管工具

关键字: [Amazon Web Services re:Invent 2024，亚马逊云科技， CloudFront Hosting Toolkit， Static Front-End Hosting， Cloudfront Hosting Toolkit， Infrastructure Customization， Deployment Pipeline Automation， Edge Computing Optimization]

导读

在这个闪电演讲中，我们将探讨Amazon CloudFront托管工具包——一个开源的命令行工具，旨在简化在亚马逊云科技上部署自管理前端的过程。了解这个强大工具的运作方式，并学习如何利用它通过基于Git的工作流来部署安全快速的前端，同时保持对底层亚马逊云科技资源的完全控制。

演讲精华

以下是小编为您整理的本次演讲的精华。

各位下午好!欢迎来到亚马逊云科技 re:Invent 2024关于“CloudFront托管工具包:一种新的前端托管工具”的会议。我希望大家午餐过后精神饱满，我会尽力用这个精彩的演讲来帮助您消化。

今天，我们将讨论CloudFront托管工具包，这是由亚马逊云科技团队创建的一款开源工具。该工具的主要目的是帮助开发人员以简单易用的方式在亚马逊云科技上托管静态前端，同时保留对底层基础设施的完全控制权。

我的名字是Ashsha Soup，过去7年一直是亚马逊云科技解决方案架构师团队的一员。让我们开始吧!

如果您想在亚马逊云科技上托管静态前端，最简单和常见的方法是使用Amazon Amplify托管。本质上，您只需将GitHub存储库连接到Amplify，这是一项托管服务，每当您对项目进行提交或更改时，它都会为您处理一切。Amplify会自动检测更改，构建网站的新版本，并立即发布。它是根据使用的存储、传出数据传输和构建时间等不同维度构建的。我个人为自己的网站使用Amplify托管。

但是，在某些情况下，您可能需要自定义底层基础设施，而托管服务(如Amplify托管)无法实现这一点。例如，您可能希望自定义内容交付、在同一域名上为静态前端和API服务，或使用一些边缘功能本地化您的网站。也许您希望自定义托管本身、S3存储桶的加密、实现多区域源或通过实现A/B测试来自定义部署管道。

当您需要进行这些自定义时，您必须从头开始构建一切，这并不简单。您需要了解CloudFront、S3和许多其他亚马逊云科技组件，以及如何为每个组件应用最佳实践。您还需要考虑如何实现原子和即时部署等功能。最后，您需要学习CDK和CloudFormation来部署这种基础设施。

这正是CloudFront托管工具包旨在解决的具体挑战。该工具在您的亚马逊云科技账户中部署托管静态前端所需的底层基础设施，让您可以完全控制它们，同时提供简单的开发人员体验。使用CLI，您可以连接GitHub项目，并在几分钟内将网站部署到亚马逊云科技上，无需太多亚马逊云科技先验知识。

现在，让我们深入了解设置CloudFront和S3的一些复杂性。首先，您需要在北弗吉尼亚配置TLS证书，创建S3存储桶并应用最佳实践，为CloudFront创建策略以处理缓存策略和安全头，并创建源访问控制以确保请求仅通过CloudFront访问S3。然后，您创建CloudFront分发，为S3存储桶添加权限以允许CloudFront获取内容，找出如何添加index.html文件，最后更改DNS记录。这是很多步骤!

CloudFront托管工具包会在幕后为您处理所有这些。使用CLI，您可以在几分钟内以简单的方式部署它，它提供了与GitHub集成以实现原子和即时部署的功能，应用了所有最佳实践，并允许您为网站使用自己的自定义域名。

让我们仔细看看CLI体验。首先，您需要安装NPM包。然后，在本地克隆存储库后，导航到该文件夹并运行init命令。此命令允许工具包发现您的项目、使用的框架和GitHub项目链接。之后，您运行yarn run deploy命令，它将部署托管基础设施和部署管道。这需要几分钟时间，在设置过程中，您将被要求验证与GitHub存储库的连接。

在幕后，部署管道由Amazon CodePipeline、Amazon CodeBuild(用于构建网站工件)和Step Functions(用于协调新版本的更改)编排。每次您对存储库进行更改时，构建都会上传到S3存储桶中的新文件夹，并向CloudFront发送更改URI命令以开始指向新版本。您的用户将立即看到新版本。此过程由GitHub中的更改自动触发，但如果您希望使用自己的CI/CD管道自定义部署，您可以将网站工件放在S3存储桶上，它将触发管道。

对于托管基础设施，它很简单:一个S3存储桶，每个构建的工件都放在专用文件夹中，并通过Amazon CloudFront提供服务。每次有新版本时，都会将专用文件夹上传到CloudFront，当我们想要更改URI时，我们会在与CloudFront关联的键值存储中更新状态。

这个键值存储是一个全局分布式键值存储，位于CloudFront边缘位置。它允许在边缘位置运行的CloudFront函数(即在边缘位置运行的逻辑)自定义CloudFront如何与请求交互，并确定要使用的网站最新版本。基于此，它会重写URL以指向S3存储桶上正确的文件夹。

简单说一下Amazon CloudFront:它是亚马逊云科技的内容交付服务，建议所有客户在其基于HTTP的Web应用程序工作负载中使用。它是构建良好架构的Web应用程序的基础构建块，提供更好的可靠性、性能、安全性，以及从亚马逊云科技传出数据传输的更好成本。CloudFront是一项全球分布式服务，在全球约700个边缘位置提供服务。

现在，让我们看看用户与网站交互时的请求流程。首先，假设用户正在导航到“关于”页面。我们向CloudFront发出GET请求，该请求由边缘位置接收。执行CloudFront函数，该函数从键值存储中获取当前构建ID。我们获取此构建ID并将URL重写为S3中包含构建ID的文件夹。如果是第一次，则为缓存未命中，因此我们转到S3存储桶。构建ID成为缓存键的一部分，以确保我们从S3获取新内容，而不是从CloudFront缓存中获取。

现在，假设您已对网站进行了更改，并且有新版本可用。它将触发管道，开发人员推送提交，从GitHub获取新代码。我们将构建网站的新工件，并将其上传到S3中的新文件夹。然后，使用Step Functions，我们将启动一个工作流来更新CloudFront函数的键值存储中的工作版本ID。

下次用户访问网站时，将发生相同的过程:边缘位置将接收请求，函数将执行并获取最新的构建ID，这次它将指向新的构建ID文件夹，从而允许用户立即看到新版本。

如果您有兴趣了解更多关于CloudFront托管工具包的信息，我正在分享总结我所讨论内容以及如何使用它的文档。请注意，我解释了CLI工作流程，但如果您是高级开发人员并希望在CDK项目中使用CloudFront托管工具包，它也作为L3 CDK构造提供。

如果您有兴趣为该项目做出贡献，请帮助我们维护它并添加功能。我们有很多想法，欢迎志愿者加入。

非常感谢您的关注。如果您有兴趣了解更多类似CloudFront和边缘安全性等主题，我在LinkedIn上发布了很多教育材料，欢迎关注我。

我就此结束，给您提问的机会，如果您对这个项目有任何疑问。

总之，CloudFront托管工具包是由亚马逊云科技创建的一款开源工具，旨在帮助开发人员以简单易用的方式在亚马逊云科技上托管静态前端，同时保留对底层基础设施的完全控制权。它提供CLI体验，可在几分钟内部署所需的基础设施，包括S3存储桶、CloudFront分发和部署管道。该工具包与GitHub集成，实现原子和即时部署，应用最佳实践，并允许使用自定义域名。它利用亚马逊云科技服务(如CodePipeline、CodeBuild、Step Functions以及CloudFront的键值存储和函数)无缝编排部署和托管过程。

下面是一些演讲现场的精彩瞬间：

Ashsha Soup，一位在亚马逊云科技工作了7年的解决方案架构师，在2024年re:Invent大会上的演讲开始时介绍了自己。