AmplifyでS3と連携する方法

準備

1.amplify add storageコマンドで、S3を追加する

amplify add storage

? Please select from one of the below mentioned services (Use arrow keys)
❯ Content (Images, audio, video, etc.)
  NoSQL Database

2.amplify pushコマンドで作成したS3をAWSにデプロイし、
　AWSのS3サービスへ反映する

amplify push

3.amplify consoleコマンドでデプロイしたサービスを確認する

amplify console

4.AWS S3のCORSを設定する

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

実装

s3Util.js

import Amplify, { Storage } from 'aws-amplify';
import config from "./aws-exports";

Amplify.configure(config);

/**
 * ファイルを保存
 * @param {string} key キー
 * @param {object} object オブジェクト
 * @param {object} config 設定（オプション）
 * @returns 結果
 */
export async function put(key, object, config = null) {
    try {
        return await Storage.put(key, object, config);
    } catch (err) {
        console.error('error:', err);
    }
}


/**
 * ファイルを削除
 * @param {string} key キー
 * @param {object} object オブジェクト
 * @param {object} config 設定（オプション）
 * @returns 結果
 */
 export async function remove(key, object, config = null) {
    try {
        return await Storage.remove(key, object, config);
    } catch (err) {
        console.error('error:', err);
    }
}


/**
 * ファイルを取得
 * @param {string} key キー
 * @param {object} config 設定（オプション）
 * @returns 署名付きURLまたはファイル(Blob)
 */
 export async function get(key, config = null) {
    try {
        return await Storage.get(key, config);
    } catch (err) {
        console.error('error:', err);
    }
}


/**
 * ファイル一覧を取得
 * @param {string} path キー
 * @param {object} config 設定（オプション）
 * @returns 一覧情報
 */
 export async function list(path, config = null) {
    try {
        return await Storage.list(path, config);
    } catch (err) {
        console.error('error:', err);
    }
}

/**
 * ファイルダウンロード
 * @param {object} blob ファイルオブジェクト
 * @param {string} filename ファイル名
 */
export function downloadBlob(blob, filename) {
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = filename || 'download';
  const clickHandler = () => {
    setTimeout(() => {
      URL.revokeObjectURL(url);
      a.removeEventListener('click', clickHandler);
    }, 150);
  };
  a.addEventListener('click', clickHandler, false);
  a.click();
  return a;
}

参考