AWS Amplify + ReactでS3オブジェクトのカスタムメタデータを読み書きする

$ npx create-react-app my-s3-controller
$ cd my-s3-controller

$ amplify init
? Enter a name for the environment dev
? Choose your default editor: Vim (via Terminal, macOS only)
? Choose the type of app that you're building javascript
Please tell us about your project
? What javascript framework are you using react
? Source Directory Path:  src
? Distribution Directory Path: build
? Build Command:  npm run-script build
? Start Command: npm run-script start
Using default provider  awscloudformation
? Select the authentication method you want to use: AWS profile
? Please choose the profile you want to use [select your profile]
$ npm install aws-amplify @aws-amplify/ui-react

$ amplify auth add
Do you want to use the default authentication and security configuration? Default configuration
How do you want users to be able to sign in? Email
Do you want to configure advanced settings? No, I am done.
$ amplify push

  import React from 'react';
  import ReactDOM from 'react-dom/client';
  import './index.css';
  import App from './App';
  import reportWebVitals from './reportWebVitals';
+ import Amplify from 'aws-amplify';
+ import awsExports from './aws-exports';
+ Amplify.configure(awsExports);
+
+ Amplify.configure({
+     Auth: {
+         identityPoolId: process.env.REACT_APP_COGNITO_IDENTITY_POOL_ID,
+         region: process.env.REACT_APP_COGNITO_REGION
+     },
+     Storage: {
+         AWSS3: {
+             bucket: process.env.REACT_APP_S3_BUCKET,
+             region: process.env.REACT_APP_S3_REGION
+         }
+     }
+ });

  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );

  // If you want to start measuring performance in your app, pass a function
  // to log results (for example: reportWebVitals(console.log))
  // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
  reportWebVitals();

REACT_APP_COGNITO_IDENTITY_POOL_ID=「接続するCognito IDプールのプールID
REACT_APP_COGNITO_REGION=[接続するCognitoIDプールのリージョン]
REACT_APP_S3_BUCKET=[接続するS3バケット名]
REACT_APP_S3_REGION=[接続するS3バケットのリージョン]

$ npm start

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "HEAD",
            "GET",
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "http://localhost:3000"
        ],
        "ExposeHeaders": [
            "x-amz-server-side-encryption",
            "x-amz-request-id",
            "x-amz-id-2",
            "ETag",
            "x-amz-meta-foo"
        ],
        "MaxAgeSeconds": 3000
    }
]

  import logo from './logo.svg';
  import './App.css';
+ import React from 'react'
+ import { Authenticator } from '@aws-amplify/ui-react';
+ import '@aws-amplify/ui-react/styles.css';

- function App() {
+ const App = () => {
    return (
-     <div className="App">
-       <header className="App-header">
-         <img src={logo} className="App-logo" alt="logo" />
-         <p>
-           Edit <code>src/App.js</code> and save to reload.
-         </p>
-         <a
-           className="App-link"
-           href="https://reactjs.org"
-           target="_blank"
-           rel="noopener noreferrer"
-         >
-           Learn React
-         </a>
-       </header>
-     </div>
-   );
+     <Authenticator>
+       {({ signOut, user }) => (
+         <div className="App">
+           <header className="App-header">
+             <img src={logo} className="App-logo" alt="logo" />
+             <p>
+               Edit <code>src/App.js</code> and save to reload.
+             </p>
+             <a
+               className="App-link"
+               href="https://reactjs.org"
+               target="_blank"
+               rel="noopener noreferrer"
+             >
+               Learn React
+             </a>
+           </header>
+         </div>
+       )}
+     </Authenticator>
+   )
  }

- export default App;
+ export default App

  const uploadFile = async(file, foo) => {
    if (!foo) return
    if (!file) return

    const fileName = Date.now() + '.' + file.type.replace(/(.*)\//g, '')
    const result = await Storage.put(fileName, file, {
      level: 'protected',
      contentType: file.type,
      metadata: { foo: encodeURIComponent(foo) }
    })
    if (result) {
      console.log(result)
    } else {
      console.error(result.error)
    }

$ npm install aws-sdk

import React from 'react'
import { Auth } from 'aws-amplify'
import { S3Client, HeadObjectCommand, ListObjectsV2Command } from '@aws-sdk/client-s3'

const fetchS3Objects = async (bucket) => {
  try {
    const s3client = new S3Client({
      region: process.env.REACT_APP_S3_REGION,
      credentials: await Auth.currentCredentials()
    })
    const output = await s3client.send(
      new ListObjectsV2Command({
        Bucket: bucket
      })
    )
    if (!output.Contents) return []

    const heads = []
    for (let i =0; i < output.Contents.length; i++) {
      const c = output.Contents[i]
      const head = await s3client.send(
        new HeadObjectCommand({
          Bucket: bucket,
          Key: c.Key
        })
      )
      heads.push({ foo: decodeURIComponent(head.Metadata.foo) })
    }
    return heads
  } catch (err) {
    console.error(err)
  }
}