静态网站托管（使用Amazon）

在 S3 存储桶中托管静态内容Amazon Simple Storage Service (S3) 是一种用于存储和检索objects（S3 术语中称为的任何类型文件）的服务。桶是 S3 中存储对象的容器。我们将文件上传到 S3 存储桶，并在其中存储为 S3 对象。我们会将 build 文件夹下的所有文件上传到 S3 存储桶中，该存储桶是在上一节中构建 react 项目后创建的。创建 S3 存储桶让我们从 AWS 管理控制台创建 S3 存储桶。为了创建 S3 存储桶，我们提供了一个名称并选择us-east将创建存储桶的区域。我们将通过取消选中复选框来允许公共访问存储桶，Block all public access如下所示：这将允许公开访问 S3 存储桶，这将使存储桶中的文件可以通过 Internet 使用公共 URL 访问。然而，这不是一种安全的做法，我们将在后面的部分中讨论。在 S3 存储桶上启用静态 Web 托管属性创建存储桶后，我们将通过修改用于静态 Web 托管的存储桶属性来配置用于托管 Web 资产的存储桶：我们将启用static web hosting存储桶的属性：如下所示：我们还将Index documentand设置Error document为index.html。启用静态 Web 托管后，S3 存储桶的静态 Web 托管属性下的部分将如下所示：我们可以看到一个属性Bucket website endpoint，其中包含在将静态文件复制到 S3 存储桶后用于导航到我们网站的 URL。S3 存储桶端点的类型由于我们将在后续部分中创建 CloudFront 分配时将 S3 存储桶 URL 配置为源，因此了解与 S3 存储桶关联的两种类型的终端节点将很有用：REST API 端点此端点采用以下格式：{bucket-name}.s3-{region}.amazonaws.com. 在我们的示例中，存储桶网站端点 是http://io.myapp.s3-us-east-1.amazonaws.com。Bucket 网站端点的特点是：它们支持 SSL 连接与存储桶网站端点的连接提供端到端加密他们可以使用原始访问身份 (OAI) 来限制对 S3 存储桶内容的访问。源访问身份 (OAI) 是与 CloudFront 分配关联的特殊 CloudFront 用户。这在随后的标题为“保护对内容的访问”的部分中进行了进一步解释。它们支持对 S3 存储桶的私有和公共访问。存储桶网站端点当我们在存储桶上启用静态网站托管时会生成此端点，格式为：{bucket-name}-website.s3.amazonaws.com. 在我们的示例中，存储桶网站端点 http://io.myapp.s3-website-us-east-1.amazonaws.com。Bucket 网站端点的特点是：它们不支持 SSL 连接他们支持重定向请求他们不能使用原始访问身份 (OAI) 来限制对 S3 存储桶内容的访问。它们提供默认索引文档（默认页面）它们仅支持公开可读的内容当我们设置 CloudFront 分配以提供来自公共 S3 存储桶的内容时，我们将在示例中使用存储桶网站端点。附加 S3 存储桶策略我们还需要将存储桶策略附加到我们的 S3 存储桶。以 JSON 编写的存储桶策略提供对存储在存储桶中的对象的访问：此存储桶策略提供对存储在我们存储桶中的所有对象的只读访问权限，由资源 ARN: 表示arn:aws:s3:::io.myapp/*。将静态内容上传到我们的 S3 存储桶完成我们bucket的所有配置后，我们将build本地机器中我们项目文件夹下的所有静态内容上传到我们的S3 bucket。我们可以通过拖放或使用Add files或Add folder从本地机器上传文件和文件夹从 AWS 管理控制台上传文件，如下所示：上传完成后我们可以看到所有文件的上传状态如下图：从 S3 存储桶为网站提供服务上传所有文件后，我们将能够通过导航到存储桶网站端点来查看我们的应用程序：http://io.myapp.s3-website-us-east-1.amazonaws.com.us-east假设我们有客户从全球各地访问该网站，在我们的示例中，他们都将从该地区的同一个 S3 存储桶下载静态内容。这将导致根据客户的位置为客户提供不同的用户体验。us-east与从其他大陆访问该网站的客户相比，靠近该地区的客户将体验到更低的延迟。我们将在下一节借助 Amazon 的 CloudFront 服务来改进这种行为。