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

教程

开始使用 AWS

构建基本 Web 应用程序

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

介绍:构建基本 Web 应用程序

按照分步说明构建您的首个 Web 应用程序

概览

在本教程中,您将学习使用 AWS Amplify 创建简单的全栈 Web 应用程序。在本教程中,您将在 AWS 上构建和托管 React 应用程序,使用 Amplify 添加身份验证、数据和无服务器函数,以捕获已注册用户的电子邮件并将其保存在数据库中。 然后,您将为应用程序实施与云资源集成的前端。 

您将学到的内容

在本教程中,您将:

  • 托管:在 AWS 全球内容分发网络(CDN)上构建和部署 React 应用程序。
  • 身份验证:为应用程序添加身份验证以启用登录和注销功能。
  • 数据库:集成实时 API、数据库和无服务器函数。
  • 函数:实施一个 Lambda 函数,当用户注册应用程序时触发该函数。

先决条件

在开始学习本教程之前,您需要:

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

 AWS 使用经验

新手

 最短完成时间

35 分钟

 所需费用

免费套餐资格

 需要

  • 有管理员级访问权限的 AWS 账户*
  • Nodejs npm

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

 上次更新日期

2024 年 7 月 12 日

应用程序架构

下图直观地展示了本教程中使用的服务以及它们的连接方式。此应用程序使用 AWS Amplify、GraphQL API、AWS Lambda 和 Amazon DynamoDB。

在学习本教程的过程中,您将详细了解这些服务,并找到能帮助您快速掌握这些服务的资源。

显示本教程中如何使用 AWS 服务的架构图。

模块

本教程分为六个模块。您必须按照顺序完成一个模块才能进入下一个。

  1. 创建 Web 应用程序(5 分钟):使用 AWS Amplify 控制台为您的 Web 应用程序部署静态资源。
  2. 构建无服务器函数(5 分钟):使用 AWS Lambda 构建无服务器函数。
  3. 创建数据表(10 分钟):将数据保留在 Amazon DynamoDB 表中。
  4. 将无服务器函数与 Web 应用程序链接(5 分钟):使用 API Gateway 部署无服务器函数。
  5. 添加交互到 Web 应用程序(5 分钟):修改您的 Web 应用程序以调用 API。
  6. 清理资源(5 分钟):清理本教程中使用的资源。

我们将使用可从浏览器直接访问的 AWS 管理控制台构建此 Web 应用程序。

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

创建 Web 应用程序