在本模块中，您将配置 AWS Amplify，以通过内置的持续部署托管 Web 应用程序的静态资源。Amplify Console 提供有基于 Git 的工作流，用于持续部署和托管全栈 Web 应用程序。在后续模块中，您将使用 JavaScript 将动态功能添加到这些页面，以调用通过 AWS Lambda 和 Amazon API Gateway 构建的远程 RESTful API。
本模块的架构非常简单。您的所有静态 Web 内容（包括 HTML、CSS、JavaScript、图像和其他文件）都将由 AWS Amplify Console 托管。然后，您的最终用户将使用 AWS Amplify Console 公开的公共网站 URL 访问您的站点。您无需运行任何 Web 服务器或使用其他服务，您的站点就可以正常使用。
对于大部分实际应用程序，您需要使用自定义域托管您的站点。如果您希望使用自己的域，请按照在 Amplify 上设置自定义域的说明进行操作。
完成模块所需时间：15 分钟
使用的服务：AWS Amplify
请按照下面的分步说明来托管静态网站。单击各个步骤号可展开该部分。
-
步骤 1.选择地区
此 Web 应用程序可以在任何满足以下条件的 AWS 地区内进行部署：支持此应用程序中使用的所有服务，包括 AWS Amplify、AWS CodeCommit、Amazon Cognito、AWS Lambda、Amazon API Gateway 和 Amazon DynamoDB。
您可以参考区域表以了解哪些区域具有支持的服务。可供选择的支持地区如下：
- 美国东部（弗吉尼亚北部）
- 美国东部（俄亥俄）
- 美国西部（俄勒冈）
- 欧洲（法兰克福）
- 欧洲（爱尔兰）
- 欧洲（伦敦）
- 亚太地区（东京）
- 亚太地区（首尔）
- 亚太地区（悉尼）
- 亚太地区（孟买）
在 AWS 管理控制台右上角的下拉列表中选择您的区域。
（单击可放大）
-
步骤 2：创建 Git 存储库
您有两种选择来管理此模块的源代码：AWS CodeCommit（包括在 AWS 免费套餐中）或 GitHub。在本教程中，我们将使用 CodeCommit 来存储应用程序代码，但您可以通过在 GitHub上创建一个存储库来实现相同的效果。
a.打开 AWS CodeCommit 控制台
b.选择创建存储库
c.将存储库名称*选择为“wildrydes-site”
d.选择创建
e.存储库创建完毕之后，请按照以下说明在 IAM 控制台中使用 Git 凭证设置 IAM 用户。
f.返回 CodeCommit 控制台，从“克隆 URL”下拉列表中选择“克隆 HTTPS”
g.从终端窗口中运行 Git 克隆和存储库的 HTTPS URL：
$ git clone https://git-codecommit.us-east1.amazonaws.com/v1/repos/wildrydes-site
克隆至 'wildrydes-site'...
'https://git-codecommit.us-east-1.amazonaws.com' 的用户名：XXXXXXXXXX
'USERID' 的密码：XXXXXXXXXXXX
警告：您似乎克隆的是空存储库。
-
步骤 3：填充 Git 存储库
使用 AWS CodeCommit 或 GitHub.com 创建了 Git 存储库并将其本地克隆之后，您需要复制与此研讨会关联的、可公开访问的现有 S3 存储桶中的网站内容，并将此内容添加到您的存储库中。
a.将目录更改为您的存储库，并复制 S3 中的静态文件：
cd wildrydes-site/
aws s3 cp s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website ./ --recursiveb.将文件提交到 Git 服务
$ git add .
$ git push计数对象：95，已完成。
压缩对象：100% (94/94)，已完成。
写入对象：100% (95/95)，9.44 MiB | 14.87 MiB/s，已完成。
总共 95 (delta 2)，已重复使用 0 (delta 0)
To https://git-codecommit.us-east-1.amazonaws.com/v1/repos/wildrydes-site
* [new branch] master -> master
-
步骤 4：通过 AWS Amplify Console 实现 Web 托管
接下来，您将使用 AWS Amplify Console 来部署您刚提交到 Git 的网站。Amplify Console 负责设置存储静态 Web 应用程序代码位置的工作，并提供多种有用功能来简化该应用程序的生命周期，并且支持最佳实践。
b.单击 Amplify Console 中的“部署”下面的开始使用
c.选择现在使用的存储库服务提供商，然后选择下一步
d.如果您使用的是 GitHub，则需要将 AWS Amplify 授权给您的 GitHub 账户
e.从下拉列表中，选择刚刚创建的存储库和分支
e.在“配置构建设置”页面上，保留所有默认值并选择下一步。
f.在“审核”页面上，选择保存并部署
g.Amplify Console 需要几分钟时间才能创建所需的资源和部署代码。
完成之后，单击站点图像以启动您的 Wild Rydes 站点。
如果单击主站点链接，则您将会看到与分支相关的构建和部署详细信息，以及各个设备上的应用程序的屏幕截图：
-
步骤 5：修改站点
在检测到所连接的存储库发生更改时，AWS Amplify Console 将会重新构建和重新部署应用程序。更改主页以测试此过程。
a.打开 `index.html` 页面并将标题行修改为：<title>Wild Rydes - Rydes of the Future!</title>
b.保存文件并重新提交至您的 Git 存储库。发现存储库更新之后，Amplify Console 将会马上开始重新构建站点。这将会很快发生！ 返回至 Amplify Console 控制台页面以观看此过程。
$ git add index.html $ git commit -m "updated title" [master dfec2e5] updated title 1 file changed, 1 insertion(+), 1 deletion(-) $ git push Counting objects: 3, done. Compressing objects: 100% (3/3), done. Writing objects: 100% (3/3), 315 bytes | 315.00 KiB/s, done. Total 3 (delta 2), reused 0 (delta 0) remote: processing To https://git-codecommit.us-east-1.amazonaws.com/v1/repos/wildrydes-site 2e9f540..dfec2e5 master -> master
c.完成之后，重新打开 Wild Rydes 站点并注意标题更改。
-
回顾
在本模块中，您创建了静态网站，这是 Wild Rydes 业务的基础。AWS Amplify Console 使您能够按照持续集成和交付模型轻松部署静态网站。它具有“构建”更多基于复杂 Javascript 框架应用程序的能力，并且还有诸如功能分支部署、轻松自定义域设置、即时部署和密码保护等功能。
