AWS 上的项目

构建现代 Web 应用程序

部署 Web 应用程序、连接到数据库和分析用户行为

模块 1:构建静态网站

在本模块中,您将在 Amazon S3 上托管静态网站,并设置基于云的 IDE、AWS Cloud9。 

概览

在本模块中,我们将在 Amazon S3(简单存储服务)上托管 Mythical Mysfit 网站的静态内容(html、js、css、媒体内容等)。S3 是一种具有高持久性、高可用性且成本较低的对象存储服务,可通过 HTTP 直接为存储对象提供服务。这使得它对于将静态 Web 内容直接提供给 Internet 上的网站的 Web 浏览器非常有用。

在 S3 中开始存储我们的 mysfit 之前,让我们先为您设置 AWS Cloud9。Cloud9 是一种基于云的集成开发环境 (IDE),您只需要一个浏览器,即可编写、运行和调试代码。 

架构图

创建静态网站

 完成时间

20 分钟

 试用 Github 上的构建方法

实施说明

  • A:登录 AWS 控制台

    要开始使用,请登录您将在此研讨会中使用的 AWS 账户的 AWS 控制台

    B:选择区域

    此 Web 应用程序可以在任何满足以下条件的 AWS 区域中进行部署:支持此应用程序中使用的所有服务。请参考区域表,了解哪些区域具有支持的服务。支持的区域包括:

    • us-east-1(弗吉尼亚北部)
    • us-east-2(俄亥俄)
    • us-west-2(俄勒冈)
    • eu-west-1(爱尔兰)

    从 AWS 管理控制台右上角的下拉列表中选择一个区域

  • A:创建新的 AWS Cloud9 环境

    在 AWS 控制台主页上,在服务搜索栏中输入 Cloud9 并选择它:

    创建 Lex 机器人

    (单击可缩放)

    单击 Cloud9 主页上的创建环境

    创建 Lex 机器人

    (单击可缩放)

    将您的环境命名为 MythicalMysfitsIDE,并提供所需的任何说明,然后单击下一步

    创建 Lex 机器人

    (单击可缩放)

    将环境设置保留为默认值,然后单击下一步

    创建 Lex 机器人

    (单击可缩放)

    单击创建环境

    创建 Lex 机器人

    (单击可缩放)

    IDE 为您创建完毕后,您将看到如下所示的欢迎屏幕:

    创建 Lex 机器人

    (单击可缩放)

    B:克隆神秘的 Mythical Mysfits 研讨会存储库

    在底板中,您将看到一个终端命令行已打开并准备就绪可使用。在终端中运行以下 git 命令以克隆完成本教程所需的代码:

    git clone -b python https://github.com/aws-samples/aws-modern-application-workshop.git

    克隆存储库后,您将看到您的项目资源管理器现在包含克隆的文件:

    克隆的文件

    (单击可缩放)

    在终端中,将目录更改为新克隆的存储库目录:

    cd aws-modern-application-workshop
  • A:创建 S3 存储桶并进行配置以用于网站托管

    接下来,我们将通过 AWS CLI 在 Amazon S3 中创建托管静态网站所需的基础设施组件。

    首先,您将创建一个 S3 存储桶将以下名称 (mythical-mysfits-bucket-name) 替换为您自己唯一的存储桶名称。 注意:请参阅对存储桶名称的要求复制您选择的名称保存以供以后使用,因为您将在本研讨会期间的其他几个地方使用它:

    aws s3 mb s3://REPLACE_ME_BUCKET_NAME

    现在我们已经创建了一个存储桶,我们需要设置一些配置选项,以便将存储桶用于静态网站托管。此配置允许使用存储桶的已注册公共 DNS 名称请求存储桶中的对象,以及将站点请求定向到选定网站主页的 DNS 名称的基本路径(在大多数情况下为 index.html):

    aws s3 website s3://REPLACE_ME_BUCKET_NAME --index-document index.html
    B:更新 S3 存储桶策略

    默认情况下,在 Amazon S3 中创建的所有存储桶都是完全私有的。要用作公共网站,我们需要创建 S3 存储桶策略,该策略指示存储在此新存储桶中的对象可由任何人公开访问。存储桶策略表示为 JSON 文档,这些文档定义了允许(或不允许)由不同的负责人执行的 S3 操作(S3 API 调用)(在我们的案例中为公开或任何人)。

    必要的存储桶策略的 JSON 文档位于:~/environment/aws-modern-application-workshop/module-1/aws-cli/website-bucket-policy.json。此文件包含一个字符串,需要替换为您选择的存储桶名称(用 REPLACE_ME_BUCKET_NAME 表示)。

    注意:在整个研讨会中,您将以类似方式打开包含需要替换的内容的文件(所有文件都将前缀设为 REPLACE_ME_,以便使用 Windows 上的 CTRL-F 或 Mac 上的 ⌘-F 轻松查找。) 

    要在 Cloud9 中打开文件,请使用左侧面板上的文件资源管理器,然后双击 website-bucket-policy.json:

    在 Cloud9 中打开文件

    (单击可缩放)

    将在“文件编辑器”面板中打开 bucket-policy.json。将显示的字符串替换为之前命令中使用的所选存储桶名称:

    替换存储桶名称

    (单击可缩放)

    执行以下 CLI 命令以将公共存储桶策略添加到您的网站:

    aws s3api put-bucket-policy --bucket REPLACE_ME_BUCKET_NAME --policy file://~/environment/aws-modern-application-workshop/module-1/aws-cli/website-bucket-policy.json
    C:将网站内容发布到 S3

    现在,我们的新网站存储桶已正确配置,让我们将 Mythical Mysfits 主页的首次迭代添加到该存储桶中。使用以下 S3 CLI 命令,该命令模拟 Linux 命令,用于复制文件 (cp) 以从 IDE 本地复制提供的 index.html 页面,直到新的 S3 存储桶(相应地替换存储桶名称)。

     aws s3 cp ~/environment/aws-modern-application-workshop/module-1/web/index.html s3://REPLACE_ME_BUCKET_NAME/index.html 

    现在,打开您最喜爱的 Web 浏览器,然后在地址栏中输入以下 URI 之一。以下 URI 之一在区域名称前包含“.”,而另一个包含“-”。您应使用哪个取决于您使用的区域。

    用于替换 REPLACE_ME_YOUR_REGION 的字符串应与您在其中创建 S3 存储桶的任何区域匹配(例如:us-east-1):

    对于 us-east-1(弗吉尼亚北部)、us-west-2(俄勒冈)、eu-west-1(爱尔兰),请使用:

    http://REPLACE_ME_BUCKET_NAME.s3-website-REPLACE_ME_YOUR_REGION.amazonaws.com

    对于 us-east-2(俄亥俄),请使用:

    http://REPLACE_ME_BUCKET_NAME.s3-website.REPLACE_ME_YOUR_REGION.amazonaws.com
    mysfits-welcome

    恭喜,您已创建了基本静态 Mythical Mysfits 网站!

    模块 1 到此结束。

下一步:在 Web 服务器上托管您的应用程序。