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

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

React Nativeを開始します。

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

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

シナリオ

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

アプリは以下SDKを使用します JavaScript APIs。

前提条件タスク

このセクションでは、このチュートリアルを完了するために必要な最小限のセットアップを提供します。これを完全なセットアップであるとは見なさないでください。詳細については、「SDK の をセットアップする 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 ID プールを作成し、認証されていないユーザーの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 用の をインストールする JavaScript。

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

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

ステップ 5: React Native コードを書き込みする。

次のコードをApp.tsxに追加します。identityPoolId と を、Amazon S3 バケットが作成される ID プール ID とリージョンregionに置き換えます。

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

> 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  

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

$ 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 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 アプリ JavaScript で SDK for を使用してさらに詳しく知るために使用できる、このアプリケーションのバリエーションを次に示します。