将 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 中，以便您无需弹出即可使用 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

反馈