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

aws Amplify是一个客户端库、CLI 工具链和 UI 组件库，允许开发人员快速创建并连接到云中的强大服务。在这篇文章中，我们将了解如何使用 react 和 AWS Amplify 构建完全无服务器的 Web 应用程序，这些应用程序具有身份验证、托管graphql数据层、存储、lambda 函数和 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。

入门

创建一个新的反应应用程序

首先，我们首先需要使用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 # 或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 已正确安装。

amplify

初始化新的 AWS Amplify 项目

要初始化一个新的 AWS Amplify 项目，我们将运行以下amplify init命令：

amplify init

出现提示时，选择您喜欢的文本编辑器并坚持所有其他选项的默认值。

现在已经在本地初始化了一个新的 AWS Amplify 项目，我们现在将看到在我们的 React 项目的根目录中创建了一个amplify目录和 文件。.amplifyrc这些文件包含有关我们 Amplify 项目的配置信息，我们现在根本不需要接触它们。

实施身份验证

我们将启用的第一个功能是用户身份验证。我们可以随时通过运行来启用功能amplify add <featurename>。身份验证的类别是auth，所以运行：

amplify add auth

当被问到是否要使用默认的身份验证和安全配置？，选择是。

创建完成后，我们需要运行amplify push以在我们的帐户中创建新服务：

amplify push

当被问及您确定要继续吗？，选择是。

创建服务后，您可以随时通过访问 https://console.aws.amazon.com/cognito/users/ 并单击您的服务名称在仪表板中查看该服务。

我们还可以通过运行随时查看所有启用的服务amplify status：

amplify status

您还会注意到在 React 应用程序的根文件夹中创建了一个新文件 - aws-exports.js 。您无需编辑此文件，因为它由 CLI 为您处理，但我们将在下一步中使用它来配置本地项目。

向 React 应用程序添加身份验证

现在我们已经创建了身份验证服务，我们可以开始在我们的 React 应用程序中使用它！

我们需要做的第一件事是配置 React 应用程序以了解我们的 Amplify 项目。我们这样做的方式是调用Amplify.configure项目的根目录——对我们来说，这将是src/index.js。

import Amplify from 'aws-amplify'
import config from './aws-exports'
Amplify.configure(config)

现在，我们的项目已经准备就绪，我们可以实现身份验证了。

使用withAuthenticator高阶组件

我们将介绍几种实现用户身份验证的方法，但首先，我们将从使用aws-amplify-react库中withAuthenticator 的高阶组件开始。该组件仅用几行代码就构建了一个完整的身份验证流程，是启动和运行该库的好方法。

在App.jswithAuthenticator中，在文件顶部导入HOC：

import { withAuthenticator } from 'aws-amplify-react'

并且，在底部，更新 export语句以 App用 withAuthenticator.

export default withAuthenticator(App)

要了解更多信息，请阅读官方文档中用于身份验证的可用 Amplify React 组件。

测试身份验证流程

现在，我们可以运行应用程序，应该会看到一个登录屏幕：

单击创建帐户进行注册，然后登录到应用程序。登录后，会话将被存储，因此我们可以刷新页面并保持登录状态。

登出选项

我们还可以通过向 HOC 添加第二个参数来呈现退出按钮：

export default withAuthenticator(App, { includeGreetings: true })

请注意，我们也可以Auth直接使用该类将用户注销：

// 1. import the class
import { Auth } from 'aws-amplify'

// Sign the user out
await Auth.signOut()

请注意，当Auth.signOut直接调用时，我们仍然必须以某种方式重新渲染组件，以便将用户带回登录页面。您可以在项目的 GitHub 存储库上的问题线程中看到一个示例。 

使用Auth类

我们也可以使用Auth类来手动管理用户。Auth有 30 多种可用方法，包括signUp、signIn、confirmSignUp、confirmSignIn、forgotPassword和 resendSignUp。

让我们看看如何使用signUp类方法实现用户注册：

// 1. Create initial state to hold user inputs
state = {username: '', password: '', email: '', phone_number: '', authCode: ''}

// 2. onChange handler for user input changes
onChange = e => {
  this.setState({ [e.target.name]: e.target.value })
}

// 3. Function to call Auth.signUp
signUp = async () => {
  const { username, password, email, phone_number } = this.state
  await Auth.signUp({
    username, password, attributes: { phone_number, email}
  })
  console.log('successfully signed up')
}

// 4. Function to call Auth.signUp
confirmSignUp = async () => {
  const { username, authCode } = this.state
  await Auth.confirmSignUp(username, authCode)
  console.log('successfully confirmed signed up')
}

// 5. In render method, create inputs with attributes to update state
<input onChange={this.onChange} name='username' />

// 6. Create buttons to call signUp and confirmSignUp methods
<button onClick={this.signUp}>Sign Up</button>

这是您如何使用 Auth 类手动注册用户的蓝图。

手动实现需要更长的时间来编写，但您不仅可以完全控制 UI，还可以完全控制您想要实现的实际功能。

您可以在项目文档中了解有关使用 AWS Amplify 进行身份验证的更多信息。

使用 Amazon S3 进行存储

Amazon S3 是一种流行的服务，用于存储图像和视频等媒体，以及应用程序托管、备份和软件交付等后端服务。

AWS Amplify CLI 使我们能够创建、配置、更新和删除 S3 存储桶。在本节中，我们将了解如何创建 S3 存储桶以及如何将图像和文件上传和下载到存储桶。

要启用存储，我们可以运行以下命令：

amplify add storage

接下来，系统将提示您提供一些配置详细信息。选择 内容（图像、音频、视频等）服务。接下来，提供项目特定的资源名称（在项目内部使用）和存储桶名称（存储数据的 S3 位置）。最后，访问权限应仅限于 Auth用户，并且应授予经过身份验证的用户 读/写访问权限。

现在存储已添加到我们的配置中，我们运行amplify push以在我们的帐户中创建新资源：

amplify push

这将创建并配置一个 Amazon S3 存储桶，我们可以开始使用它来存储项目。

使用 S3 存储的示例

如果我们想对此进行测试，我们可以将一些文本存储在如下文件中：

import { Storage } from 'aws-amplify'

// create function to work with Storage
addToStorage = () => {
  Storage.put('JavaScript/MyReactComponent.js', `
    import React from 'react'
    const App = () => (
      <p>Hello World</p>
    )
    export default App
  `)
    .then (result => {
      console.log('result: ', result)
    })
    .catch(err => console.log('error: ', err));
}

// add click handler
<button onClick={this.addToStorage}>Add To Storage</button>

这将在我们的 S3 存储桶中创建一个名为 javascript的文件夹 ，并在其中存储一个名为 MyReactComponent.js的文件 ，其中包含我们在第二个参数中指定的代码 Storage.put。

如果我们想从这个文件夹中读取所有内容，我们可以使用 Storage.list：

readFromStorage = () => { 
  Storage.list('javascript/') 
    .then(data => console.log('data from S3: ', data)) 
    .catch(err => console.log('error') ) }

如果我们只想读取单个文件，我们可以使用 Storage.get：

readFromStorage = () => { 
  Storage.get('javascript/MyReactComponent.js') .then 
    (data => console.log('data from S3:', data)) 
    .catch(err => console.log('error')) }

如果我们想下拉所有内容，我们可以使用 Storage.list：

readFromStorage = () => { 
  Storage.list('') 
    .then(data => console.log('data from S3:', data)) 
    .catch(err => console.log('error')) }

使用图像

使用图像也很容易。这是一个例子：

class S3ImageUpload extends React.Component {
  onChange(e) {
      const file = e.target.files[0];
      Storage.put('example.png', file, {
          contentType: 'image/png'
      })
      .then (result => console.log(result))
      .catch(err => console.log(err));
  }

  render() {
      return (
          <input
              type="file" accept='image/png'
              onChange={(e) => this.onChange(e)}
          />
      )
  }
}

在上面的代码中，我们将文件上传表单输入链接到 onChange 事件处理程序。当用户提供文件时， Storage.put调用以 MIME 类型将文件上传到 S3 image/png.

托管

要在 AWS 上部署和托管您的应用程序，我们可以使用该 hosting 类别。

amplify add hosting

同样，系统会提示您提供一些配置选项：

• 对于环境类型，选择 DEV (S3 only with HTTP)。

• 选择将托管您的项目的全局唯一存储桶名称。

• 提供网站的索引名称和错误 URL — 通常是 index.html。

现在，一切都设置好了，我们可以发布应用了：

amplify publish

删除服务

如果您想在任何时候从您的项目和帐户中删除服务，您可以通过运行 amplify remove 命令然后推送来执行此操作。

amplify remove auth
amplify push

如果您不确定随时启用了哪些服务，可以运行以下 amplify status 命令：

amplify status

amplify status 将为您提供当前在您的应用中启用的资源列表。

结论

AWS Amplify 使开发人员能够比以往更轻松地构建全栈、支持云的应用程序，从而使开发人员能够直接从他们的前端环境快速迭代。