ブラウザでの開始方法

にサインイン AWS Management Console し、 で Amazon Cognito コンソールを開きますhttps://console.aws.amazon.com/cognito/。

左のナビゲーションペインで、[ID プール] を選択します。

[ID プールを作成] を選択します。

[ID プールの信頼を設定] で、ユーザー認証に [ゲストアクセス] を選択します。

アクセス許可の設定 で、新しいIAMロールの作成 を選択し、ロール名 に名前 (例: getStartedRole) を入力します。 IAM

プロパティの設定 で、アイデンティティプール名 に名前 (例: getStartedPool) を入力します。

[確認および作成] で、新しいアイデンティティプールに対して行った選択を確認します。[編集] を選択してウィザードに戻り、設定を変更します。終了したら、[ID プールの作成] を選択します。

[ID プールの ID] と、新しく作成した Amazon Cognito アイデンティティプールの [リージョン] を書き留めます。置き換えるには、これらの値が必要です。IDENTITY_POOL_ID また、REGION 「ステップ 4: ブラウザコードを設定する」の中

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

左のナビゲーションペインで、[ロール] を選択します。

変更するロールの名前 (例: getStartedRole) を選択し、アクセス許可タブを選択します。

[アクセス許可を追加]、[ポリシーをアタッチ] の順に選択します。

このロールのアクセス許可の追加ページで、AmazonS3ReadOnlyAccess のチェックボックスを見つけて選択します。

[Add permissions (許可の追加)] を選択します。

にサインイン AWS Management Console し、 で Amazon S3 コンソールを開きますhttps://console.aws.amazon.com/s3/。

左側のナビゲーションペインで、[バケット] を選択してから、[バケットを作成] を選択します。

バケットの命名規則 (getstartedbucket など) に準拠したバケット名を入力し、[バケットを作成] を選択します。

作成したバケットを選択し、[オブジェクト] タブを選択します。次に、アップロードを選択します。

[Files and Folders (ファイルとフォルダ)] で、[Add files (ファイルを追加)] を選択します。

アップロードするファイルを選択し、続いて [オープン] を選択します。次に、[アップロード] を選択して、バケットへのオブジェクトのアップロードを完了します。

次に、バケットのアクセス許可タブを選択し、クロスオリジンリソース共有 (CORS) セクションで編集を選択します。以下を入力しますJSON。

[
  {
    "AllowedHeaders": [
      "*"
    ],
    "AllowedMethods": [
      "GET"
    ],
    "AllowedOrigins": [
      "*"
    ],
    "ExposeHeaders": []
  }
]

[Save changes] (変更の保存) をクリックします。

Node.js をインストールします。

コマンドラインから、AWS のコードサンプルリポジトリをクローンします。

git clone --depth 1 https://github.com/awsdocs/aws-doc-sdk-examples.git

サンプルアプリケーションに移動します。

cd aws-doc-sdk-examples/javascriptv3/example_code/web/s3/list-objects/

次のコマンドを実行して、必要なパッケージをインストールします。

npm install

次に、テキストエディタで src/App.tsx を開き、次の処理を実行します。

コマンドラインから、サンプルアプリケーションに移動します。

cd aws-doc-sdk-examples/javascriptv3/example_code/web/s3/list-objects/

コマンドラインから、以下のコマンドを実行します。

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

ウェブブラウザで、URL上記の に移動します (例: http://localhost:5173)。サンプルアプリケーションでは、Amazon S3 バケット内のオブジェクトファイル名のリストが表示されます。