準備
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
}
]
実装
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;
}
参考
Set up Storage - JavaScript - AWS Amplify Gen 2 Documentation
aws-amplify.github.io