跳至主内容

在 React Native 中使用 AWS

· 1 分钟阅读
Richard Threlkeld
Richard Threlkeld
AWS Mobile 高级技术产品经理
非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →

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：通过 AWS 签名版本 4 安全地与 RESTful API 交互。该模块在配合 Amazon API Gateway 的无服务器架构中表现优异。

  • Storage：简化了 Amazon S3 内容的上传、下载和列表操作。还可轻松按用户分组公开或私有数据。

  • Caching：跨 Web 应用和 React Native 的 LRU 缓存接口，采用特定实现的持久化方案。

  • i18n and 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用户池处理用户注册和登录。该服务采用安全远程密码协议(SRP)来保护用户认证过程。如果您有兴趣研究该协议的数学原理，会注意到在原始根上计算密码验证器生成群组时必须使用大质数。在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 订阅模式实现。由于订阅功能使用 GraphQL 指令在架构层进行控制，而架构可使用任意数据源，这意味着您可以通过 Amazon DynamoDB 和 Amazon Elasticsearch Service 的数据库操作触发通知，或通过 AWS Lambda 从基础设施其他部分触发。

与 AWS Amplify 类似，您可以在 AWS AppSync 的 GraphQL API 中使用企业级安全功能。该服务支持通过 API 密钥快速上手，但在生产环境中可无缝切换到 AWS IAM 或 Amazon Cognito 用户池的 OIDC 令牌。您可以在解析器层级通过类型策略控制访问权限，甚至能在运行时执行细粒度访问控制检查（例如验证用户是否为特定数据库资源所有者），还支持通过群组成员检查来执行解析器或数据库记录访问。

为帮助 React Native 开发者快速上手，AWS AppSync 控制台主页提供内置 GraphQL 示例架构。该示例会自动部署 GraphQL 架构、配置数据库表并连接查询/变更/订阅操作。我们还提供了可直接运行的 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。