ブラウザでの開始方法

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

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

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

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

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

「プロパティの設定StartedPool」で、アイデンティティプール名 に名前を入力します (例: を取得）。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

次に、バケットの [アクセス許可] タブを選択し、[Cross-Origin Resource Sharing (CORS)] セクションで [編集] を選択します。次の JSON を入力します。

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

[変更を保存] を選択します。

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 バケット内のオブジェクトファイル名のリストが表示されます。