构建一个基本的 Web 应用程序

教程

模块 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 分钟

 使用的服务

 模块先决条件

 上次更新日期

2023 年 4 月 4 日

实施

    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.在入门部分的托管 Web 应用程序下,选择橙色的入门按钮。

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

    7.选择继续按钮。

    8.在应用程序名称字段中,输入 GettingStarted

    9.在环境名称中,输入 dev

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

    11.选择选择文件按钮。

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

    13.选择保存并部署按钮。

    14.几秒钟后,您应该会看到消息部署已成功完成

  • 1.在左侧导航菜单中选择域管理

    2.将表单中显示的 URL 复制并粘贴到浏览器中。

    您的 Web 应用程序将加载到新的浏览器选项卡中并显示“Hello World.” 恭喜!

应用程序架构

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

架构图显示托管在 AWS Cloud 中,并与外部用户建立连接的 AWS Amplify。

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

此页内容对您是否有帮助?

构建无服务器函数