AWS 静态网站托管初学者指南（第 1 部分）

以下是使用 AWS 简单存储服务 (S3) 搭建静态网站的快速指南。这是我正在撰写的一篇长篇教程的第一部分（详情请见ExamPro研讨会部分）。

在本简短指南的最后，您将建立一个由亚马逊生成的 URL 引用的实时网站。

本教程的一个绝佳应用是将其用作专业的 Web 简历。如果您正在 Web 开发市场求职，这是一个向雇主展示您熟悉 AWS 服务的绝佳方式。如果您对 AWS 感兴趣，可以将本指南用作动手实验，熟悉控制台并建立信心。

创建 S3 存储桶

创建静态网站的首要任务是设置 S3 存储桶。我们可以用它存储文件、图片、录音等等。但在本教程中，我们将用它来存储网站项目文件，然后将它们渲染到浏览器中。

准备好一个静态模板。我选择了以下模板。确保根目录中有一个 index.html 和一个 error.html 文件。在 error.html 文件中添加一些错误消息。

• 导航到 S3 管理控制台
• 点击左上角的服务下拉标签

• 在搜索栏中输入 S3，然后从搜索结果中选择它

• 现在应该打开 S3 控制台页面：

• 继续“创建存储桶”

• 输入存储桶名称。这将用作 AWS 生成的唯一 URL。每个存储桶名称都必须唯一，因为这是与您的网站关联的 URL。

• 在存储桶名称的开头添加“ www. ”并在其末尾添加“ .com”（或任何域名的后缀）。

• 将配置选项留空并点击“下一步”

• 取消选中“管理公共存储桶策略”下的两个选项

• 保留 ACL（访问控制列表）选项的复选标记

• 您的评论页面现在如下所示。点击“创建存储桶”

• 现在，您的域名/存储桶名称将列在您的 S3 存储桶列表下。

启用静态 Web 托管

我们的存储桶已在 S3 控制台中列出。请注意，它尚未设置为公开。我们必须修改存储桶的权限和属性才能实现这一点。

• 单击新创建的存储桶名称（现在应该列在 S3 存储桶下），然后选择“属性”选项卡

• 点击“静态网站托管”选项，该选项目前处于禁用状态，我们需要启用它

• 选择“静态网站托管”后应该会打开一个模式。
  • 勾选“使用此存储桶来托管网站”选项。
  • 然后用“index.html”和“error.html”填写索引和错误输入
  • 保存更改

• 在您的概览属性选项卡中，现在应该显示“静态网站托管”已启用
  • 我们已经正式设置了静态网站托管的存储桶
  • 接下来我们需要设置“权限”以允许读取我们的文件

存储桶策略

• 选择位于属性旁边的“权限”选项卡。
• 然后在权限范围内，选择存储桶策略选项卡。

• 在存储桶策略编辑器中，粘贴以下代码行

  {
    "Version": "2012-10-17",
    "Statement": [
    {
      "Sid": "AllowPublicReadAccess",
      "Effect": "Allow",
      "Principal": "*",
      "Action": [
      "s3:GetObject"
      ],
      "Resource": [
      "arn:aws:s3:::www.silver-stack-solutions.com/*"
      ]
    }
    ]
  }
  

• 将“www.silver-stack-solutions.com”替换为您自己的存储桶名称并“保存”

• 收到一条警告信息很正常：“您已授予存储桶的公共访问权限”。这允许读取我们的 index.html 文件。

• 返回 S3 控制台。你的 AWS S3 控制台现在应该会将你的存储桶列为“公共”

上传内容

• 单击返回您的 S3 存储桶并选择“上传选项”

• 拖放您的项目文件并上传

• 完成后，您的项目文件应该位于您的存储桶中

查看网站

我们已经完成存储桶的设置并授予其权限。现在我们可以从 Web 浏览器访问内容了。

• 导航到您的 S3 存储桶
  • 点击进入你的index.html文件

• 注意这个 URL，它是你的静态网站的端点。点击进去。

• 对象 URL 与您的存储桶名称关联，但会生成为 AWS 资源 URL。我们可以通过导入预购域名或直接从 aws route53 购买域名来更改此设置（此处不做介绍）。

• 如果一切顺利，您应该能够查看新创建的网站。如果遇到任何问题，您将被引导至 error.html 文件。

结论

希望本教程对读者有所帮助。这是我在 dev.to 上的第一篇教程，如果你继续学习，欢迎告诉我你的感受。

如果您喜欢这篇文章，请查看我们的用户体验工程师 Karan 在 ExamPro 上发表的另一篇文章。这也是他的第一篇文章，欢迎分享一些鼓励：

AWS 在 Adob​​e XD 上快速构建架构图

Karan Balaji 🇨🇦 ExamPro ・ 2019 年 5 月 20 日

#aws #教程 #生产力 #webdev

第 2 部分是关于设置你自己的域名

AWS 静态网站托管初学者指南（第 2 部分）：设置域名

ExamPro 的 ash🇨🇦 ・ 2019 年 9 月 16 日

#初学者 #aws #career #webdev