开始使用 AWS

构建基本 Web 应用程序

部署 Web 应用程序并添加与 API 和数据库的交互

模块 1:创建 Web 应用程序

在本模块中,您将使用 AWS Amplify 控制台为您的 Web 应用程序部署静态资源。

简介

在本模块中,您将使用 AWS Amplify 控制台为您的 Web 应用程序部署静态资源。在后续模块中,您将使用 AWS Lambda 和 Amazon API Gateway 将动态功能添加到这些页面,以调用远程 RESTful API。(REST 代表是的“表示状态转移”,它是创建 Web 服务的架构模式。API 代表的是应用程序接口。因此,RESTful API 是实施该架构模式的接口。)

您的所有静态 Web 内容(包括 HTML、CSS、JavaScript、图像和其他文件)都将由 AWS Amplify 托管。我们选择 Amplify 服务是因为它可以直接托管和部署静态网站。您的最终用户将使用 Amplify 公开的 URL 访问您的站点。

如果处理如此多的新事物让您感到紧张,请不要担心! 您不会立即使用其他的 AWS 服务,而且您也不需要运行任何 Web 服务器! (“服务器”指的是接受和回应通过网络进行的请求的软件或硬件设备),以使您的网站可用。

该网站只会是一个极简单的“Hello World”页面,我们将在后续模块中添加更多功能。

对于大部分实际应用程序,您需要使用自定义域托管您的站点。“自定义域”是识别网站的唯一品牌名称,例如 www.amazon.com。如果您对此感兴趣,Amplify 也会提供对自定义域的支持。

您将学到的内容

  • 如何创建 Amplify 应用程序
  • 如何将网站的文件直接上传到 Amplify
  • 如何使用 Amplify 部署新版本网页

重要概念

静态网站静态网站拥有固定内容,与动态网站不同。静态网站是最基本的网站类型,最容易创建。只需要创建几个 HTML 页面并将它们发布到 Web 服务器中!

Web 托管提供让您的网站可通过 Internet 查看所需的技术/服务。

AWS 区域 AWS 用于托管其基础设施的单独地理区域。它们分布在世界各地,因此,客户可以选择最接近他们的区域来托管其云基础设施。

 完成时间

5 分钟

 使用的服务

 模块先决条件

实施

  • 使用 Amplify 控制台创建 Web 应用程序
    1. 在您的计算机上打开您喜爱的文本编辑器。创建新文件并将以下 HTML 粘贴到该文件中:
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Hello World</title>
    </head>
    
    <body>
        Hello World
    </body>
    </html>

    2.将文件另存index.html

    3.ZIP 仅(压缩)HTML 文件。

    4.在新浏览器窗口中,登录到 Amplify 控制台。注:我们将在本教程中使用俄勒冈 (us-west-2) 区域。

    5.在 Deploy(部署)下,单击橙色的 Get Started (开始使用)按钮。

    6.选择 Deploy without Git provider(在没有 Git 提供商的情况下部署)。下面是您应该会在屏幕上看到的内容:

    full-stack amplify console module one AmplifyAppSetup

    7.单击橙色的 Continue(继续)按钮。

    8.在 App Name(应用程序名称)中,键入 GettingStarted

    9.对于环境名称,键入 dev

    10.选择 Drag and drop(拖放)方法。下面是您应该会在屏幕上看到的内容:

    full-stack amplify console module one AmplifyManualDeploy

    11.单击 Choose files(选择文件)按钮。

    12.选择您在步骤 3 中创建的 ZIP 文件

    13.单击橙色的 Save and deploy(保存并部署)按钮。

    14.几秒钟后,您应该会看到消息 Deployment successfully completed(部署已成功完成)。

  • 测试您的 Web 应用程序
    1. 单击 Domain(域)下面的链接。
    2. 您的 Web 应用程序将加载到新的浏览器选项卡中并显示“Hello World.” 恭喜!

应用程序架构

下面是我们的架构现在的样子:

full-stack amplify console arch diagram module 1

由于我们只使用 AWS Amplify 控制台,它现在非常小。现在,我们已经有实时 Web 应用程序,用户可以与之交互。接下来,我们将创建 Lambda 函数。

此模块有帮助吗?

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

构建无服务器函数