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

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

React Nativeを開始します。

このチュートリアルでは、ReactNative CLIを使用して React Native アプリを作成する方法を示します。

このチュートリアルでは、次のことを示します。

シナリオ

Amazon S3は、ウェブ上のどこからでも、いつでも、任意の量のデータを保存および取得できるようにするクラウドサービスです。React Native は、モバイルアプリケーションを作成して有効にするデベロップメントフレームワークです。このチュートリアルでは、AmazonS3に接続してAmazonS3バケットを作成および削除するReactNativeアプリを作成する方法を示します。

アプリケーションは 次のSDK for JavaScript API を使用します。

前提条件タスク

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

ステップ 1: Amazon Cognito アイデンティティプールを作成

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

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

Amazon Cognito アイデンティティプールを作成したら、React Native appにより必要な Amazon S3 権限を追加する準備が整います。

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

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

Amazon Cognito アイデンティティプールを作成した後、非認証ユーザーの IAM ロールに Amazon　S3の許可を追加すると、アプリを構築する準備が整います。

ステップ 3: Create-react-native-app を使用してアプリケーションを作成します

次のコマンドを実行してReact Native Appを作成します。

npx react-native init ReactNativeApp --npm

ステップ 4: Amazon S3パッケージとその他の依存関係をインストールします

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

npm install @aws-sdk/client-s3

このコマンドはプロジェクトに Amazon S3 パッケージをインストールして、package.jsonを更新し、 Amazon S3 をプロジェクトの依存関係として一覧表示します。このパッケージに関する情報は、https://www.npmjs.com/npmウェブサイトで「＠aws-sdk」と検索すると見つかります。

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

Node.js パッケージのインストールの詳細については、npm (Node.js パッケージマネージャー) ウェブサイトのパッケージをローカルでダウンロードしてインストールおよび 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.tsxに追加します。identityPoolId と region を、Amazon S3 バケットが作成される ID プール ID とリージョンに置き換えます。

import React, { useCallback, useState } from "react";
import { Button, StyleSheet, Text, TextInput, View } from "react-native";
import "react-native-get-random-values";
import "react-native-url-polyfill/auto";

import {
  S3Client,
  CreateBucketCommand,
  DeleteBucketCommand,
} from "@aws-sdk/client-s3";
import { fromCognitoIdentityPool } from "@aws-sdk/credential-providers";

const client = new S3Client({
  // The AWS Region where the Amazon Simple Storage Service (Amazon S3) bucket will be created. Replace this with your Region.
  region: "us-east-1",
  credentials: fromCognitoIdentityPool({
    // Replace the value of 'identityPoolId' with the ID of an Amazon Cognito identity pool in your Amazon Cognito Region.
    identityPoolId: "us-east-1:edbe2c04-7f5d-469b-85e5-98096bd75492",
    // Replace the value of 'region' with your Amazon Cognito Region.
    clientConfig: { region: "us-east-1" },
  }),
});

enum MessageType {
  SUCCESS = 0,
  FAILURE = 1,
  EMPTY = 2,
}

const App = () => {
  const [bucketName, setBucketName] = useState("");
  const [msg, setMsg] = useState<{ message: string; type: MessageType }>({
    message: "",
    type: MessageType.EMPTY,
  });

  const createBucket = useCallback(async () => {
    setMsg({ message: "", type: MessageType.EMPTY });

    try {
      await client.send(new CreateBucketCommand({ Bucket: bucketName }));
      setMsg({
        message: `Bucket "${bucketName}" created.`,
        type: MessageType.SUCCESS,
      });
    } catch (e) {
      console.error(e);
      setMsg({
        message: e instanceof Error ? e.message : "Unknown error",
        type: MessageType.FAILURE,
      });
    }
  }, [bucketName]);

  const deleteBucket = useCallback(async () => {
    setMsg({ message: "", type: MessageType.EMPTY });

    try {
      await client.send(new DeleteBucketCommand({ Bucket: bucketName }));
      setMsg({
        message: `Bucket "${bucketName}" deleted.`,
        type: MessageType.SUCCESS,
      });
    } catch (e) {
      setMsg({
        message: e instanceof Error ? e.message : "Unknown error",
        type: MessageType.FAILURE,
      });
    }
  }, [bucketName]);

  return (
    <View style={styles.container}>
      {msg.type !== MessageType.EMPTY && (
        <Text
          style={
            msg.type === MessageType.SUCCESS
              ? styles.successText
              : styles.failureText
          }
        >
          {msg.message}
        </Text>
      )}
      <View>
        <TextInput
          onChangeText={(text) => setBucketName(text)}
          autoCapitalize={"none"}
          value={bucketName}
          placeholder={"Enter Bucket Name"}
        />
        <Button color="#68a0cf" title="Create Bucket" onPress={createBucket} />
        <Button color="#68a0cf" title="Delete Bucket" onPress={deleteBucket} />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  successText: {
    color: "green",
  },
  failureText: {
    color: "red",
  },
});

export default App;

コードは、まず必要な React、React Native、および AWS SDK の依存関係をインポートします。

機能アプリ内部：

JavaScriptの全ページはこのGitHubで公開されています。

ステップ6。例を実行する

この例を実行するには、npm を使用して web、ios、または android コマンドを実行します。

これは、macOSで実行中のiosコマンドの出力例です。

$ npm run ios

> [email protected] 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  

これは、macOSで実行中のandroidコマンドの出力例です。

$ npm run android

> [email protected] 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 permission 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 } 

作成または削除したいバケット名を入力し、Create Bucket（バケットの作成）またはDelete Bucket（バケットの削除）のいずれかをクリックします。それぞれのコマンドが Amazon S3 に送信され、成功またはエラーメッセージが表示されます。

想定される拡張機能

これは、React Native app のSDK for JavaScript を使用してさらに検索するために使用できる、このアプリケーションのバリエーションを示します。