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

Serverless_Web_App_LP_assets-02

本模块的架构非常简单。您的所有静态 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 模板
美国东部 (弗吉尼亚北部) 启动堆栈 >
美国东部 (俄亥俄) 启动堆栈 >
美国西部 (俄勒冈) 启动堆栈 >
欧洲 (法兰克福) 启动堆栈 >
欧洲 (爱尔兰) 启动堆栈 >
欧洲 (伦敦) 启动堆栈 >
亚太地区 (东京) 启动堆栈 >
亚太地区 (首尔) 启动堆栈 >
亚太地区 (悉尼) 启动堆栈 >
亚太地区 (孟买) 启动堆栈 >
Serverless_Web_App_LP_assets-17

CloudFormation 启动说明

  1. 根据您选择的地区,单击上面对应的启动堆栈链接。

  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 堆栈,单击 Outputs 选项卡并单击 WebsiteURL 链接。

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


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

  • 第 1 步:选择地区


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

    您可以参考地区表,查看哪些地区支持这些服务。可供选择的支持地区如下:

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

     

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

    region

    (单击可放大)

    region
  • 第 2 步:创建 S3 存储桶

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

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


    1. 在 AWS 管理控制台中,选择服务,然后选择“存储”下的 S3
    2. 选择 +创建存储桶
    3. 为您的存储桶提供一个全局唯一名称,例如 wildrydes-firstname-lastname。如果收到错误消息,提示您的存储桶名称已经存在,请尝试添加其他数字或字符,直到找到未经使用的名称。
    4. 从下拉列表中选择您选定用于此研讨会的地区。
    5. 请选择对话框左下角的创建,而不是选择一个存储桶并从中复制设置。
  • 第 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,可以用它将必要的 Web 资源文件从 s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website 复制到您的存储桶中。

    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. 选择权限选项卡,然后选择存储桶策略
    3. 在存储桶策略编辑器中输入以下策略文档,将 [YOUR_BUCKET_NAME] 替换为您在第 1 部分中创建的存储桶的名称:
    {
        "Version": "2012-10-17",
        "Statement": [
            {
                "Effect": "Allow", 
                "Principal": "*", 
                "Action": "s3:GetObject", 
                "Resource": "arn:aws:s3:::[YOUR_BUCKET_NAME]/*" 
            } 
        ] 
    }
    
    1. 选择保存以应用新策略。
  • 第 5 步:启用网站托管

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

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

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


    1. 在 S3 控制台的存储桶详细信息页面中,选择属性选项卡。
    2. 选择静态网站托管卡片。
    3. 选择使用此存储桶托管网站,然后为索引文档输入 index.html。将其他字段保留为空。
    4. 选择保存之前,请注意对话框顶部的终端节点 URL。您将在整个研讨会的其余部分使用此 URL 来查看您的 Web 应用程序。从此处开始,此 URL 将被称为您网站的基准 URL。
    5. 单击保存以保存您的更改。
  • 第 6 步:验证您的实施

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

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

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

    wildrydes-homepage