AWS SDK for JavaScript V3 API 참조 가이드에서는 버전 3(V3)의 모든 API 작업에 대해 AWS SDK for JavaScript 자세히 설명합니다.

기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.

React Native 시작하기

이 자습서에서는 React Native를 사용하여 React Native CLI앱을 생성하는 방법을 보여줍니다.

이 자습서에서는 다음을 보여줍니다.

시나리오

Amazon S3는 웹의 어느 위치에서든 언제든지 원하는 양의 데이터를 저장하고 검색할 수 있는 클라우드 서비스입니다. React Native는 모바일 애플리케이션을 생성할 수 있는 개발 프레임워크입니다. 이 자습서에서는 Amazon S3에 연결하여 Amazon S3 버킷을 생성하고 삭제하는 React Native 앱을 생성하는 방법을 보여줍니다.

앱은 JavaScript APIs다음을 사용합니다SDK.

사전 필수 작업

이 단원에서는 이 자습서를 완료하는 데 필요한 최소 설정을 제공합니다. 이 내용을 전체 설정으로 간주해서는 안됩니다. 자세한 내용은 SDK 용 설정 JavaScript 단원을 참조하십시오.

1단계: Amazon Cognito 자격 증명 풀 생성

이 연습에서는 Amazon Cognito 자격 증명 풀을 생성하고 사용하여 Amazon S3 서비스용 앱에 대한 인증되지 않은 액세스를 제공합니다. 자격 증명 풀을 생성하면 두 AWS Identity and Access Management (IAM) 개의 역할이 생성됩니다. 하나는 자격 증명 공급자가 인증한 사용자를 지원하는 역할이고 다른 하나는 인증되지 않은 게스트 사용자를 지원하는 역할입니다.

이 연습에서는 인증되지 않은 사용자 역할만 사용해 작업하여 작업에 집중할 수 있도록 합니다. 자격 증명 공급자 및 인증된 사용자에 대한 지원은 나중에 통합할 수 있습니다.

Amazon Cognito 자격 증명 풀을 생성한 후에는 React Native 앱에 필요한 Amazon S3에 대한 권한을 추가할 준비가 되었습니다.

2단계: 생성된 IAM 역할에 정책 추가

Amazon S3에 대한 브라우저 스크립트 액세스를 활성화하여 Amazon S3 버킷을 생성하고 삭제하려면 Amazon Cognito 자격 증명 풀에 대해 생성된 인증되지 않은 IAM 역할을 사용합니다. 이렇게 하면 해당 역할에 IAM 정책을 추가해야 합니다. IAM 역할에 대한 자세한 내용은 IAM 사용 설명서의 AWS 서비스에 권한을 위임할 역할 생성을 참조하세요.

Amazon Cognito 자격 증명 풀을 생성하고 인증되지 않은 사용자의 IAM 역할에 Amazon S3에 대한 권한을 추가하면 앱을 빌드할 준비가 된 것입니다.

3단계:를 사용하여 앱 생성 create-react-native-app

다음 명령을 실행하여 React Native 앱을 생성합니다.

npx react-native init ReactNativeApp --npm

4단계: Amazon S3 패키지 및 기타 종속성 설치

프로젝트의 디렉터리 내에서 다음 명령을 실행하여 Amazon S3 패키지를 설치합니다.

npm install @aws-sdk/client-s3

이 명령은 프로젝트에 Amazon S3 패키지를 설치하고 Amazon S3를 프로젝트 종속성으로 나열package.json하도록 업데이트합니다. https://www.npmjs.com/npm 웹 사이트에서 “@aws-sdk”를 검색하여이 패키지에 대한 정보를 찾을 수 있습니다.

이러한 패키지와 연결된 코드는 프로젝트의 node_modules 하위 디렉터리에 설치됩니다.

Node.js 패키지 설치에 대한 자세한 내용은 npm(Node.js 패키지 관리자) 웹 사이트에서 로컬로 패키지 다운로드 및 설치 및 Node.js 모듈 생성을 참조하세요. https://docs.npmjs.com/creating-node-js-modules https://www.npmjs.com/ 다운로드 및 설치에 대한 자세한 내용은 섹션을 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 및 리전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을 사용하여 webios, 또는 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 } 

생성 또는 삭제할 버킷 이름을 입력하고 버킷 생성 또는 버킷 삭제를 클릭합니다. 해당 명령이 Amazon S3로 전송되고 성공 또는 오류 메시지가 표시됩니다.

가능한 개선 사항

다음은 React Native 앱에서 SDK for를 사용하여 자세히 탐색하는 데 사용할 수 JavaScript 있는이 애플리케이션의 변형입니다.