使用 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) 代码通过电子邮件或短信进行验证。目前支持的类别包括

Auth：提供凭据自动化。开箱即用的实现使用 AWS 凭据进行签名，以及来自Amazon Cognito 的 OIDC JWT 令牌。支持常见功能，例如 MFA 功能。
Analytics：只需一行代码，即可在Amazon Pinpoint 中跟踪已认证或未认证的用户。您可以根据需要扩展此功能以实现自定义指标或属性。
API：以安全的方式与 RESTful API 交互，利用AWS 签名版本 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 中，以便您无需弹出即可使用 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，您可以使用企业安全功能在您的 GraphQL API 上使用 AWS AppSync。该服务允许您快速开始使用 API 密钥。但是，当您过渡到生产环境时，它可以过渡到使用 AWS Identity and Access Management (IAM) 或来自 Amazon Cognito 用户池的 OIDC 令牌。您可以使用类型上的策略在解析器级别控制访问权限。您甚至可以使用逻辑检查来进行细粒度访问控制检查，例如检测用户是否为特定数据库资源的所有者。还有一些功能可以检查组成员资格以执行解析器或单个数据库记录访问。

为了帮助 React Native 开发人员了解这些技术，有一个内置的 GraphQL 示例模式，您可以在 AWS AppSync 控制台主页上启动它。此示例部署了一个 GraphQL 模式，配置了数据库表，并自动为您连接查询、变异和订阅。还有一个功能性的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

反馈