Doc AWS SDK Examples GitHub リポジトリには、他にも SDK の例があります。 AWS
翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。
AWS SDK を使用して Amazon S3 オブジェクトを一覧表示するウェブページ
次のコード例は、ウェブページに Amazon S3 オブジェクトを一覧表示する方法を示しています。
- JavaScript
-
- SDK for JavaScript (v3)
-
注記
GitHub には、その他のリソースもあります。用例一覧を検索し、AWS コード例リポジトリ
での設定と実行の方法を確認してください。 次のコードは、 AWS SDK を呼び出す関連する React コンポーネントです。このコンポーネントを含むアプリケーションの実行可能なバージョンは、前述の GitHub リンクにあります。
import { useEffect, useState } from "react"; import { ListObjectsCommand, type ListObjectsCommandOutput, S3Client, } from "@aws-sdk/client-s3"; import { fromCognitoIdentityPool } from "@aws-sdk/credential-providers"; import "./App.css"; function App() { const [objects, setObjects] = useState< Required<ListObjectsCommandOutput>["Contents"] >([]); useEffect(() => { const client = new S3Client({ region: "us-east-1", // Unless you have a public bucket, you'll need access to a private bucket. // One way to do this is to create an Amazon Cognito identity pool, attach a role to the pool, // and grant the role access to the 's3:GetObject' action. // // You'll also need to configure the CORS settings on the bucket to allow traffic from // this example site. Here's an example configuration that allows all origins. Don't // do this in production. //[ // { // "AllowedHeaders": ["*"], // "AllowedMethods": ["GET"], // "AllowedOrigins": ["*"], // "ExposeHeaders": [], // }, //] // credentials: fromCognitoIdentityPool({ clientConfig: { region: "us-east-1" }, identityPoolId: "<YOUR_IDENTITY_POOL_ID>", }), }); const command = new ListObjectsCommand({ Bucket: "bucket-name" }); client.send(command).then(({ Contents }) => setObjects(Contents || [])); }, []); return ( <div className="App"> {objects.map((o) => ( <div key={o.ETag}>{o.Key}</div> ))} </div> ); } export default App;
-
API の詳細については、「AWS SDK for JavaScript API リファレンス」の「ListObjects」を参照してください。
-
サーバーレスアプリケーションを作成して写真の管理
Amazon Textract エクスプローラーアプリケーションを作成する