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 机器人

    (单击可缩放)

    创建 Lex 机器人

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

    创建 Lex 机器人

    (单击可缩放)

    创建 Lex 机器人

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

    创建 Lex 机器人

    (单击可缩放)

    创建 Lex 机器人

    单击创建环境

    创建 Lex 机器人

    (单击可缩放)

    创建 Lex 机器人

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

    创建 Lex 机器人

    (单击可缩放)

    创建 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 中打开文件

    (单击可缩放)

    在 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 服务器上托管您的应用程序。