项目展示
介绍 CloudFront 托管工具包 网络与内容交付
介绍 CloudFront 托管工具包 网络与内容交付
云端前端托管工具包介绍
关键要点
发布了云端前端托管工具包CloudFront Hosting Toolkit，提供开源命令行工具，简化前端部署。只需通过 npm 安装工具包，运行两个命令，即可自动创建部署管道和所需基础架构。开发者可以完全控制应用程序的云资源，轻松管理和定制前端应用。支持静态前端、与 GitHub 集成、原子即时部署等功能。今天，我们发布了云端前端托管工具包CloudFront Hosting Toolkit，这是一个开源命令行接口CLI工具，旨在帮助用户在云端快速、安全地部署前端。您只需通过 npm 安装云端前端托管工具包 CLI，运行两个命令，工具包便会自动创建构建、部署和服务您前端应用所需的部署管道和基础架构，并在每次 Git 推送后执行。
与此同时，您可以完全掌控支持您应用程序的云资源，随时修改底层资源，确保极大的灵活性。这使您不必花费时间进行繁琐的设置，可以快速部署、管理并根据您的具体需求定制良好架构的前端，利用现有的 Git 工作流。
前端开发者希望能够快速、轻松地部署安全的 web 应用。如今，开发者在 Amazon Web Services (AWS) 上托管 web 应用的首选方式是使用类似于 AWS Amplify 的托管服务。这让他们能够专注于编写代码，而不是配置托管基础架构和部署管道所需的繁琐复杂设置。尽管开发者们喜欢启动的便利性以及自动部署变更，但有客户告诉我们，他们需要更大的灵活性来控制应用基础架构的各个部分，以便进行额外的定制。例如，某些开发者希望使用 CloudFront Functions 配置内容分发网络CDN，以便使用自定义逻辑丰富内容交付。要实现这种灵活性，客户通常需要从零开始构建托管基础架构和部署管道，以配置存储、加速、缓存、Web 服务和安全性。开发者们表示，他们希望拥有托管前端服务的便利性，同时可以灵活定制应用以满足具体需求。
借助云端前端托管工具包，您可以快速在 AWS 上部署良好架构的前端，同时保持对底层云基础架构的全面控制。云端前端托管工具包自动在您的 AWS 账户中创建所需的基础架构资源，并配置基于 Git 的部署，在几分钟内完成应用部署，无需您具备前期的 AWS 经验。您可以根据具体需求修改现有基础架构的元素，以此定制您的应用，这为您提供了托管服务的便利，同时使您完全控制托管基础架构和部署管道。
云端前端托管工具包的第一个版本支持以下功能：
托管静态前端，例如单页面应用SPAs和基于静态站点生成SSG的应用。与 GitHub 简易集成以实现版本控制。原子性和不可变性的一键式发布。带有友好向导的 CLI，简化设置。在托管基础架构中融入安全性和缓存最佳实践。支持自定义域名。开始使用该工具包
最简单的方法是使用云端前端托管工具包 CLI 从您的 GitHub 仓库部署前端。首先，安装工具包的先决条件Nodejs 18 和 AWS CLI，并配置适当的 AWS 账户和托管 AWS 区域，然后全局安装工具包：
bashnpm install g @aws/cloudfronthostingtoolkit
接下来，导航到您的前端 GitHub 仓库克隆的本地文件夹，并初始化部署配置：
bashcd /path/to/your/repocloudfronthostingtoolkit init
CLI 将自动检测您前端项目的属性，如使用的Web框架React、Nextjs、Vuejs、AngularJS等，并指导您完成初始化步骤。在其中一步，您需要在 AWS 控制台中建立与 GitHub 仓库的 连接，这将作为部署管道的基础，每次向您的仓库推送时自动触发新的部署。当在初始化阶段设置好托管参数后，您只需在几分钟内完成网站托管的部署。
bashcloudfronthostingtoolkit deploy
成功部署后，CLI 将提供一个网站端点，展示您的应用托管的位置，除非您设置了自己的域名。每当您在 GitHub 上对前端代码进行更改时，工具包将自动生成新构建并进行部署。在几分钟内，新版本将发布，无需您进行额外的操作。
后台架构
以下架构展示了托管基础架构中部署的主要组件：
图 1：CloudFront托管工具包架构
前端存储在 Amazon Simple Storage Service (Amazon S3) 存储桶中，通过配置遵循性能和安全最佳实践的 Amazon CloudFront 分发进行服务。前端部署管道由 AWS CodePipeline 管理，它将前端构件上传到 S3 存储桶，并指示 CloudFront 提供最新版本。以下序列图解释事件流：
图 2：CloudFront托管工具包 事件流
用户请求 web 应用的 about 页面。当 CloudFront 接收到 HTTP 请求时，执行 CloudFront 函数以添加所需的文件扩展名例如 html，并将请求映射到与最新前端版本关联的 Amazon S3 中的文件例如 /1sd424Po/abouthtml。该函数从 CloudFront KeyValueStore 中读取版本值。如果缓存未命中，则从 Amazon S3 提取文件。否则，它将从 CloudFront 缓存中提供。默认情况下，CloudFront 的缓存持续一年，并向浏览器发送头以缓存 60 秒。HTTP 响应中添加了安全性头信息，且存储桶仅通过来源访问控制功能对 CloudFront 可访问。此时，前端开发者向相应的 GitHub 仓库推送新的代码更改。或者，可以将 zip 文件上传到 S3 存储桶中以执行基于 S3 的工作流。这会自动触发 AWS CodePipeline 中的工作流。在管道的 Build 步骤中，执行与 CLI 初始化步骤中检测到的 Web 框架相应的任务，例如编译代码和创建部署构件。输出的部署构件随后上传到托管 S3 存储桶中，位于由提交 ID 识别的新文件夹下例如，94EdAd09。在管道的 Deploy 步骤中，AWS Step Functions 工作流协调更新 CloudFront KeyValueStore，指导 CloudFront 函数将请求映射到新创建文件夹中的文件。最后，当另一位用户请求 about 页面时，CloudFront 接收到请求，且同样执行 CloudFront 函数。不过，此时该函数将请求映射到 Amazon S3 中的文件例如，/94EdAd09/abouthtml，并跳过前一个前端版本的缓存文件，因为它将提交 ID 添加到缓存键中。云端前端托管工具包适应您的特定需求，无论您是寻求通过 CLI 简单部署流程的开发者，还是希望定制 AWS Cloud Development Kit (AWS CDK) 代码的基础设施专员，亦或寻求无缝集成到 AWS 基础设施项目中的 CDK L3 结构的项目经理。有关高级使用场景和深入配置的信息，请参阅 CloudFront托管工具包 README 页面。
结论
一些开发者希望能够快速、便捷且高效地将前端部署到云端，同时控制前端在线服务的方式。云端前端托管工具包在开发者所喜爱的灵活性与AWS专家构建的托管体验的优势之间达到了平衡。尝试使用该 CLI，并在项目的 GitHub 页面 上分享您的反馈，给项目加星，报告问题或提出功能请求。如果您有兴趣帮助我们改进该工具，请查看我们的 贡献指南。云端前端托管工具包根据 Apache20 许可证进行许可。
要了解更多有关如何加速和保护您的网站和 API 的信息，请参阅 AWS 开发中心的 应用程序安全性和性能 部分。
团队介绍
轻蜂加速器pcCorneliu CroitoruCorneliu 是一名开发者，专注于无服务器、媒体流和边缘服务，属于 EMEA 原型团队，位于巴黎。他与客户共同构建 AWS 最令人兴奋和创新的原型。工作之外，Corneliu 热爱街头摄影。
Achraf SoukAchraf Souk 领导 EMEA 的边缘专业解决方案架构师团队。该团队帮助公司和开发者使用 AWS 边缘服务来保护和加速他们的 Web 应用。
Cristian GrazianoCristian Graziano 是亚马逊 CloudFront 的高级产品经理，总部位于西雅图。他在产品、工程和用户体验方面合作，以帮助首次和经验丰富的 AWS 客户快速入门、配置和管理 Amazon CloudFront 及相关 AWS 服务。
轻蜂加速器官方网站提供流畅的全球连线体验，一键极速连接，无惧地域限制。享受无缝互联，提升上网速度，为你带来卓越的网络体验。
加入轻蜂加速器pc
-
- 地址
- 芜湖市闪欲峡谷14号
-
- 电话
-
- 工作时间
- 周一至周五：上午 10 点至晚上 8 点