ブラウザでの開始方法

AWS マネジメントコンソールにサインインして、Amazon Cognito コンソール (https://console.aws.amazon.com/cognito/) を開きます。

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

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

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

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

[プロパティを設定] で、[ID プール名] に名前 (getStartedPool など) を入力します。

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

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

AWS マネジメントコンソール にサインインして、IAM コンソール https://console.aws.amazon.com/iam/ を開きます。

左のナビゲーションペインで、[ロール] を選択してください。

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

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

このロールの [アクセス許可を追加] ページで、AmazonS3ReadOnlyAccess を検索してチェックボックスをオンにします。

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

AWS マネジメントコンソール にサインインし、Amazon S3 コンソール https://console.aws.amazon.com/s3/ を開きます。

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

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

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

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

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

次に、バケットの [アクセス許可] タブを選択し、[Cross-Origin Resource Sharing (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 バケット内のオブジェクトファイル名のリストが表示されます。