React Nativeで始める - AWS SDK for JavaScript

改善のお手伝いAWS SDK for JavaScriptを使用してフィードバックを提供することにより、バージョン 3 (V3) のドキュメントフィードバックリンクするか、Issue またはプルリクエストを作成しますGitHub

-AWS SDK for JavaScriptV3 API リファレンスガイドでは、のすべての API オペレーションについて詳しく説明します。AWS SDK for JavaScriptバージョン3 (V3)。

翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。

React Nativeで始める

このチュートリアルでは、を使用して、React Native アプリを作成する方法を示します。反応のネイティブCLI


                JavaScript code example that applies to React Native.

このチュートリアルでは、次の内容について説明します。

  • をインストールして含める方法AWS SDK for JavaScriptプロジェクトが使用するバージョン3(V3)モジュールを使用します。

  • Amazon Simple Storage Service (Amazon S3) に接続して Amazon S3 バケットを作成および削除するコードを記述する方法。

シナリオ

Amazon S3 は、いつでもウェブ上の任意の場所から、任意の量のデータを格納および取得できるクラウドサービスです。React Nativeは、モバイルアプリケーションを作成することを可能にする開発フレームワークです。このチュートリアルでは、Amazon S3 に接続して Amazon S3 バケットを作成および削除する React Native アプリケーションを作成する方法について説明します。

アプリは、JavaScript API に次の SDK を使用します。

このチュートリアルのセットアップ

このセクションでは、このチュートリアルを完了するために必要な最小限のセットアップを提供します。これを完全なセットアップであるとは見なさないでください。詳細については、「JavaScript のための SDK のセットアップ」を参照してください。

注記

他のチュートリアルまたは既存の設定で次のステップのいずれかをすでに完了している場合は、これらのステップをスキップします。

を作成するにはAWSアカウントの詳細については、Amazon Web Services 新規アカウントを作成してアクティベートする方法を教えてください。

これらのチュートリアルを実行するには、作成する必要があります。AWS Identity and Access Management(IAM) ユーザーを作成し、そのユーザーの認証情報を取得します。これらの認証情報を提供したら、開発環境の SDK で利用できるようにします。その方法は次のとおりです。

認証情報を作成して使用するには

  1. AWS Management Console にサインインして、IAM コンソール (https://console.aws.amazon.com/iam/) を開きます。

  2. [Users] を選択して、[Add] を選択します。

  3. ユーザー名を指定します。このチュートリアルでは、を使用します。反応-ネイティブ-チュートリアル-ユーザー

  4. []SelectAWSアクセスのタイプで、プログラムによるアクセス] を選択してから、[次へ: アクセス許可.

  5. [Attach existing policies directly (既存のポリシーを直接添付する)] を選択します。

  6. Eclipse検索で、s3] を選択してから、[AmazonS3FullAccess

  7. [Next: (次へ:)] を選択します タグ,次へ: 確認, およびユーザーの作成

  8. の認証情報を記録する反応-ネイティブ-チュートリアル-ユーザー。これを行うには、.csv ファイルをダウンロードするか、アクセスキー IDシークレットアクセスキーをコピーアンドペーストします。

    警告

    適切なセキュリティ対策を講じてこれらの認証情報を安全に保管し、ローテーションしてください

  9. 共有 AWS 認証情報ファイルを作成するか、開きます。このファイルは~/.aws/credentialsLinux および macOS システムでは、および%USERPROFILE%\.aws\credentialsWindows で。

  10. 共有 AWS 認証情報ファイルに次のテキストを追加します。ただし、サンプル ID とサンプルキーを先ほど取得したものに置き換えます。必ずファイルを保存してください。

    [javascript-tutorials] aws_access_key_id = AKIAIOSFODNN7EXAMPLE aws_secret_access_key = wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY

前述の手順は、考えられる認証と認可のうち最もシンプルなものです。詳細については、「」を参照してください。認証情報の設定

このチュートリアルを完了するには、設定する必要があります。React Native 開発

また、以下のツールをインストールする必要があります。

ステップ 1: Amazon Cognito ID プールを作成する

この演習では、Amazon Cognito ID プールを作成して使用して、Amazon S3 サービスのアプリへの認証されていないアクセスを提供します。ID プールを作成すると、2 つのAWS Identity and Access Management(IAM) ロールを使用します。1 つは ID プロバイダーによって認証されたユーザーをサポートするため、もう 1 つは認証されていないゲストユーザーをサポートするためです。

この演習では、タスクに集中し続けるために、認証されていないユーザーロールのみを使用します。後で ID プロバイダーと認証済みユーザーのサポートを統合できます。

Amazon Cognito ID プールを作成するには

  1. にサインインします。AWS Management Console次に、Amazon Cognito コンソール () を開きます。Amazon Web Services コンソール。

  2. コンソールの開始ページで、[Manage Identity Pools (ID プールの管理)] を選択します。

  3. 次のページで、[新しい ID プールの作成] を選択します。

    注記

    他の ID プールがない場合、Amazon Cognito コンソールはこのページをスキップして次のページを開きます。

  4. [使用開始ウィザード] で、[ID プール名] の ID プールの名前を入力します。

  5. [認証されていない ID に対してアクセスを有効にする] を開きます。

  6. [Create Pool] を選択します。

  7. 次のページで、[詳細を表示ID プール用に作成したロールを表示します。認証されていない ID のロールの名前を書き留めます。Amazon S3 に必要なポリシーを追加するにはこの名前が必要です。

  8. [許可] を選択します。

  9. [サンプルコード] ページで、JavaScript のプラットフォームを選択します。次に、ID プール ID とリージョンをコピーまたは書き留めます。これらの値は、置き換える必要があります。リージョンおよびIDENTITYブラウザスクリプトで。

Amazon Cognito ID プールを作成したら、React Native アプリに必要な Amazon S3 の権限を追加する準備が整います。

ステップ 2: 作成した IAM ロールにポリシーを追加する

Amazon S3 へのブラウザスクリプトのアクセスを有効にして Amazon S3 バケットを作成および削除するには、Amazon Cognito ID プール用に作成された認証されていない IAM ロールを使用します。これには、IAM ポリシーをロールに追加する必要があります。IAM ロールの詳細については、「」を参照してください。にアクセス許可を委任するロールの作成AWSサービスIAM ユーザーガイド

Amazon S3 ポリシーを、認証されていないユーザーに関連付けられている IAM ロールに追加するには

  1. AWS Management Console にサインインして、IAM コンソール (https://console.aws.amazon.com/iam/) を開きます。

  2. ページの左側のナビゲーションパネルで、[ロール] を選択します。

  3. IAM ロールのリストで、Amazon Cognito によって以前に作成された認証されていない ID ロールのリンクをクリックします。

  4. このロールの [概要] ページで、[ポリシーのアタッチ] を選択します。

  5. アクセス許可のアタッチこのロールの [] ページで、[] を検索してチェックボックスをオンにします。AmazonS3FullAccess

    注記

    このプロセスを使用して、任意のAWSサービス。

  6. [ポリシーのアタッチ] を選択します。

Amazon Cognito ID プールを作成し、認証されていないユーザーの IAM ロールに Amazon S3 の権限を追加したら、アプリケーションを構築する準備が整いました。

ステップ 3: 作成-反応-ネイティブ-アプリを使用してアプリを作成する

次のコマンドを実行してReact Native アプリケーションを作成します。

npx react-native init ReactNativeApp --npm

ステップ 4: Amazon S3 パッケージおよびその他の依存関係をインストールする

プロジェクトのディレクトリ内で、次のコマンドを実行して Amazon S3 パッケージをインストールします。

npm install @aws-sdk/client-s3

このコマンドはプロジェクトに Amazon S3 パッケージをインストールして、package.jsonを使用して、Amazon S3 をプロジェクトの依存関係としてリストします。このパッケージに関する情報は、「@aws-sdk」のhttps://www.npmjs.com/npm ウェブサイト。

これらのパッケージとそれに関連するコードは、プロジェクトの node_modules サブディレクトリにインストールされています。

Node.js パッケージのインストールの詳細については、」パッケージをローカルでダウンロードしてインストールするおよびNode.js モジュールの作成npm(Node.js パッケージマネージャ)ウェブサイト。AWS SDK for JavaScript のダウンロードとインストールについては、「SDK for JavaScript をインストールする」を参照してください。

認証に必要なその他の依存関係をインストールします。

npm install @aws-sdk/client-cognito-identity @aws-sdk/credential-provider-cognito-identity

ステップ 5: React Native コードを記述する

次のコードをに追加します。App.js

import React, { useState } from "javascriptv3/example_code/reactnative/App"; import { Button, StyleSheet, Text, TextInput, View } from "react-native"; import { S3Client, CreateBucketCommand, DeleteBucketCommand, } from "@aws-sdk/client-s3"; import { CognitoIdentityClient } from "@aws-sdk/client-cognito-identity"; import { fromCognitoIdentityPool } from "@aws-sdk/credential-provider-cognito-identity"; const App = () => { const [bucketName, setBucketName] = useState(""); const [successMsg, setSuccessMsg] = useState(""); const [errorMsg, setErrorMsg] = useState(""); // Replace REGION with the appropriate AWS Region, such as 'us-east-1'. const region = "REGION"; const client = new S3Client({ region, credentials: fromCognitoIdentityPool({ client: new CognitoIdentityClient({ region }), // Replace IDENTITY_POOL_ID with an appropriate Amazon Cognito Identity Pool ID for, such as 'us-east-1:xxxxxx-xxx-4103-9936-b52exxxxfd6'. identityPoolId: "IDENTITY_POOL_ID", }), }); const createBucket = async () => { setSuccessMsg(""); setErrorMsg(""); try { await client.send(new CreateBucketCommand({ Bucket: bucketName })); setSuccessMsg(`Bucket "${bucketName}" created.`); } catch (e) { setErrorMsg(e); } }; const deleteBucket = async () => { setSuccessMsg(""); setErrorMsg(""); try { await client.send(new DeleteBucketCommand({ Bucket: bucketName })); setSuccessMsg(`Bucket "${bucketName}" deleted.`); } catch (e) { setErrorMsg(e); } }; return ( <View style={styles.container}> <Text style={{ color: "green" }}> {successMsg ? `Success: ${successMsg}` : ``} </Text> <Text style={{ color: "red" }}> {errorMsg ? `Error: ${errorMsg}` : ``} </Text> <View> <TextInput style={styles.textInput} onChangeText={(text) => setBucketName(text)} autoCapitalize={"none"} value={bucketName} placeholder={"Enter Bucket Name"} /> <Button backroundColor="#68a0cf" title="Create Bucket" onPress={createBucket} /> <Button backroundColor="#68a0cf" title="Delete Bucket" onPress={deleteBucket} /> </View> </View> ); }; const styles = StyleSheet.create({ container: { flex: 1, alignItems: "center", justifyContent: "center", }, }); export default App;

コードは最初に必要なReact、React Native、AWSSDK の依存関係です。

関数内アプリ:

  • S3Client オブジェクトが作成され、以前に作成した Amazon Cognito アイデンティティプールを使用して認証情報が指定されます。

  • メソッドcreateBucketおよびdeleteBucketは、それぞれ指定されたバケットを作成し、削除します。

  • React Native View には、ユーザーが Amazon S3 バケット名を指定するためのテキスト入力フィールドと、指定した Amazon S3 バケットを作成および削除するボタンが表示されます。

JavaScriptの完全なページはGitHub で

ステップ 6: 例の実行

例を実行するには、npmを使用してweb、ios、またはアンドロイドコマンドを実行します。

次に、実行する場合の出力を示します。iosMacOS でコマンドを実行します。

$ npm run ios > ReactNativeApp@0.0.1 ios /Users/trivikr/workspace/ReactNativeApp > react-native run-ios info Found Xcode workspace "ReactNativeApp.xcworkspace" info Launching iPhone 11 (iOS 14.2) info Building (using "xcodebuild -workspace ReactNativeApp.xcworkspace -configuration Debug -scheme ReactNativeApp -destination id=706C1A97-FA38-407D-AD77-CB4FCA9134E9") success Successfully built the app info Installing "/Users/trivikr/Library/Developer/Xcode/DerivedData/ReactNativeApp-cfhmsyhptwflqqejyspdqgjestra/Build/Products/Debug-iphonesimulator/ReactNativeApp.app" info Launching "org.reactjs.native.example.ReactNativeApp" success Successfully launched the app on the simulator

次に、実行する場合の出力を示します。androidMacOS でコマンドを実行します。

$ npm run android > ReactNativeApp@0.0.1 android > react-native run-android info Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag. Jetifier found 970 file(s) to forward-jetify. Using 12 workers... info Starting JS server... info Launching emulator... info Successfully launched emulator. info Installing the app... > Task :app:stripDebugDebugSymbols UP-TO-DATE Compatible side by side NDK version was not found. > Task :app:installDebug 02:18:38 V/ddms: execute: running am get-config 02:18:38 V/ddms: execute 'am get-config' on 'emulator-5554' : EOF hit. Read: -1 02:18:38 V/ddms: execute: returning Installing APK 'app-debug.apk' on 'Pixel_3a_API_30_x86(AVD) - 11' for app:debug 02:18:38 D/app-debug.apk: Uploading app-debug.apk onto device 'emulator-5554' 02:18:38 D/Device: Uploading file onto device 'emulator-5554' 02:18:38 D/ddms: Reading file permision of /Users/trivikr/workspace/ReactNativeApp/android/app/build/outputs/apk/debug/app-debug.apk as: rw-r--r-- 02:18:40 V/ddms: execute: running pm install -r -t "/data/local/tmp/app-debug.apk" 02:18:41 V/ddms: execute 'pm install -r -t "/data/local/tmp/app-debug.apk"' on 'emulator-5554' : EOF hit. Read: -1 02:18:41 V/ddms: execute: returning 02:18:41 V/ddms: execute: running rm "/data/local/tmp/app-debug.apk" 02:18:41 V/ddms: execute 'rm "/data/local/tmp/app-debug.apk"' on 'emulator-5554' : EOF hit. Read: -1 02:18:41 V/ddms: execute: returning Installed on 1 device. Deprecated Gradle features were used in this build, making it incompatible with Gradle 7.0. Use '--warning-mode all' to show the individual deprecation warnings. See https://docs.gradle.org/6.2/userguide/command_line_interface.html#sec:command_line_warnings BUILD SUCCESSFUL in 6s 27 actionable tasks: 2 executed, 25 up-to-date info Connecting to the development server... 8081 info Starting the app on "emulator-5554"... Starting: Intent { cmp=com.reactnativeapp/.MainActivity }

作成または削除するバケット名を入力し、バケットの作成またはバケットの削除。それぞれのコマンドが Amazon S3 に送信され、成功またはエラーメッセージが表示されます。

想定される拡張機能

このアプリケーションのバリエーションは次のとおりです。React Native App で JavaScript for SDK を使用する方法をさらに詳しく説明します。

  • Amazon S3 バケットをリストするボタンを追加し、リストされた各バケットの横に削除ボタンを追加します。

  • テキストオブジェクトをバケットに入れるボタンを追加します。

  • 認証済み IAM ロールを使用するために、Facebook や Amazon などの外部 ID プロバイダーと統合します。