托管静态网站
在 AWS 上托管简单的营销网站或 Web 应用程序
简介
静态网站可以向网站访客提供 HTML、JavaScript、图像、视频和其他文件。静态网站的成本非常低,具有较高的可靠性,几乎不需要 IT 管理,并且能够扩展,从而能够在无需额外操作的情况下处理企业级流量。
您将学到的内容
- 在 AWS 管理控制台中使用 AWS Amplify 托管静态网站。AWS Amplify 可提供完全托管的静态网站和 Web 应用程托管。Amplify 的托管解决方案利用 Amazon CloudFront 和 Amazon S3 通过 AWS 内容分发网络 (CDN) 交付您的站点资产。
- 设置连续部署:Amplify 提供了基于 Git 的连续部署工作流,允许您在每次提交代码时自动将更新部署到站点。
AWS 使用经验
新手
完成时间
10 分钟
所需费用
- 超出 AWS Free Tier 限制:通常为 1-3 USD/月。
- 未超出 AWS 免费套餐限制:通常为 0.50 USD/月。
要查看使用的服务及相关费用的明细,请参阅 AWS Amplify 和 Amazon Route 53 定价
教程先决条件
- 有管理员级访问权限的 AWS 账户* 注册 AWS。
- Git 提供商:您可以使用 AWS CodeCommit(包含在 AWS Free Tier 之中)或 GitHub。
上次更新日期
2022 年 9 月 27 日
实施
-
创建并连接存储库
要学习本教程,您需要创建并初始化一个存储库。最简单的方法就是使用命令 create-react-app。在命令提示符或终端中使用以下命令安装此软件包。
已经有一个可以连接的存储库了? 请直接跳至下面的步骤 c。想在不连接 Git 提供商的情况下进行部署? 请 单击此处开始。npx create-react-app amplifyapp cd amplifyapp npm start
在此步骤中,您将创建一个 GitHub 代码库并将代码提交到该代码库。您将需要一个 GitHub 账户来完成此步骤——如果您没有账户,请在此处注册。
a.为您的应用创建一个新的 GitHub 代码库(链接)
b.初始化 Git 并将应用程序推送到新的 GitHub 代码库,在命令行界面中执行以下命令:
git init git remote add origin git@github.com:username/reponame.git git add . git commit -m “initial commit” git push origin master
c.要连接您的存储库,请登录 Amplify 控制台并在页面顶部选择入门,然后在 Amplify Hosting 下选择入门。
连接您的 GitHub、Bitbucket、GitLab 或 AWS CodeCommit 存储库。您也可以不连接 Git 存储库,手动上传构建项目(请参见手动部署)。在您授权 Amplify 控制台后,Amplify 会通过存储库提供商获取访问令牌,但不会将令牌存储在 AWS 服务器上。Amplify 仅使用安装在特定存储库中的部署密钥来访问您的存储库。
连接存储库服务提供商后,请选择一个存储库,然后选择一个对应的分支来进行构建和部署。
-
确认构建设置
对于所选择的分支,Amplify 会检查您的存储库,以自动检测要执行的构建命令的顺序。确认您的构建设置并单击“下一步”。
-
保存和部署
查看所有设置,以确保所有设置均正确无误。选择保存并部署,将您的 Web 应用程序部署到全球内容分发网络 (CDN)。前端构建通常需要 1-2 分钟的时间,但可能会因应用程序的大小而有所差异。
恭喜!
您已经学完了在 AWS 上托管静态网站教程。