将基于 React 的单页应用程序部署到 Amazon S3 CloudFront - AWS Prescriptive Guidance
Summary先决条件和限制架构工具最佳实践操作说明相关资源其他信息

本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。

将基于 React 的单页应用程序部署到 Amazon S3 CloudFront

由让-巴蒂斯特·吉卢瓦创作 () AWS

代码存储库：基于 React 的单页应用程序 CORS

环境：生产

技术：Web 和移动应用程序；无服务器

工作负载：所有其他工作负载

AWS服务：Amazon API Gateway；亚马逊 CloudFront

Summary

单页应用程序 (SPA) 是使用 JavaScript APIs动态更新所显示网页内容的网站或 Web 应用程序。这种方法增强了网站的用户体验和性能，因为它仅更新新数据，而不是从服务器重新加载整个网页。

这种模式提供了 step-by-step一种在亚马逊简单存储服务 (Amazon S3) Simple Service 和亚马逊上用 React 编写的编码和托管的方法。SPA CloudFront此模式SPA中的使用在 Amazon Gate API way 中配置并通过亚马逊 CloudFront 分配公开的，以简化跨源资源共享 (CORS) 管理。REST API

先决条件和限制

先决条件

  • 活跃 AWS 账户的.

  • Node.js 和 npm，已安装并配置。有关更多信息，请参阅 Node.js 文档的下载部分。

  • Yarn，已安装和配置。有关更多信息，请参阅 Yarn 文档。

  • Git，已安装和配置。有关更多信息，请参阅 Git 文档。

架构

用于将基于 React 的部署SPA到 Amazon S3 的架构以及 CloudFront

此架构是使用 AWS CloudFormation （基础架构即代码）自动部署的。它使用诸如 Amazon S3 之类的区域服务来存储静态资产，使用 Amazon with Ama CloudFront zon API Gateway 来公开区域 API (REST) 终端节点。应用程序日志是使用 Amazon 收集的 CloudWatch。所有 AWS API呼叫都经过审计 AWS CloudTrail。所有安全配置（例如身份和权限）均在 AWS Identity and Access Management (IAM) 中管理。静态内容通过亚马逊 CloudFront 内容分发网络 (CDN) 传送，DNS查询由亚马逊 Route 53 处理。

工具

AWS服务

  • Amazon API Gateway 可帮助您以任何规模创建、发布RESTHTTP、维护、监控和 WebSocket APIs保护。

  • AWS CloudFormation帮助您设置 AWS 资源，快速一致地配置资源，并在资源的整个生命周期中跨地区对其 AWS 账户 进行管理。

  • Amazon 通过全球数据中心网络交付您的网页内容，从而降低延迟并提高性能，从而 CloudFront加快网络内容的分发。

  • AWS CloudTrail帮助您审计您的治理、合规和运营风险 AWS 账户。

  • Amazon CloudWatch 可帮助您实时监控您的 AWS 资源和运行的应用程序 AWS 的指标。

  • AWS Identity and Access Management (IAM) 通过控制谁经过身份验证并有权使用 AWS 资源，从而帮助您安全地管理对资源的访问权限。

  • Amazon Route 53 是一项高度可用且可扩展的DNS网络服务。

  • Amazon Simple Storage Service (Amazon S3) 是一项基于云的对象存储服务，可帮助您存储、保护和检索任意数量的数据。

代码

此模式的示例应用程序代码可在 GitHub 基于 React 的CORS单页应用程序存储库中找到。

最佳实践

通过使用 Amazon S3 对象存储，您可以以安全、高弹性、高性能且经济实惠的方式存储应用程序的静态资产。此任务无需使用专用容器或亚马逊弹性计算云 (AmazonEC2) 实例。

通过使用 Amazon CloudFront 内容分发网络，您可以减少用户在访问您的应用程序时可能遇到的延迟。您还可以连接 Web 应用程序防火墙 (AWS WAF)，以保护您的资产免受恶意攻击。

操作说明

任务描述所需技能

克隆存储库。

运行以下命令以克隆示例应用程序的存储库：

git clone https://github.com/aws-samples/react-cors-spa react-cors-spa && cd react-cors-spa
应用程序开发者，AWS DevOps

本地部署应用程序。

  1. 在项目目录中，运行 npm install 命令，以启动应用程序依赖项。 

  2. 运行 yarn dev 命令在本地启动应用程序。 

应用程序开发者，AWS DevOps

在本地访问应用程序。

打开浏览器窗口并输入，http://localhost:3000URL即可访问该应用程序。

应用程序开发者，AWS DevOps
任务描述所需技能

部署 AWS CloudFormation 模板。

  1. 登录 AWS Management Console，然后打开AWS CloudFormation 控制台。

  2. 选择 Create stack（创建堆栈），然后选择 With new resources (standard)（使用新资源（标准））。

  3. 选择上传模板文件。

  4. 选择选择文件，从克隆的存储库中选择 react-cors-spa-stack.yaml 文件，然后选择下一步。

  5. 输入您堆栈的名称，然后选择下一步。

  6. 保留所有默认选项，然后选择下一步。

  7. 检查堆栈的最终设置，然后选择创建堆栈。

应用程序开发者，AWS DevOps

自定义应用程序源文件。

  1. 部署堆栈后，打开输出选项卡并确定Bucket名称和APIDomain值。

  2. 复制的 CloudFront 分发域RESTAPI。

  3. 导航到index.tsx文件第 13 行的变量值<project_root>/src/pages/index.tsx，然后将此域插入或粘贴到APIEndPoint变量值中。

应用程序开发人员

构建应用程序包。

在项目目录中，运行 yarn build 命令以生成应用程序包。

应用程序开发人员

部署应用程序包。

  1. 打开 Amazon S3 控制台。

  2. 识别并选择之前由 CloudFormation 堆栈创建的 S3 存储桶。

  3. 选择上传，然后选择添加文件。

  4. 选择您的out文件夹的内容。

  5. 选择 “添加文件夹”，然后选择_next目录。

    重要：选择_next目录，而不是内容。

  6. 选择上传，将文件和目录上传至您的 S3 存储桶。

应用程序开发者，AWS DevOps
任务描述所需技能

访问和测试应用程序。

打开浏览器窗口，然后粘贴 CloudFront 分发域（您之前部署的 CloudFormation 堆栈的SPADomain输出）以访问该应用程序。

应用程序开发者，AWS DevOps
任务描述所需技能

删除 S3 存储桶内容。

  1. 打开 Amazon S3 控制台，选择之前由堆栈创建的存储桶（第一个名称以开头的存储桶react-cors-spa-）。 

  2. 选择清空 可删除存储桶中的内容。

  3. 选择之前由堆栈创建的第二个存储桶（名称以开头react-cors-spa-和结尾的第二个存储桶-logs）。

  4. 选择清空可删除存储桶中的内容。

AWS DevOps，应用程序开发者

删除 AWS CloudFormation 堆栈。

  1. 打开AWS CloudFormation 控制台并选择您之前创建的堆栈。

  2. 选择删除删除堆栈和所有相关资源。

AWS DevOps，应用程序开发者

相关资源

要部署和托管您的 Web 应用程序，您还可以使用 H AWS Amplify osting，它提供了基于 Git 的工作流程，用于托管持续部署的全栈无服务器 Web 应用程序。Amplify Hosting是其中的一员 AWS Amplify，它提供了一组专门构建的工具和功能，使前端网络和移动开发人员能够快速轻松地在其上构建全栈应用程序。 AWS

其他信息

为了处理用户提出的可能生成 403 错误的无效URLs请求，在 CloudFront 发行版中配置的自定义错误页面会捕获 403 错误并将其重定向到应用程序入口点 ()。index.html

为了简化对的管理 CORS RESTAPI，通过 CloudFront 发行版公开。