使用 AWS 与 React Native

2018 年 3 月 5 日 ·9 分钟阅读

AWS Mobile 高级技术产品经理

AWS 在科技行业中以云服务提供商而闻名。这些服务包括计算、存储和数据库技术，以及完全托管的无服务器产品。AWS Mobile 团队一直与客户和 JavaScript 生态系统成员紧密合作，以使云连接的移动和 Web 应用程序更安全、可扩展且更易于开发和部署。我们从一个完整的入门套件开始，但最近有了一些新的进展。

这篇博文讨论了 React 和 React Native 开发人员感兴趣的一些内容

AWS Amplify，一个用于使用云服务的 JavaScript 应用程序的声明式库
AWS AppSync，一个具有离线和实时功能的完全托管的 GraphQL 服务

AWS Amplify

使用诸如 Create React Native App 和 Expo 之类的工具，可以非常容易地引导 React Native 应用程序。但是，当您尝试将用例与基础设施服务匹配时，将它们连接到云可能会充满挑战。例如，您的 React Native 应用可能需要上传照片。这些照片是否应该按用户进行保护？这可能意味着您需要某种注册或登录过程。您想要自己的用户目录，还是使用社交媒体提供商？也许您的应用还需要在用户登录后调用具有自定义业务逻辑的 API。

为了帮助 JavaScript 开发人员解决这些问题，我们发布了一个名为 AWS Amplify 的库。该设计被分解为“类别”的任务，而不是特定于 AWS 的实现。例如，如果您希望用户注册、登录，然后上传私人照片，您只需将 Auth 和 Storage 类别拉入您的应用程序

import { Auth } from 'aws-amplify';

Auth.signIn(username, password)
    .then(user => console.log(user))
    .catch(err => console.log(err));

Auth.confirmSignIn(user, code)
    .then(data => console.log(data))
    .catch(err => console.log(err));

在上面的代码中，您可以看到 Amplify 帮助您完成的一些常见任务的示例，例如将多因素身份验证 (MFA) 代码与电子邮件或 SMS 结合使用。今天支持的类别有

Auth：提供凭证自动化。开箱即用的实现使用 AWS 凭证进行签名，以及来自 Amazon Cognito 的 OIDC JWT 令牌。支持常见的功能，例如 MFA 功能。
Analytics：只需一行代码，即可在 Amazon Pinpoint 中获取经过身份验证或未经身份验证的用户的跟踪。根据您的喜好扩展此功能以用于自定义指标或属性。
API：提供与 RESTful API 的安全交互，利用 AWS Signature Version 4。API 模块非常适合使用 Amazon API Gateway 的无服务器基础设施。
Storage：简化的命令，用于在 Amazon S3 中上传、下载和列出内容。您还可以轻松地按用户将数据分组为公共或私有内容。
Caching：跨 Web 应用和 React Native 的 LRU 缓存接口，使用特定于实现的持久性。
i18n 和 Logging：提供国际化和本地化功能，以及调试和日志记录功能。

Amplify 的优点之一是它在设计中编码了针对您特定编程环境的“最佳实践”。例如，我们在与客户和 React Native 开发人员合作时发现，在开发过程中为使事情快速运行而采取的捷径会一直延续到生产堆栈。这些可能会损害可扩展性或安全性，并迫使基础设施重新架构和代码重构。

我们如何帮助开发人员避免这种情况的一个例子是使用 AWS Lambda 的无服务器参考架构。这些架构向您展示了在使用 Amazon API Gateway 和 AWS Lambda 构建后端时的最佳实践。此模式被编码到 Amplify 的 API 类别中。您可以使用此模式与多个不同的 REST 端点进行交互，并将标头一直传递到您的 Lambda 函数以实现自定义业务逻辑。我们还发布了一个 AWS Mobile CLI，用于使用这些功能引导新的或现有的 React Native 项目。要开始使用，只需通过 npm 安装，然后按照配置提示进行操作

npm install --global awsmobile-cli
awsmobile configure

特定于移动生态系统的编码最佳实践的另一个例子是密码安全。默认的 Auth 类别实现利用 Amazon Cognito 用户池进行用户注册和登录。此服务实现了安全远程密码协议，作为在身份验证尝试期间保护用户的一种方式。如果您有兴趣通读该协议的数学原理，您会注意到在通过原始根计算密码验证器以生成组时，必须使用大素数。在 React Native 环境中，JIT 已禁用。这使得 BigInteger 计算（用于安全操作，例如此操作）的性能降低。为了解决这个问题，我们在 Android 和 iOS 中发布了原生桥接，您可以在项目中链接这些桥接

npm install --save aws-amplify-react-native
react-native link amazon-cognito-identity-js

我们也很高兴看到 Expo 团队已将此包含在其最新的 SDK 中，以便您可以在不 eject 的情况下使用 Amplify。

最后，特别针对 React Native（和 React）开发，Amplify 包含高阶组件 (HOC)，用于轻松包装功能，例如用于应用程序的注册和登录

import Amplify, { withAuthenticator } from 'aws-amplify-react-native';
import aws_exports from './aws-exports';

Amplify.configure(aws_exports);

class App extends React.Component {
...
}

export default withAuthenticator(App);

底层组件也作为 <Authenticator /> 提供，这使您可以完全控制自定义 UI。它还为您提供了一些关于管理用户状态的属性，例如他们是否已登录或正在等待 MFA 确认，以及您可以在状态更改时触发的回调。

同样，您会找到通用的 React 组件，可以用于不同的用例。您可以根据需要自定义这些组件，例如，在 Storage 模块中显示来自 Amazon S3 的所有私有图像

<S3Album
  level="private"
  path={path}
  filter={(item) => /jpg/i.test(item.path)}/>

您可以通过 props 控制组件的许多功能，如前所示，具有公共或私有存储选项。甚至可以在用户与某些 UI 组件交互时自动收集分析信息

return <S3Album track/>

AWS Amplify 倾向于约定优于配置的开发风格，具有全局初始化例程或类别级别的初始化。最快的入门方法是使用 aws-exports 文件。但是，开发人员也可以独立使用该库和现有资源。

要深入了解其理念并观看完整的演示，请查看 AWS re:Invent 的视频。

AWS AppSync

在 AWS Amplify 发布后不久，我们还发布了 AWS AppSync。这是一个完全托管的 GraphQL 服务，具有离线和实时功能。虽然您可以在不同的客户端编程语言（包括原生 Android 和 iOS）中使用 GraphQL，但它在 React Native 开发人员中非常受欢迎。这是因为数据模型非常适合单向数据流和组件层次结构。

AWS AppSync 使您能够连接到您自己的 AWS 账户中的资源，这意味着您拥有并控制您的数据。这是通过使用数据源完成的，该服务支持 Amazon DynamoDB、Amazon Elasticsearch 和 AWS Lambda。这使您可以在单个 GraphQL API 中将功能（例如 NoSQL 和全文搜索）组合为模式。这使您可以混合和匹配数据源。AppSync 服务还可以从模式进行预置，因此，如果您不熟悉 AWS 服务，则可以编写 GraphQL SDL，单击一个按钮，即可自动启动并运行。

AWS AppSync 中的实时功能通过 GraphQL 订阅与众所周知的基于事件的模式进行控制。由于 AWS AppSync 中的订阅是在模式上使用 GraphQL 指令进行控制，并且模式可以使用任何数据源，这意味着您可以从数据库操作（使用 Amazon DynamoDB 和 Amazon Elasticsearch Service）或来自基础设施的其他部分（使用 AWS Lambda）触发通知。

以类似于 AWS Amplify 的方式，您可以在 AWS AppSync 上使用企业安全功能在您的 GraphQL API 上。该服务让您可以快速入门 API 密钥。但是，当您推广到生产环境时，它可以转换为使用 AWS Identity and Access Management (IAM) 或来自 Amazon Cognito 用户池的 OIDC 令牌。您可以使用类型策略在解析器级别控制访问。您甚至可以使用逻辑检查在运行时进行细粒度的访问控制检查，例如检测用户是否是特定数据库资源的所有者。还有一些关于检查组成员身份以执行解析器或单个数据库记录访问的功能。

为了帮助 React Native 开发人员更多地了解这些技术，AWS AppSync 控制台主页上有一个内置的 GraphQL 示例模式，您可以启动它。此示例部署 GraphQL 模式，预置数据库表，并自动为您连接查询、mutation 和订阅。还有一个功能齐全的 AWS AppSync 的 React Native 示例，它利用了这个内置模式（以及 React 示例），使您可以在几分钟内启动并运行您的客户端和云组件。

当您使用 AWSAppSyncClient 时，入门很简单，它插入到 Apollo Client 中。AWSAppSyncClient 处理 GraphQL API 的安全性与签名、离线功能以及订阅握手和协商过程

import AWSAppSyncClient from "aws-appsync";
import { Rehydrated } from 'aws-appsync-react';
import { AUTH_TYPE } from "aws-appsync/lib/link/auth-link";

const client = new AWSAppSyncClient({
  url: awsconfig.graphqlEndpoint,
  region: awsconfig.region,
  auth: {type: AUTH_TYPE.API_KEY, apiKey: awsconfig.apiKey}
});

AppSync 控制台提供一个配置文件供下载，其中包含您的 GraphQL 端点、AWS 区域和 API 密钥。然后，您可以将客户端与 React Apollo 一起使用

const WithProvider = () => (
  <ApolloProvider client={client}>
      <Rehydrated>
          <App />
      </Rehydrated>
  </ApolloProvider>
);

此时，您可以使用标准的 GraphQL 查询

query ListEvents {
    listEvents{
      items{
        __typename
        id
        name
        where
        when
        description
        comments{
          __typename
          items{
            __typename
            eventId
            commentId
            content
            createdAt
          }
          nextToken
        }
      }
    }
}

上面的示例显示了使用 AppSync 预置的示例应用模式的查询。它不仅展示了与 DynamoDB 的交互，还包括数据分页（包括加密令牌）以及 Events 和 Comments 之间的类型关系。由于该应用配置了 AWSAppSyncClient，因此数据会自动离线持久保存，并在设备重新连接时同步。

您可以在此视频中看到对此技术背后的客户端技术以及 React Native 演示的深入探讨。

反馈

这些库背后的团队渴望听到这些库和服务对您的工作情况。他们还想听听我们还能做些什么，让您更轻松地使用云服务进行 React 和 React Native 开发。请在 GitHub 上联系 AWS Mobile 团队，了解 AWS Amplify 或 AWS AppSync。

AWS Amplify​

AWS AppSync​

反馈​

AWS Amplify

AWS AppSync

反馈