将 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) 代码。目前支持的类别有：

• 身份验证：提供凭证自动化。开箱即用的实现使用 AWS 凭证进行签名，并使用 Amazon Cognito 中的 OIDC JWT 令牌。支持 MFA 功能等常见功能。
• 分析：只需一行代码，即可在 Amazon Pinpoint 中获取已认证或未经认证用户的跟踪。您可以根据需要将其扩展为自定义指标或属性。
• API：以安全的方式提供与 RESTful API 的交互，利用 AWS Signature Version 4。API 模块在与 Amazon API Gateway 配合使用的无服务器基础设施上表现出色。
• 存储：在 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。

最后，Amplify 特别针对 React Native（和 React）开发，包含了高阶组件（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 中以 schema 的形式结合功能（例如 NoSQL 和全文搜索）。这使您能够混合和匹配数据源。AppSync 服务还可以从 schema 进行配置，因此如果您不熟悉 AWS 服务，您可以编写 GraphQL SDL，点击一个按钮，然后您就可以自动运行了。

AWS AppSync 中的实时功能通过带有众所周知事件模式的 GraphQL 订阅进行控制。因为 AWS AppSync 中的订阅通过 GraphQL 指令在 schema 上进行控制，并且一个 schema 可以使用任何数据源，这意味着您可以从使用 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 示例 schema，您可以启动它。这个示例会部署一个 GraphQL schema，配置数据库表，并自动为您连接查询、变更和订阅。还有一个可用的AWS AppSync 的 React Native 示例，它利用了这个内置 schema（以及一个React 示例），使您的客户端和云组件在几分钟内即可运行。

当您使用插入到 Apollo Client 中的 `AWSAppSyncClient` 时，入门很简单。`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 提供的示例应用 schema 的查询。它不仅展示了与 DynamoDB 的交互，还包括数据分页（包括加密令牌）以及 `Events` 和 `Comments` 之间的类型关系。由于应用程序配置了 `AWSAppSyncClient`，数据会自动离线持久化，并在设备重新连接时进行同步。

您可以在此视频中深入了解其背后的客户端技术和 React Native 演示。

反馈

这些库背后的团队渴望了解这些库和服务对您来说效果如何。他们还想听听我们还能做些什么，让您使用云服务进行 React 和 React Native 开发变得更容易。请在 GitHub 上联系 AWS Mobile 团队，获取 AWS Amplify 或 AWS AppSync 的信息。