托管静态网站

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

简介

静态网站可以向网站访客提供 HTML、JavaScript、图像、视频和其他文件。静态网站的成本非常低,具有较高的可靠性,几乎不需要 IT 管理,并且能够扩展,从而能够在无需额外操作的情况下处理企业级流量。

参阅常见问题,了解更多信息 >>

您将学到的内容

  • 在 AWS 控制台中使用 AWS Amplify 托管静态网站。AWS Amplify 可提供完全托管的静态网站和 Web 应用程托管。Amplify 的托管解决方案利用 Amazon CloudFront 和 Amazon S3 通过 AWS 内容分发网络 (CDN) 交付您的站点资产。
  • 设置连续部署:Amplify 提供了基于 Git 的连续部署工作流,允许您在每次提交代码时自动将更新部署到站点。

 AWS 使用经验

新手

 完成时间

10 分钟

 所需费用

在 AWS 上托管静态网站的总成本依您的使用情况而定
  • 超出 AWS 免费套餐限制:通常为 1-3 USD/月。
  • 未超出 AWS 免费套餐限制:通常为 0.50 USD/月。

要查看使用的服务及相关费用的明细,请参阅 AWS AmplifyAmazon Route 53 定价

 教程先决条件

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

实施

  • 创建并连接存储库

    要学习本教程,您需要创建并初始化一个存储库。最简单的方法就是使用命令 create-react-app。在命令提示符或终端中使用以下命令安装此软件包。

    已经有一个可以连接的存储库了? 请直接跳至下面的步骤 c。
    想在不连接 Git 提供商的情况下进行部署? 单击这里开始。
    npx create-react-app amplifyapp
    cd amplifyapp
    npm start

    在此步骤中,您将创建一个 GitHub 代码库并将代码提交到该代码库。您将需要一个 GitHub 账户来完成此步骤——如果您没有账户,请在此处注册

    a.为您的应用创建一个新的 GitHub 代码库(链接

    Front End GitHub Repository Module 1

    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 控制台,然后在部署下选择入门

    1-gettingstarted

    连接您的 GitHub、Bitbucket、GitLab 或 AWS CodeCommit 存储库。您也可以不连接 Git 存储库,手动上传构建项目(请参见手动部署)。在您授权 Amplify 控制台后,Amplify 会通过存储库提供商获取访问令牌,但不会将令牌存储在 AWS 服务器上。Amplify 仅使用安装在特定存储库中的部署密钥来访问您的存储库。

    2-connectrepository

    连接存储库服务提供商后,请选择一个存储库,然后选择一个对应的分支来进行构建和部署。

    3-repositorybranch
  • 确认构建设置

    对于所选择的分支,Amplify 会检查您的存储库,以自动检测要执行的构建命令的顺序。确认您的构建设置并单击“下一步”

    next-host
  • 保存和部署

    查看所有设置,以确保所有设置均正确无误。选择保存并部署,将您的 Web 应用程序部署到全球内容分发网络 (CDN)。前端构建通常需要 1-2 分钟的时间,但可能会因应用程序的大小而有所差异。

    8-saveanddeploy

本教程对您是否有帮助?

谢谢
请告知我们您喜欢什么。
关闭
很抱歉让您失望了
是否存在过时、令人困惑或不准确的内容? 请向我们提供反馈,帮助我们改进本教程。
关闭

使用 Amazon S3 托管静态网站

您也可以使用 Amazon S3 来托管静态网站。在 Amazon S3 上托管静态网站可为您的网站带来高性能并具有可扩展性,而成本仅为传统 Web 服务器的一小部分。

要在 Amazon S3 上托管静态网站,请为网站托管配置 Amazon S3 存储桶并上传您的网站内容。使用 AWS 管理控制台,您无需编写任何代码即可将 Amazon S3 存储桶配置为静态网站。您还可以根据网站要求,使用一些可选配置,包括重定向、Web 流量日志记录和自定义错误文档。

有关在 Amazon S3 上托管静态网站的更多信息(包括说明和分步教程),请参阅实施指南

恭喜!

您已在 AWS 上成功构建了静态 Web 应用程序! 接下来请深入研究 AWS Amplify,并了解用于在 AWS 上开发移动和 Web 应用程序的全套工具和服务,这也是非常重要的一步。