AWS 上的项目：

构建无服务器 Web 应用程序

（利用 AWS Lambda、Amazon API Gateway、Amazon S3、Amazon DynamoDB 和 Amazon Cognito）

简介

托管静态网站

管理用户

构建无服务器后端

部署 RESTful API

终止资源

模块 1.静态 Web 托管

在本模块中，您将配置 Amazon Simple Storage Service (S3) 以托管 Web 应用程序的静态资源。在后续模块中，您将使用 JavaScript 将动态功能添加到这些页面，以调用通过 AWS Lambda 和 Amazon API Gateway 构建的远程 RESTful API。

架构概览

本模块的架构非常简单。您的所有静态 Web 内容 (包括 HTML、CSS、JavaScript、图像和其他文件) 都将存储在 Amazon S3 中。然后，您的最终用户将使用 Amazon S3 公开的公共网站 URL 访问您的站点。您无需运行任何 Web 服务器或使用其他服务，您的网站就可以正常使用。

为了实现本模块的目的，您将使用我们提供的 Amazon S3 网站终端节点 URL。它采用 http://{your-bucket-name}.s3-website.{region}.amazonaws.com 的形式。​对于大部分实际应用程序，您需要使用自定义域托管您的站点。如果您希望使用自己的域，请按照 Amazon S3 文档中介绍的如何使用自定义域来设置静态网站的相关说明进行操作。

完成模块所需时间：30 分钟

使用的服务：Amazon S3

CloudFormation 模板：如果您已经习惯使用 Amazon S3，或者只想跳过去，直接使用 Lambda 和 API Gateway，则可以在您选择的区域内启动这些 AWS CloudFormation 模板之一以自动构建必要的资源。

区域 CloudFormation 模板
美国东部（弗吉尼亚北部） 启动堆栈 >
美国东部（俄亥俄） 启动堆栈 >
美国西部（俄勒冈） 启动堆栈 >
欧洲（法兰克福） 启动堆栈 >
欧洲（爱尔兰） 启动堆栈 >
欧洲（伦敦） 启动堆栈 >
亚太地区（东京） 启动堆栈 >
亚太地区（首尔） 启动堆栈 >
亚太地区（悉尼） 启动堆栈 >
亚太地区（孟买） 启动堆栈 >

CloudFormation 启动说明

  1. 根据您选择的区域，单击上面对应的 Launch Stack (启动堆栈) 链接。

  2. 单击“Select Template (选择模板)”页面上的 Next (下一步)​。

  3. 为 Website Bucket Name (网站存储桶名称) 提供一个全局唯一名称（如 wildrydes-yourname），然后单击 Next (下一步)。

  4. 在“Options (选项)”页面上，保留所有默认设置并单击 Next (下一步)。

  5. 在“Review (查看)”页面上，选中此复选框以确认 CloudFormation 将创建 IAM 资源，然后单击 Create (创建)。

    此模板使用自定义资源将静态网站资产从中央 S3 存储桶复制到您自己专用的存储桶中。为了让自定义资源将新存储桶写入您的账户，它必须创建可以承担这些权限的 IAM 角色。

  6. 等待 wildrydes-webapp-1 堆栈达到 CREATE_COMPLETE 状态。

  7. 在选择 wildrydes-webapp-1 堆栈后，单击 WebsiteURL 链接上的 Outputs (输出) 选项卡。

  8. 验证 Wild Rydes 主页是否正确加载，然后进入下一模块“用户管理”。

实施说明

请按照下面的分步说明来托管静态网站。单击各个步骤号可展开该部分。

  • 步骤 1.选择地区

    选择地区

    此 Web 应用程序可以在任何满足以下条件的 AWS 地区内进行部署：支持此应用程序中使用的所有服务，包括 Amazon Cognito、AWS Lambda、Amazon API Gateway、Amazon S3 和 Amazon DynamoDB。

    您可以参考区域表以了解哪些区域具有支持的服务。可供选择的支持地区如下：

    • 美国东部（弗吉尼亚北部）
    • 美国东部（俄亥俄）
    • 美国西部（俄勒冈）
    • 欧洲（法兰克福）
    • 欧洲（爱尔兰）
    • 欧洲（伦敦）
    • 亚太地区（东京）
    • 亚太地区（首尔）
    • 亚太地区（悉尼）
    • 亚太地区（孟买）

     

    在 AWS 管理控制台右上角的下拉列表中选择您的区域

    （单击可放大）

  • 步骤 2.创建 S3 存储桶

    创建 S3 存储桶

    Amazon S3 可用于托管静态网站，而无需配置或管理任何 Web 服务器。在这个步骤中，您将为 Web 应用程序创建一个新的 S3 存储桶，用于托管所有静态资产 (如 HTML、CSS、JavaScript 和图像文件)。 

    在这个步骤中，您将使用控制台或 AWS CLI 来创建 Amazon S3 存储桶。请记住，您的存储桶名称必须是全局唯一的。建议使用 wildrydes-firstname-lastname 之类的名称。 如果收到提示您的存储桶名称已存在的错误消息，请尝试添加其他数字或字符，直到找到未使用过的名称。

    1. 在 AWS 管理控制台中，选择 Services (服务)，然后选择“Storage (存储)”下的 S3。
    2. 选择 +Create Bucket (+创建存储桶)。
    3. 为您的存储桶提供一个全局唯一名称（如 wildrydes-firstname-lastname）。 如果收到提示您的存储桶名称已存在的错误消息，请尝试添加其他数字或字符，直到找到未使用过的名称。
    4. 从下拉列表中选择您选定用于此研讨会的地区。
    5. 选择对话框左下角的 Create (创建)，而不是选择一个存储桶并从中复制设置。

  • 步骤 3.上传内容

    上传内容

    在这个步骤中，您将把本模块的网站资产上传到您的 S3 存储桶中。您可以使用 AWS 管理控制台 (需要使用 Google Chrome 浏览器)、AWS CLI 或提供的 CloudFormation 模板来完成此步骤。如果您已经在本地计算机上安装并配置了 AWS CLI，我们建议您使用此方法。如果您安装了最新版的 Google Chrome，请使用控制台。 

    控制台分步说明

    为了通过 AWS 管理控制台上传本地目录中的所有文件和子目录，您必须使用最新版的 Chrome Web 浏览器。如果您无法使用 Chrome，请按照使用 AWS CLI 或提供的 CloudFormation 模板的说明进行操作。

    1. 使用此链接下载此存储库的存档。

    2. 在本地计算机上解压缩您下载的存档。

    3. 在 Chrome 中打开 AWS 管理控制台。选择服务，然后选择“存储”下的 S3。

    4. 选择您在上一步创建的存储桶，并确保您正在浏览的是 概述 选项卡。

    5. 打开 Windows 文件资源管理器或 macOS Finder，找到第一步中下载的 Zip 文件的展开内容。

    6. 转到本地计算机上的 WebApplication/1_StaticWebHosting/website 目录。

    7. 选中网站目录下的所有文件和子目录。不要选中网站目录本身。

    8. 将所选文件从本地文件系统拖放到 S3 控制台中 概述 选项卡下的内容中。

    9. 在出现的对话框的左下方选择 上传。

    10. 等待上传完成，并确保您看到 S3 控制台中列出了网站目录中的内容。如果您仅看到单个 website 目录，应该将其从您的存储桶中删除，并再次按照说明操作，确保您在拖放到 S3 控制台中之前仅选择了该目录的内容。

    CLI 分步说明

    如果您已安装和配置 CLI，则可以使用它将 s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website 中的必要的 Web 资产复制到存储桶。

    1. 通过执行以下命令，您可确保将 YOUR_BUCKET_NAME 替换为您在上一节中使用的名称，并将 YOUR_BUCKET_REGION 替换为在其中创建存储桶的区域的代码（例如 us-east-2）。

      aws s3 sync s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website s3://YOUR_BUCKET_NAME --region YOUR_BUCKET_REGION

    2. 如果命令运行成功，您应该能看到已复制到存储桶中的对象列表。

     

    CloudFormation 分步说明

    如果您无法使用上述任何一种方法，则可以启动提供的 CloudFormation 模板，将必要资产复制到 S3 存储桶中。通过选择一个区域并单击本模块的 CloudFormation 模板部分中的启动堆栈链接来启动 CloudFormation 模板。

  • 步骤 4.添加存储桶策略以允许公共读取

    添加存储桶策略以允许公共读取

    您可以通过存储桶策略来定义谁可以访问 S3 存储桶中的内容。存储桶策略是 JSON 文档，用于指定哪些委托人可以针对存储桶中的对象执行各种操作。

    在这个步骤中，您将把存储桶策略添加到一个新的 Amazon S3 存储桶中，以便让匿名用户查看您的站点。默认情况下，只有经过身份验证、能够访问您的 AWS 账户的用户才能访问您的存储桶。

    请参阅用于向匿名用户授予只读访问权限的策略的本示例。此示例策略允许 Internet 上的任何人查看您的内容。更新存储桶策略的最简单方法是使用控制台。选择存储桶，选择“权限”选项卡，然后选择“存储桶策略”。

    1. 在 S3 控制台中，选择您在第 1 部分中创建的存储桶名称。
    2. 选择 权限 选项卡，然后选择 存储桶策略。
      1. 在 S3 控制台中，选择您在第 1 部分中创建的存储桶名称。
      2. 选择 权限选项卡，然后确保选择公有访问设置。
      3. 点击 编辑并取消选中：
        • "阻止新的公有存储桶策略"
        • "在存储桶有公有策略时阻止公有和跨账户访问"
      4. 点击 保存。
      5. 在显示的确认模型中，键入 'confirm'，然后点击确认。 
      6. 在仍处于 权限 选项卡时，选择 存储桶策略。  
    3. 通过将以下策略文档输入到存储桶策略编辑器，可将 [YOUR_BUCKET_NAME] 替换为您在步骤 1 中创建的存储桶的名称：
    {
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow", 
            "Principal": "*", 
            "Action": "s3:GetObject", 
            "Resource": "arn:aws:s3:::[YOUR_BUCKET_NAME]/*" 
        } 
    ] 
}
    1. 选择 Save (保存) 以应用新策略。

  • 步骤 5.启用网站托管

    启用网站托管

    默认情况下，可通过结构为 http://.amazonaws.com// 的 URL 访问 S3 存储桶中的对象。为了能为根 URL (如 /index.html) 下的资产提供服务，您需要在存储桶中启用网站托管。这样一来，就可在存储桶特定于某个 AWS 地区的网站终端节点 (.s3-website-.amazonaws.com) 访问您的对象。

    您还可以在网站中使用自定义域。例如，http://www.wildrydes.com 在 S3 上托管。本次研讨会不介绍如何设置自定义域，但您可以在我们的文档中找到详细的说明。

    在这个步骤中，您将使用控制台来启用静态网站托管。您可以在选定存储桶之后，通过“属性”选项卡执行此操作。将 index.html 设置为索引文档，并将错误文档保留为空。有关详细信息，请参阅有关为静态网站托管配置存储桶的文档。

    1. 在 S3 控制台的存储桶详细信息页面中，选择 Properties (属性) 选项卡。
    2. 选择 Static website hosting (静态网站托管) 卡片。
    3. 选择 Use this bucket to host a website (使用此存储桶托管网站) 并为索引文档输入 index.html。​将其他字段保留为空。
    4. 选择 Save (保存) 之前，请注意对话框顶部的 Endpoint (终端节点) URL。您将在整个研讨会的其余部分使用此 URL 来查看您的 Web 应用程序。从此处开始，此 URL 将被称为您网站的基准 URL。
    5. 单击 Save (保存) 以保存您的更改。

  • 步骤 6.验证您的实施

    验证您的实施

    完成这些实施步骤后，您应该能够通过访问 S3 存储桶的网站终端节点 URL 来访问静态网站。

    在您选择的浏览器中访问网站的基准 URL (即在上一节中注明的 URL)。您应该能看到 Wild Rydes 主页。如果您需要查找基准 URL，请访问 S3 控制台，选择您的存储桶并单击 Properties (属性) 选项卡上的 Static Web Hosting (静态 Web 托管)。

    如果页面显示正确 (参见以下屏幕截图示例)，就可以转到下一模块“用户管理”。

下一步：管理用户