将 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：提供与 RESTful API 的安全交互，利用 AWS Signature Version 4。API 模块在与 Amazon API Gateway 结合使用的无服务器基础设施上表现出色。
- Storage：简化在 Amazon S3 中上传、下载和列出内容的命令。您还可以轻松地按用户将数据分组为公共或私人内容。
- Caching：一个跨 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 已禁用。这使得此类安全操作的 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 模式、配置数据库表，并连接查询、变异和订阅。还有一个正常运行的 AWS AppSync 的 React Native 示例，它利用了这个内置模式（以及一个 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 提供的示例应用模式的查询。它不仅展示了与 DynamoDB 的交互，还包括数据分页（包括加密令牌）以及 Events 和 Comments 之间的类型关系。由于应用已配置 AWSAppSyncClient，数据会自动离线持久化，并在设备重新连接时同步。
您可以在此视频中深入了解其背后的客户端技术和 React Native 演示。
反馈
库背后的团队渴望了解这些库和服务对您的使用情况。他们也想知道我们还能做些什么，以使您使用云服务进行 React 和 React Native 开发变得更容易。请在 GitHub 上联系 AWS 移动团队，获取有关 AWS Amplify 或 AWS AppSync 的信息。
