如何使用React和AWS Amplify构建无服务器Web应用程序

AWS Amplify是一个客户端库，CLI工具链和UI组件库，使开发人员可以快速创建并连接到云中的强大服务。 在本文中，我们将研究如何使用React和AWS Amplify构建具有身份验证，托管GraphQL数据层，存储，lambda函数和Web托管等功能的完全无服务器的Web应用程序。

Amplify支持托管GraphQL（AWS AppSync），存储（Amazon S3），用户身份验证（Amazon Cognito），无服务器功能（AWS Lambda），托管（Amazon CloudFront和Amazon S3），分析（Amazon Pinpoint）等功能。

库和CLI的目标是让开发人员创建全栈的Web和移动应用程序，而不必担心管理自己的后端基础结构，从而使他们能够利用已经掌握的技能进一步向上移动栈。

在本系列中，我将向您展示如何创建一个新的AWS Amplify项目，使用CLI启用云功能，连接React应用程序以及开始与云服务进行交互。 在这篇文章中，我将向您展示如何实现身份验证，存储和托管。 在下一个教程中，我们将学习如何创建GraphQL和无服务器API并与之交互。

虽然本教程使用React，但Amplify可以与任何JavaScript项目一起使用，并且具有针对Angular，Vue，React Native和Ionic的特定于框架的组件。 CLI还支持本机iOS和Android。

入门

创建一个新的React应用程序

首先，我们首先需要使用create-react-app CLI创建一个新的React应用程序，并切换到新目录：

npx create-react-app amplify-web-app

cd amplify-web-app

接下来，我们将安装AWS Amplify客户端依赖项：

yarn add aws-amplify aws-amplify-react

# or

npm install aws-amplify aws-amplify-react

安装和配置AWS Amplify CLI

接下来，我们需要安装AWS Amplify CLI。

npm install -g @aws-amplify/cli

现在已经安装了AWS Amplify CLI，我们需要对其进行配置，以便能够在我们的AWS账户中创建资源。 为此，我们运行amplify configure命令并设置一个新的AWS用户。

amplify configure

您可以在YouTube上看到有关此配置的简短视频演练 。

现在已经安装并配置了AWS Amplify CLI，从命令行运行amplify命令以查看可用选项，并确保正确安装了CLI。