将 AWS 与 React Native 结合使用

AWS 在技术行业中以云服务提供商而闻名。这些服务包括计算、存储和数据库技术，以及完全托管的无服务器产品。AWS 移动团队一直与客户和 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：利用 AWS Signature Version 4，以安全的方式与 RESTful API 进行交互。API 模块在与 Amazon API Gateway 配合使用的无服务器基础设施上表现出色。
• Storage：简化了在 Amazon S3 中上传、下载和列出内容的命令。你还可以轻松地按用户将数据分组为公共或私人内容。
• 缓存：一个跨 Web 应用程序和 React Native 的 LRU 缓存接口，使用特定于实现的持久性。
• i18n 和日志：提供国际化和本地化功能，以及调试和日志记录功能。

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 已禁用。这使得用于此类安全操作的大整数计算性能较低。为了解决这个问题，我们发布了可以在你的项目中链接的 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。