React Native での AWS の使用

2018年3月5日 ·9 分で読める

AWS Mobile のシニアテクニカルプロダクトマネージャー

AWS は、コンピューティング、ストレージ、データベース技術、そしてフルマネージドのサーバーレス製品など、クラウドサービスのプロバイダーとしてテクノロジー業界でよく知られています。 AWS Mobile チームは、お客様と JavaScript エコシステムのメンバーと緊密に協力して、クラウド接続されたモバイルおよび Web アプリケーションをより安全でスケーラブル、そして開発とデプロイが容易なものにするために取り組んできました。私たちは完全なスターターキットから始めましたが、さらに最新の開発がいくつかあります。

このブログ記事では、React と React Native 開発者にとって興味深いことをいくつか紹介します。

AWS Amplify、クラウドサービスを使用する JavaScript アプリケーション用の宣言型ライブラリ
AWS AppSync、オフラインおよびリアルタイム機能を備えたフルマネージドの GraphQL サービス

AWS Amplify

React Native アプリケーションは、Create React Native App や Expo などのツールを使用して非常に簡単にブートストラップできます。ただし、ユースケースをインフラストラクチャサービスに一致させようとすると、クラウドへの接続が難しい場合があります。たとえば、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 が役立つ一般的なタスクの例をいくつか示しています。たとえば、メールまたは SMS で多要素認証（MFA）コードを使用することなどです。現在サポートされているカテゴリは次のとおりです。

**認証**: 資格情報の自動化を提供します。すぐに使用できる実装では、署名に AWS 資格情報を使用し、Amazon Cognito から OIDC JWT トークンを使用します。MFA 機能などの一般的な機能がサポートされています。
**分析**: 1 行のコードで、Amazon Pinpoint で認証済みまたは認証されていないユーザーの追跡を取得します。必要に応じて、カスタムメトリックまたは属性に拡張します。
**API**: AWS Signature Version 4 を活用して、RESTful API と安全に対話するための手段を提供します。API モジュールは、Amazon API Gateway を使用したサーバーレスインフラストラクチャで優れています。
**ストレージ**: Amazon S3 でコンテンツをアップロード、ダウンロード、リストするための簡略化されたコマンド。また、ユーザーごとにデータをパブリックまたはプライベートコンテンツに簡単にグループ化することもできます。
**キャッシング**: 実装固有の永続性を使用する、Web アプリと React Native にわたる LRU キャッシュインターフェース。
**国際化とロギング**: 国際化とローカライズ機能、およびデバッグとロギング機能を提供します。

Amplify の優れた点の 1 つは、特定のプログラミング環境の「ベストプラクティス」を設計にエンコードしていることです。たとえば、お客様と React Native 開発者と協力して発見したことの 1 つは、開発中に迅速に作業を進めるために行った近道が、本番スタックにまで及ぶということです。これらはスケーラビリティまたはセキュリティを損ない、インフラストラクチャの再構築とコードのリファクタリングを強制する可能性があります。

開発者がこれを回避できるようにする方法の 1 つの例は、AWS Lambda を使用したサーバーレスリファレンスアーキテクチャです。これらは、バックエンドを構築するときに Amazon API Gateway と AWS Lambda を一緒に使用するためのベストプラクティスを示しています。このパターンは、Amplify の `API` カテゴリにエンコードされています。このパターンを使用して、いくつかの異なる REST エンドポイントと対話し、カスタムビジネスロジックのために Lambda 関数にヘッダーをすべて渡すことができます。また、これらの機能を使用して新規または既存の React Native プロジェクトをブートストラップするための AWS Mobile CLI もリリースしました。開始するには、**npm** 経由でインストールし、構成プロンプトに従ってください。

npm install --global awsmobile-cli
awsmobile configure

モバイルエコシステムに固有のエンコードされたベストプラクティスのもう1つの例は、パスワードセキュリティです。デフォルトの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サービスです。GraphQLはさまざまなクライアントプログラミング言語（ネイティブAndroidおよびiOSを含む）で使用できますが、React Native開発者 arasında非常に人気があります。これは、データモデルが単方向データフローとコンポーネント階層にうまく適合するためです。

AWS AppSyncを使用すると、自分のAWSアカウントのリソースに接続できます。つまり、自分のデータを所有および制御できます。これはデータソースを使用して行われ、サービスはAmazon DynamoDB、Amazon Elasticsearch、およびAWS Lambdaをサポートしています。これにより、NoSQLや全文検索などの機能をスキーマとして単一のGraphQL APIに組み合わせることができます。これにより、データソースを組み合わせることができます。AppSyncサービスは、スキーマからプロビジョニングすることもできます。そのため、AWSサービスに慣れていない場合は、GraphQL SDLを記述してボタンをクリックするだけで、自動的に起動して実行できます。

AWS AppSyncのリアルタイム機能は、よく知られたイベントベースのパターンを使用したGraphQLサブスクリプションによって制御されます。AWS AppSyncのサブスクリプションは、GraphQLディレクティブを使用してスキーマで制御され、スキーマは任意のデータソースを使用できるため、Amazon DynamoDBおよびAmazon Elasticsearch Serviceを使用したデータベース操作、またはAWS Lambdaを使用したインフラストラクチャの他の部分から通知をトリガーできます。

AWS Amplifyと同様の方法で、AWS AppSyncを使用してGraphQL APIでエンタープライズセキュリティ機能を使用できます。このサービスを使用すると、APIキーですばやく開始できます。ただし、本番環境に移行する際には、Amazon CognitoユーザープールからのAWS Identity and Access Management（IAM）または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開発をより簡単にするために、他に何ができるかについてもご意見をお待ちしています。AWS AmplifyまたはAWS AppSyncについて、GitHubのAWSモバイルチームにご連絡ください。

AWS Amplify​

AWS AppSync​

フィードバック​

AWS Amplify

AWS AppSync

フィードバック