托管静态网站

在 AWS 上托管简单的营销网站或 Web 应用程序

简介

在本教程中，您将学习如何使用 AWS Amplify 部署静态网站。Amplify 提供基于 Git 的 CI/CD 工作流程，用于构建、部署和托管网站。静态网站可以向网站访客提供 HTML、JavaScript、图像、视频和其他文件。静态网站的成本非常低，具有较高的可靠性，几乎不需要 IT 管理，并且能够扩展，从而能够在无需额外操作的情况下处理企业级流量。

有关更多信息，请参阅常见问题解答 >>

您将学到的内容

在本教程中，您将：

在 AWS 管理控制台中使用 AWS Amplify 托管静态网站。AWS Amplify 可提供完全托管的静态网站和 Web 应用程托管。Amplify 的托管解决方案利用 Amazon CloudFront 和 Amazon S3 通过 AWS 内容分发网络 (CDN) 交付您的站点资产。

设置连续部署：Amplify 提供了基于 Git 的连续部署工作流，允许您在每次提交代码时自动将更新部署到站点。

先决条件

在开始学习本教程之前，您需要：

AWS 账户：如果您还没有账户，请按照设置环境教程进行操作。
您的 AWS 配置文件已配置为本地开发。
您的环境中已安装：Nodejs 和 npm。
熟悉 git 并拥有 Github 账户。

实施

AWS 使用经验

新手

完成时间

10 分钟

所需费用

在 AWS 上托管静态网站的总成本依您的使用情况而定

超出 AWS Free Tier 限制：通常为 1-3 USD/月。
未超出 AWS 免费套餐限制：通常为 0.50 USD/月。

要查看使用的服务及相关费用的明细，请参阅 AWS Amplify 和 Amazon Route 53 定价

先决条件

有管理员级访问权限的 AWS 账户* 注册 AWS。
Git 提供商：您可以使用 AWS CodeCommit（包含在 AWS Free Tier 之中）或 GitHub。

[*] 过去 24 小时内创建的账户可能尚不具有访问此教程所需服务的权限。

获取帮助

Amplify 故障排除

上次更新日期

2024 年 7 月 16 日

创建新的 React 应用程序
已经有一个可以连接的存储库了？ 跳到初始化 GitHub 存储库

想在不连接 Git 提供商的情况下进行部署？ 请按照以下说明进行操作
1.在新的终端窗口或命令行中，运行以下命令以使用 Vite 创建 React 应用程序：

npm create vite@latest staticwebsite -- --template react cd staticwebsite npm install npm run dev
2.在终端窗口中，选择并打开本地链接以查看 Vite + React 应用程序。

npm create vite@latest staticwebsite -- --template react cd staticwebsite npm install npm run dev
初始化 GitHub 代码库
在此步骤中，您将创建一个 GitHub 代码库并将代码提交到该代码库。您需要 GitHub 账户来完成此步骤，如果您没有账户，请在此处注册。

注意：如果您从未在电脑上使用过 GitHub，请按照步骤生成 SSH 密钥并添加到账户，然后再连接到您的账户。

1.通过 https://github.com/ 登录 GitHub。
2.在启动新存储库中，进行以下选择：

在存储库名称中，输入 staticwebsite，并选择公开单选按钮。

然后选择创建新存储库。
3.打开新的终端窗口，导航到您的项目根文件夹（staticwebsite），然后运行以下命令来初始化 git 并将应用程序推送到新的 GitHub 存储库：

注意：将命令中的 SSH GitHub URL 替换为你的 SSH GitHub URL。

git init git add . git commit -m "first commit" git remote add origin git@github.com:<your-username>/staticwebsite.git git branch -M main git push -u origin main
使用 AWS Amplify 部署您的应用程序
在此步骤中，您将把刚刚创建的 GitHub 存储库连接到 AWS Amplify。这将使您能够在 AWS 上构建、部署和托管应用程序。

1.在新的浏览器窗口中登录 AWS 管理控制台，然后通过以下网址打开 AWS Amplify 控制台：https://console.aws.amazon.com/amplify/apps。

2.选择创建新的应用程序。
3.在使用 Amplify 开始构建页面上的部署应用程序中，选择 GitHub，然后选择下一步。

注意：

如果您使用的是现有存储库，请连接您的 GitHub、Bitbucket、GitLab 或 AWS CodeCommit 存储库。

您还可以选择手动上传构建构件，而无需连接 Git 存储库（请参阅手动部署）。

在您授权 Amplify 控制台后，Amplify 会通过存储库提供商获取访问令牌，但不会将令牌存储在 AWS 服务器上。Amplify 仅使用安装在特定存储库中的部署密钥来访问您的存储库。
4. 出现提示时，请使用 GitHub 进行身份验证。您将被自动重定向回 Amplify 控制台。选择您之前创建的存储库和主分支。然后，选择下一步。
5. 保留默认的构建设置并选择下一步。

Amplify 会检查您的存储库，以自动检测要调用的构建命令的顺序。
6.查看所选输入，然后选择保存并部署，将您的 Web 应用程序部署到全球内容分发网络（CDN）。

现在，AWS Amplify 将在 https://...amplifyapp.com 上构建您的源代码并部署您的应用程序，每次 git 推送都会更新您的部署实例。根据应用程序的大小，部署可能需要 2-5 分钟。

7.构建完成后，选择访问已部署的 URL，即可查看您的 Web 应用程序的实时运行情况。
清理资源

建议您删除在本教程中创建的应用程序和后端资源，以免产生额外费用。

1.在 Amplify 控制台中，在 staticwebsite 应用程序的左侧导航栏中，选择应用程序设置，然后选择常规设置。

2.在“常规设置”中，选择删除应用程序。