[AWS SDK for JavaScript V3 API リファレンスガイド](https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/)では、 AWS SDK for JavaScript バージョン3 (V3) のすべての API オペレーションについて詳しく説明します。
翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。
# AWS SDK for JavaScript の使用を開始する
AWS SDK for JavaScript は、ブラウザまたは Node.js 環境でウェブサービスへのアクセスを提供します。このセクションでは、これらの各 JavaScript 環境で AWS SDK for JavaScript を使用する方法を示す演習を開始します。
**Topics**
+ [を使用した SDK 認証 AWS](getting-your-credentials.md)
+ [Node.js での開始方法](getting-started-nodejs.md)
+ [ブラウザでの開始方法](getting-started-browser.md)
+ [React Nativeを開始します。](getting-started-react-native.md)
# を使用した SDK 認証 AWS
で開発 AWS するときに、コードが で認証される方法を確立する必要があります AWS のサービス。 AWS リソースへのプログラムによるアクセスは、環境と利用可能な AWS アクセスに応じてさまざまな方法で設定できます。
認証方法を選択して SDK 用に設定するには、*AWS SDK とツールのリファレンスガイド*の「[認証とアクセス](https://docs.aws.amazon.com/sdkref/latest/guide/access.html)」を参照してください。
ローカルで開発中で、雇用主がセットアップするための認証方法を与えられていない新しいユーザーをお勧めします AWS IAM アイデンティティセンター。この方法には、設定を容易に AWS CLI するために をインストールすることや、 AWS アクセスポータルに定期的にサインインすることが含まれます。この方法を選択した場合、*AWS SDK とツールのリファレンスガイド*の [IAM Identity Center 認証](https://docs.aws.amazon.com/sdkref/latest/guide/access-sso.html)の手順を完了したあと、環境には次の要素が含まれるはずです。
+ アプリケーションを実行する前に AWS アクセスポータルセッションを開始 AWS CLIするために使用する 。
+ SDK から参照できる設定値のセットを含む `[default]` プロファイルがある[共有 AWS`config` ファイル](https://docs.aws.amazon.com/sdkref/latest/guide/file-format.html)。このファイルの場所を確認するには、*AWS SDK とツールのリファレンスガイド*の「[共有ファイルの場所](https://docs.aws.amazon.com/sdkref/latest/guide/file-location.html)」を参照してください。
+ 共有 `config` ファイルは [https://docs.aws.amazon.com/sdkref/latest/guide/feature-region.html](https://docs.aws.amazon.com/sdkref/latest/guide/feature-region.html) 設定を設定します。これにより、SDK AWS リージョン が AWS リクエストに使用するデフォルトが設定されます。このリージョンは、使用するリージョンが指定されていない SDK サービスリクエストに使用されます。
+ SDK は、リクエストを AWSに送信する前に、プロファイルの [SSO トークンプロバイダー設定](https://docs.aws.amazon.com/sdkref/latest/guide/feature-sso-credentials.html#feature-sso-credentials-profile)を使用して認証情報を取得します。`sso_role_name` 値は、IAM Identity Center アクセス許可セットに接続された IAM ロールであり、アプリケーションで AWS のサービス 使用されている へのアクセスを許可します。
次のサンプル `config` ファイルは、SSO トークンプロバイダー設定で設定されたデフォルトプロファイルを示しています。プロファイルの `sso_session` 設定は、指定された [`sso-session` セクション](https://docs.aws.amazon.com/sdkref/latest/guide/file-format.html#section-session)を参照します。`sso-session` セクションには、 AWS アクセスポータルセッションを開始するための設定が含まれています。
```
[default]
sso_session = my-sso
sso_account_id = 111122223333
sso_role_name = SampleRole
region = us-east-1
output = json
[sso-session my-sso]
sso_region = us-east-1
sso_start_url = https://provided-domain.awsapps.com/start
sso_registration_scopes = sso:account:access
```
AWS SDK for JavaScript v3 では、IAM Identity Center 認証を使用するために、アプリケーションに追加のパッケージ ( `SSO`や など`SSOOIDC`) を追加する必要はありません。
この認証情報プロバイダーを明示的に使用する方法の詳細については、npm (Node.js パッケージマネージャー) ウェブサイトの [https://www.npmjs.com/package/@aws-sdk/credential-providers#fromsso](https://www.npmjs.com/package/@aws-sdk/credential-providers#fromsso) を参照してください。
## AWS アクセスポータルセッションを開始する
アクセスするアプリケーションを実行する前に AWS のサービス、SDK が IAM Identity Center 認証を使用して認証情報を解決するためのアクティブな AWS アクセスポータルセッションが必要です。設定したセッションの長さによっては、アクセスが最終的に期限切れになり、SDK で認証エラーが発生します。 AWS アクセスポータルにサインインするには、 で次のコマンドを実行します AWS CLI。
```
aws sso login
```
ガイダンスに従い、デフォルトのプロファイルを設定している場合は、`--profile` オプションを指定してコマンドを呼び出す必要はありません。SSO トークンプロバイダー設定で名前付きプロファイルを使用している場合、コマンドは `aws sso login --profile named-profile` です。
アクティブなセッションが既にあるかどうかをオプションでテストするには、次の AWS CLI コマンドを実行します。
```
aws sts get-caller-identity
```
セッションがアクティブな場合、このコマンドへの応答により、共有 `config` ファイルに設定されている IAM Identity Center アカウントとアクセス許可のセットが報告されます。
**注記**
既にアクティブな AWS アクセスポータルセッションがあり、 を実行している場合は`aws sso login`、認証情報を指定する必要はありません。
サインインプロセスにより、データ AWS CLI へのアクセスを許可するように求められる場合があります。 AWS CLI は SDK for Python 上に構築されているため、アクセス許可メッセージには`botocore`名前のバリエーションが含まれている可能性があります。
## コンソールのログイン認証情報の使用
既存の AWS マネジメントコンソールのサインイン認証情報を使用して、 AWS サービスにプログラムでアクセスできます。ブラウザベースの認証フローの後、 は CLI や AWS SDK for JavaScript AWS などのローカル開発ツールで動作する一時的な認証情報 AWS を生成します。この機能は、 AWS CLI 認証情報の設定と管理のプロセスを簡素化します。開始方法については、「[Login for AWS local development using console credentials](https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-sign-in.html)」の手順に従います。
**aws login** コマンドを実行すると、アクティブなコンソールセッションから選択することも、ブラウザベースの認証フローを使用してサインインすることもできます。これにより、一時的な認証情報が自動的に生成されます。 AWS SDK for JavaScript は、有効期限の 5 分前に認証情報を自動的に更新し、認証情報の各セットは最大 12 時間有効です。詳細については、「[https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/Package/-aws-sdk-credential-providers/#fromlogincredentials](https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/Package/-aws-sdk-credential-providers/#fromlogincredentials)」を参照してください。
## 詳細認証情報
人間のユーザーとは、別名*人的 ID* と呼ばれ、人、管理者、デベロッパー、オペレーター、およびアプリケーションのコンシューマーを指します。 AWS 環境とアプリケーションにアクセスするには、ID が必要です。組織のメンバーである人間のユーザー、つまり、ユーザーや開発者は、*ワークフォースアイデンティティ*と呼ばれます。
アクセス時に一時的な認証情報を使用します AWS。人間のユーザーの ID プロバイダーを使用して、一時的な認証情報を提供するロールを引き受けることで、 AWS アカウントへのフェデレーションアクセスを提供できます。一元的なアクセス管理を行うには、 AWS IAM アイデンティティセンター (IAM Identity Center) を使用して、ご自分のアカウントへのアクセスと、それらのアカウント内でのアクセス許可を管理することをお勧めします。その他の代替案については、以下を参照してください。
+ ベストプラクティスの詳細については、*IAM ユーザーガイド*の「[IAM でのセキュリティのベストプラクティス](https://docs.aws.amazon.com/IAM/latest/UserGuide/best-practices.html)」を参照してください。
+ 短期 AWS 認証情報を作成するには、*IAM ユーザーガイド*の[「一時的なセキュリティ認証情報](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_credentials_temp.html)」を参照してください。
+ 他の AWS SDK for JavaScript V3 認証情報プロバイダーの詳細については、「 SDK およびツールリファレンスガイド」の[「標準化された認証情報プロバイダー](https://docs.aws.amazon.com/sdkref/latest/guide/standardized-credentials.html)」を参照してください。 *AWS SDKs *
# Node.js での開始方法
このガイドでは、NPM パッケージを初期化し、パッケージにサービスクライアントを追加し、JavaScript SDK を使用してサービスアクションを呼び出す方法を説明します。
## シナリオ
**次の処理を実行するメインファイルを 1 つ含む、新しい NPM パッケージを作成します。**
+ Amazon Simple Storage Service バケットの作成
+ Amazon S3 バケットへのオブジェクトの配置
+ Amazon S3 バケット内のオブジェクトの読み取り
+ ユーザーがリソースを削除したいかどうかの確認
## 前提条件
例を実行するには、次の手順を行います。
+ SDK 認証を設定します。詳細については、「[を使用した SDK 認証 AWS](getting-your-credentials.md)」を参照してください。
+ 開発用の [Node.js](https://nodejs.org/en/download) のアクティブ LTS バージョンを使用して Node.js. AWS recommends をインストールします。
## ステップ 1: パッケージ構造を設定してクライアントパッケージをインストールする
パッケージ構造を設定し、クライアントパッケージをインストールするには、次の手順を実行します。
1. 新しいフォルダ `nodegetstarted` を作成して、パッケージを格納します。
1. コマンドラインから、新しいフォルダに移動します。
1. 次のコマンドを実行して、デフォルト `package.json` ファイルを作成します。
```
npm init -y
```
1. 次のコマンドを実行して、Amazon S3 クライアントパッケージをインストールします。
```
npm i @aws-sdk/client-s3
```
1. `"type": "module"` を `package.json` ファイルに追加します。これにより、最新の ESM 構文を使用するように Node.js に指示します。最終的な `package.json` は次のようになります。
```
{
"name": "example-javascriptv3-get-started-node",
"version": "1.0.0",
"description": "This guide shows you how to initialize an NPM package, add a service client to your package, and use the JavaScript SDK to call a service action.",
"main": "index.js",
"scripts": {
"test": "vitest run **/*.unit.test.js"
},
"author": "Your Name",
"license": "Apache-2.0",
"dependencies": {
"@aws-sdk/client-s3": "^3.420.0"
},
"type": "module"
}
```
## ステップ 2: 必要なインポートと SDK コードを追加する
`nodegetstarted` フォルダー内の `index.js` という名前のファイルに、次のコードを追加します。
```
// This is used for getting user input.
import { createInterface } from "node:readline/promises";
import {
S3Client,
PutObjectCommand,
CreateBucketCommand,
DeleteObjectCommand,
DeleteBucketCommand,
paginateListObjectsV2,
GetObjectCommand,
} from "@aws-sdk/client-s3";
export async function main() {
// A region and credentials can be declared explicitly. For example
// `new S3Client({ region: 'us-east-1', credentials: {...} })` would
//initialize the client with those settings. However, the SDK will
// use your local configuration and credentials if those properties
// are not defined here.
const s3Client = new S3Client({});
// Create an Amazon S3 bucket. The epoch timestamp is appended
// to the name to make it unique.
const bucketName = `test-bucket-${Date.now()}`;
await s3Client.send(
new CreateBucketCommand({
Bucket: bucketName,
}),
);
// Put an object into an Amazon S3 bucket.
await s3Client.send(
new PutObjectCommand({
Bucket: bucketName,
Key: "my-first-object.txt",
Body: "Hello JavaScript SDK!",
}),
);
// Read the object.
const { Body } = await s3Client.send(
new GetObjectCommand({
Bucket: bucketName,
Key: "my-first-object.txt",
}),
);
console.log(await Body.transformToString());
// Confirm resource deletion.
const prompt = createInterface({
input: process.stdin,
output: process.stdout,
});
const result = await prompt.question("Empty and delete bucket? (y/n) ");
prompt.close();
if (result === "y") {
// Create an async iterator over lists of objects in a bucket.
const paginator = paginateListObjectsV2(
{ client: s3Client },
{ Bucket: bucketName },
);
for await (const page of paginator) {
const objects = page.Contents;
if (objects) {
// For every object in each page, delete it.
for (const object of objects) {
await s3Client.send(
new DeleteObjectCommand({ Bucket: bucketName, Key: object.Key }),
);
}
}
}
// Once all the objects are gone, the bucket can be deleted.
await s3Client.send(new DeleteBucketCommand({ Bucket: bucketName }));
}
}
// Call a function if this file was run directly. This allows the file
// to be runnable without running on import.
import { fileURLToPath } from "node:url";
if (process.argv[1] === fileURLToPath(import.meta.url)) {
main();
}
```
サンプルコードは、[このGitHub](https://github.com/awsdocs/aws-doc-sdk-examples/blob/main/javascriptv3/example_code/nodegetstarted/index.js)で見つけることができます。
## ステップ 3: 例を実行する
**注記**
必ずサインインしてください。IAM Identity Center を使用して認証する場合は、 コマンドを使用して AWS CLI `aws sso login`サインインすることを忘れないでください。
1. `node index.js` を実行します。
1. バケットを空にして削除するかどうかを選択します。
1. バケットを削除しない場合は、手動で空にして後で削除してください。
# ブラウザでの開始方法
このセクションでは、ブラウザで AWS SDK for JavaScript のバージョン 3 (V3) を実行する方法を示す例を示します。
**注記**
ブラウザでV3を実行することは、バージョン2 (V2)とは若干異なります。詳細については、「[V3 でブラウザーを使用](welcome.md#v3_browsers)」を参照してください。
AWS SDK for JavaScript の (V3) を使用するその他の例については、「」を参照してください[SDK for JavaScript (v3) のコード例](javascript_code_examples.md)。
**このウェブアプリケーションの例は、以下を示します。**
+ 認証に Amazon Cognito を使用して AWS サービスにアクセスする方法。
+ AWS Identity and Access Management (IAM) ロールを使用して Amazon Simple Storage Service (Amazon S3) バケット内のオブジェクトのリストを読み取る方法。
**注記**
この例では、認証 AWS IAM アイデンティティセンター に を使用しません。
## シナリオ
Amazon S3 は、業界をリードするスケーラビリティ、データ可用性、セキュリティ、パフォーマンスを提供するオブジェクトストレージサービスです。Amazon S3 を使用して、バケットと呼ばれるコンテナ内にデータをオブジェクトとして保存できます。Amazon S3 の詳細については、「[Amazon S3 ユーザーガイド](https://docs.aws.amazon.com/AmazonS3/latest/userguide/)」を参照してください。
この例では、Amazon S3 バケットから読み取る IAM ロールを引き受けるウェブアプリケーションを設定して実行する方法を示します。この例では、React フロントエンドライブラリと Vite フロントエンドツールを使用して JavaScript 開発環境を提供します。ウェブアプリは Amazon Cognito ID プールを使用して、 AWS サービスへのアクセスに必要な認証情報を提供します。含まれているコード例は、ウェブアプリケーションで AWS SDK for JavaScript をロードして使用するための基本的なパターンを示しています。
## ステップ 1: Amazon Cognito アイデンティティプールと IAM ロールを作成する
この演習では、Amazon Cognito アイデンティティプールを作成して使用し、Amazon S3 サービスのウェブアプリケーションで未認証のアクセスを提供します。ID プールを作成すると、認証されていないゲストユーザーをサポートする AWS Identity and Access Management (IAM) ロールも作成されます。この例では、タスクに集中し続けるために、認証されていないユーザーロールのみを使用します。後で ID プロバイダーと認証済みユーザーのサポートを統合できます。Amazon Cognito アイデンティティプールの追加についての詳細は、「*Amazon Cognito デベロッパーガイド*」の「[チュートリアル: ID プールの作成](https://docs.aws.amazon.com/cognito/latest/developerguide/tutorial-create-identity-pool.html)」を参照してください。
**Amazon Cognito アイデンティティプールおよび関連付けられた IAM ロールを作成するには**
1. にサインイン AWS マネジメントコンソール し、[https://console.aws.amazon.com/cognito/](https://console.aws.amazon.com/cognito/) で Amazon Cognito コンソールを開きます。
1. 左のナビゲーションペインで、**[ID プール]** を選択します。
1. **[ID プールを作成]** を選択します。
1. **[ID プールの信頼を設定]** で、ユーザー認証に **[ゲストアクセス]** を選択します。
1. **[アクセス許可を設定]** で、**[新しい IAM ロールの作成]** を選択し、**[IAM ロール名]** に名前 (*getStartedRole* など) を入力します。
1. **[プロパティを設定]** で、**[ID プール名]** に名前 (*getStartedPool* など) を入力します。
1. **[確認および作成]** で、新しいアイデンティティプールに対して行った選択を確認します。**[編集]** を選択してウィザードに戻り、設定を変更します。終了したら、**[ID プールの作成]** を選択します。
1. **[ID プールの ID]** と、新しく作成した Amazon Cognito アイデンティティプールの **[リージョン]** を書き留めます。[ステップ 4: ブラウザコードを設定する](#getting-started-browser-create-html) で *IDENTITY\$1POOL\$1ID* および *REGION* を置換するには、これらの値が必要です。
Amazon Cognito アイデンティティプールを作成したら、ウェブアプリケーションにより必要な Amazon S3 権限を追加する準備が整います。
## ステップ 2: 作成した IAM ロールにポリシーを追加する
ウェブアプリケーション内の Amazon S3 バケットへのアクセスを有効にするには、Amazon Cognito アイデンティティプール (*getStartedPool* など) 用に作成された非認証の IAM ロール (*getStartedRole* など) を使用します。これを進めるには、IAM ポリシーをロールにアタッチする必要があります。IAM ロールの変更の詳細については、「*IAM ユーザーガイド*」の「[ロールのアクセス許可ポリシーの変更](https://docs.aws.amazon.com/IAM/latest/UserGuide/roles-managingrole-editing-console.html#roles-modify_permissions-policy)」を参照してください。
**Amazon S3ポリシーを、非認証ユーザーに関連付けられているIAM ロールに追加するには**
1. にサインイン AWS マネジメントコンソール し、[https://console.aws.amazon.com/iam/](https://console.aws.amazon.com/iam/) で IAM コンソールを開きます。
1. 左のナビゲーションペインで、**[Roles (ロール)]** を選択してください。
1. 変更するロールの名前 (*getStartedRole* など) を選択し、**[アクセス許可]** タブを選択します。
1. **[アクセス許可を追加]**、**[ポリシーをアタッチ]** の順に選択します。
1. このロールの **[アクセス許可を追加]** ページで、**AmazonS3ReadOnlyAccess** を検索してチェックボックスをオンにします。
**注記**
このプロセスを使用して、任意の AWS サービスへのアクセスを有効にできます。
1. [**Add permissions (許可の追加)**] を選択します。
Amazon Cognito アイデンティティプールを作成した後、非認証ユーザーの IAM ロールに Amazon S3の許可を追加すると、Amazon S3 バケットを追加し設定する準備が整います。
## ステップ 3: Amazon S3 バケットとオブジェクトを追加する
このステップでは、例の Amazon S3 バケットとオブジェクトを追加します。また、バケットの Cross-Origin Resource Sharing (CORS) を有効にします。Amazon S3 バケットとオブジェクトの作成についての詳細は、「*Amazon S3 ユーザーガイド*」の「[Amazon S3 の開始方法](https://docs.aws.amazon.com/AmazonS3/latest/userguide/GetStartedWithS3.html)」を参照してください。
**CORS でAmazon S3 バケットとオブジェクトを追加するには**
1. にサインイン AWS マネジメントコンソール し、[https://console.aws.amazon.com/s3/](https://console.aws.amazon.com/s3/) で Amazon S3 コンソールを開きます。
1. 左側のナビゲーションペインで、**[バケット]** を選択してから、**[バケットを作成]** を選択します。
1. [バケットの命名規則](https://docs.aws.amazon.com/AmazonS3/latest/userguide/bucketnamingrules.html) (*getstartedbucket* など) に準拠したバケット名を入力し、**[バケットを作成]** を選択します。
1. 作成したバケットを選択し、**[オブジェクト]** タブを選択します。次に、**アップロード**を選択します。
1. [**Files and Folders (ファイルとフォルダ)**] で、[**Add files (ファイルを追加)**] を選択します。
1. アップロードするファイルを選択し、続いて **[オープン]** を選択します。次に、**[アップロード]** を選択して、バケットへのオブジェクトのアップロードを完了します。
1. 次に、バケットの **[アクセス許可]** タブを選択し、**[Cross-Origin Resource Sharing (CORS)]** セクションで **[編集]** を選択します。次の JSON を入力します。
```
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"GET"
],
"AllowedOrigins": [
"*"
],
"ExposeHeaders": []
}
]
```
1. **[Save changes]** (変更の保存) をクリックします。
Amazon S3 バケットを追加してオブジェクトを追加したら、ブラウザコードを設定する準備が整います。
## ステップ 4: ブラウザコードを設定する
サンプルアプリケーションは単一ページの React アプリケーションで構成されています。この例のファイルは、[この GitHub](https://github.com/awsdocs/aws-doc-sdk-examples/tree/main/javascriptv3/example_code/web/s3/list-objects) で見つけることができます。
**サンプルアプリケーションを設定するには**
1. [Node.js](https://nodejs.org/en/download) をインストールします。
1. コマンドラインから、[AWS のコードサンプルリポジトリ](https://github.com/awsdocs/aws-doc-sdk-examples/)をクローンします。
```
git clone --depth 1 https://github.com/awsdocs/aws-doc-sdk-examples.git
```
1. サンプルアプリケーションに移動します。
```
cd aws-doc-sdk-examples/javascriptv3/example_code/web/s3/list-objects/
```
1. 次のコマンドを実行して、必要なパッケージをインストールします。
```
npm install
```
1. 次に、テキストエディタで `src/App.tsx` を開き、次の処理を実行します。
+ *YOUR\$1IDENTITY\$1POOL\$1ID* を [ステップ 1: Amazon Cognito アイデンティティプールと IAM ロールを作成する](#getting-started-browser-create-identity-pool) で書き留めた Amazon Cognito アイデンティティプール ID に置き換えます。
+ リージョンの値を Amazon S3 バケットと Amazon Cognito アイデンティティプールに割り当てられたリージョンに置き換えます。両方のサービスのリージョンは同じでなければならないことに注意してください (*us-east-2* など)。
+ *bucket-name* を、[ステップ 3: Amazon S3 バケットとオブジェクトを追加する](#getting-started-browser-create-s3-bucket) で作成したバケットの名前に置き換えます。
テキストを置き換えたら、`App.tsx` ファイルを保存します。これで、ウェブアプリケーションを実行する準備ができました。
## ステップ 5: 例を実行する
**サンプルアプリケーションを実行するには**
1. コマンドラインから、サンプルアプリケーションに移動します。
```
cd aws-doc-sdk-examples/javascriptv3/example_code/web/s3/list-objects/
```
1. コマンドラインから、以下のコマンドを実行します。
```
npm run dev
```
Vite 開発環境が実行され、次のメッセージが表示されます。
```
VITE v4.3.9 ready in 280 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h to show help
```
1. ウェブブラウザで上記の URL (例: http://localhost:5173) に移動します。サンプルアプリケーションでは、Amazon S3 バケット内のオブジェクトファイル名のリストが表示されます。
## クリーンアップ
このチュートリアルで作成されたリソースをクリーンアップするには、以下を行います。
+ [Amazon S3 コンソール](https://console.aws.amazon.com/s3/)で、作成されたオブジェクトとバケット (*getstartedbucket* など) をすべて削除します。
+ [IAM コンソール](https://console.aws.amazon.com/iam/home#/roles)で、ロール名 (*getStartedRole* など) を削除します。
+ [Amazon Cognito コンソール](https://console.aws.amazon.com/cognito/home#/identity)でアイデンティティプール名 (*getStartedPool* など) を削除します。
# React Nativeを開始します。
このチュートリアルでは、[ReactNative CLI](https://reactnative.dev/docs/environment-setup)を使用して React Native アプリを作成する方法を示します。
![\[JavaScript code example that applies to React Native.\]](http://docs.aws.amazon.com/ja_jp/sdk-for-javascript/v3/developer-guide/images/browsericon.png)
**このチュートリアルでは、次のことを示します。**
+ プロジェクトが使用する AWS SDK for JavaScript バージョン 3 (V3) モジュールをインストールして含める方法。
+ 「Amazon Simple Storage Service (Amazon S3)」に接続して Amazon S3 バケットを作成および削除するコードを記述する方法。
## シナリオ
Amazon S3は、ウェブ上のどこからでも、いつでも、任意の量のデータを保存および取得できるようにするクラウドサービスです。React Native は、モバイルアプリケーションを作成して有効にするデベロップメントフレームワークです。このチュートリアルでは、AmazonS3に接続してAmazonS3バケットを作成および削除するReactNativeアプリを作成する方法を示します。
アプリケーションは、次の AWS SDK for JavaScript APIs を使用します。
+ [https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/client/cognito-identity/](https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/client/cognito-identity/) コンストラクタ
+ [https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/client/s3/](https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/client/s3/) コンストラクタ
## 前提条件タスク
**注記**
他のチュートリアルまたは既存の設定で次のステップのいずれかをすでに完了している場合は、これらのステップをスキップします。
このセクションでは、このチュートリアルを完了するために必要な最小限のセットアップを提供します。これを完全なセットアップであるとは見なさないでください。詳細については、「[SDK for JavaScript のセットアップ](setting-up.md)」を参照してください。
+ 以下のツールをインストールします。
+ [npm](https://docs.npmjs.com/getting-started/)
+ [Node.js](https://nodejs.org/en/download/)
+ iOS でテストしている場合は [Xcode](https://developer.apple.com/xcode/)。
+ Android でテストしている場合は [Android Studio](https://developer.android.com/studio/)。
+ [React Native 開発環境](https://reactnative.dev/docs/environment-setup)のセットアップ
+ これらの Node TypeScript の例を実行するようにプロジェクト環境を設定し、必要な AWS SDK for JavaScript とサードパーティーモジュールをインストールします。「[GitHub](https://github.com/awsdocs/aws-doc-sdk-examples/blob/main/javascriptv3/example_code/nodegetstarted/README.md)」の指示に従います。
+ AWS サービスを使用して開発 AWS するときに、コードが で認証される方法を確立する必要があります。詳細については、「[を使用した SDK 認証 AWS](getting-your-credentials.md)」を参照してください。
**注記**
この例の IAM ロールは、**AmazonS3FullAccess** アクセス許可を使用するように設定する必要があります。
## ステップ 1: Amazon Cognito アイデンティティプールを作成
この演習では、Amazon Cognito アイデンティティプールを作成して使用し、Amazon S3 サービスのアプリで未認証のアクセスを提供します。ID プールを作成すると、2 つの AWS Identity and Access Management (IAM) ロールも作成されます。1 つは ID プロバイダーによって認証されたユーザーをサポートするロール、もう 1 つは認証されていないゲストユーザーをサポートするロールです。
この演習では、タスクに集中し続けるために、認証されていないユーザーロールのみを使用します。後で ID プロバイダーと認証済みユーザーのサポートを統合できます。
**Amazon Cognito アイデンティティプールを作成するには**
1. にサインイン AWS マネジメントコンソール し、Amazon Web Services Console で Amazon Cognito [コンソール](https://console.aws.amazon.com/cognito/)を開きます。
1. コンソールの開始ページで、[**ID プール**] を選択します。
1. 次のページで、[**新しい ID プールの作成**] を選択します。
**注記**
他のアイデンティティプールがない場合、Amazon Cognito コンソールはこのページをスキップし、代わりに次のページを開きます。
1. **[ID プールの信頼を設定]** で、ユーザー認証に **[ゲストアクセス]** を選択します。
1. **[アクセス許可を設定]** で、**[新しい IAM ロールの作成]** を選択し、**[IAM ロール名]** に名前 (*getStartedReactRole* など) を入力します。
1. **[プロパティを設定]** で、**[ID プール名]** に名前 (*getStartedReactPool* など) を入力します。
1. **[確認および作成]** で、新しいアイデンティティプールに対して行った選択を確認します。**[編集]** を選択してウィザードに戻り、設定を変更します。終了したら、**[ID プールの作成]** を選択します。
1. [ID プールの ID] と、新しく作成したアイデンティティプールの [リージョン] を書き留めます。ブラウザスクリプトで *region* および *identityPoolId* をブラウザスクリプトで置換するには、これらの値が必要です。
Amazon Cognito アイデンティティプールを作成したら、React Native appにより必要な Amazon S3 権限を追加する準備が整います。
## ステップ 2: 作成した IAM ロールにポリシーを追加
Amazon S3 へのブラウザスクリプトのアクセスを有効にして Amazon S3 バケットを作成および削除するには、Amazon Cognito ID プール用に作成された非認証の IAM ロールを使用します。これを進めるには、IAM ポリシーをロールに追加する必要があります。IAM ロールの詳細については、*IAM ユーザーガイド*の[「 AWS サービスにアクセス許可を委任するロールの作成](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_roles_create_for-service.html)」を参照してください。
**Amazon S3ポリシーを、非認証ユーザーに関連付けられているIAM ロールに追加するには**
1. にサインイン AWS マネジメントコンソール し、[https://console.aws.amazon.com/iam/](https://console.aws.amazon.com/iam/) で IAM コンソールを開きます。
1. 左のナビゲーションペインで、**[Roles (ロール)]** を選択してください。
1. 変更するロールの名前 (*getStartedRole* など) を選択し、**[アクセス許可]** タブを選択します。
1. **[アクセス許可を追加]**、**[ポリシーをアタッチ]** の順に選択します。
1. このロールの **[アクセス許可を追加]** ページで、**AmazonS3ReadOnlyAccess** を検索してチェックボックスをオンにします。
**注記**
このプロセスを使用して、任意の AWS サービスへのアクセスを有効にできます。
1. [**Add permissions (許可の追加)**] を選択します。
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/](https://www.npmjs.com/)npmウェブサイトで「＠aws-sdk」と検索すると見つかります。
これらのパッケージとそれに関連するコードは、プロジェクトの `node_modules` サブディレクトリにインストールされています。
Node.js パッケージのインストールの詳細については、[npm (Node.js パッケージマネージャー) ウェブサイト](https://www.npmjs.com/)の[パッケージをローカルでダウンロードしてインストール](https://docs.npmjs.com/downloading-and-installing-packages-locally)および [Node.jsモジュールの作成](https://docs.npmjs.com/creating-node-js-modules)を参照してください。 AWS SDK for JavaScript のダウンロードとインストールの詳細については、「」を参照してください[SDK for JavaScript をインストールする](setting-up.md#installing-jssdk)。
認証に必要なその他の依存関係をインストールします。
```
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 (
{msg.type !== MessageType.EMPTY && (
{msg.message}
)}
setBucketName(text)}
autoCapitalize={"none"}
value={bucketName}
placeholder={"Enter Bucket Name"}
/>
);
};
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 の依存関係をインポートします。
機能アプリ内部：
+ S3Client オブジェクトが作成され、前に作成した Amazon Cognito アイデンティティプールを使用して認証情報を指定します。
+ 方法`createBucket`と`deleteBucket`で指定されたバケットをそれぞれ作成および削除します。
+ React ネイティブビューには、ユーザーが Amazon S3 バケット名を指定するテキスト入力フィールドと、指定された Amazon S3 バケットを作成および削除するボタンが表示されます。
JavaScriptの全ページは[このGitHub](https://github.com/awsdocs/aws-doc-sdk-examples/blob/main/javascriptv3/example_code/reactnative/ReactNativeApp/App.tsx)で公開されています。
## ステップ6。例を実行する
**注記**
必ずサインインしてください。IAM Identity Center を使用して認証する場合は、 コマンドを使用して AWS CLI `aws sso login`サインインすることを忘れないでください。
この例を実行するには、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 に送信され、成功またはエラーメッセージが表示されます。
![\[Bucket creation success message with options to create or delete a bucket.\]](http://docs.aws.amazon.com/ja_jp/sdk-for-javascript/v3/developer-guide/images/react-app-running.png)
## 想定される拡張機能
React Native アプリケーションで AWS SDK for JavaScript の使用をさらに詳しく調べるために使用できる、このアプリケーションのバリエーションを次に示します。
+ Amazon S3 バケットを一覧表示するボタンを追加し、一覧にされている各バケットの横に削除ボタンを提供します。
+ テキストオブジェクトをバケットに入れるためのボタンを追加します。
+ 認証済みの IAM ロールを使用するために、Facebook や Amazon などの外部のアイデンティティプロバイダーと統合します。