Looking for how to use this in your app?See Frontend Libraries →

ストレージの設定

このガイドでは、Amplify アプリでストレージを設定する方法を学びます。バックエンドリソースを設定し、ファイルの一覧表示、アップロード、ダウンロードを有効にします。

まだ Amplify アプリを作成していない場合は、クイックスタートガイドをご覧ください。

Amplify Storage は、Amazon Simple Storage Service（Amazon S3）の上に構築されたファイルストレージおよび管理機能をフロントエンド Web およびモバイルアプリにシームレスに統合します。コアファイル操作用の直感的な API と UI コンポーネントを提供し、開発者がクラウドサービスの複雑さに対処することなく、スケーラブルで安全なファイルストレージソリューションを構築できるようにします。

ストレージバックエンドの構築

最初に、amplify/storage/resource.ts ファイルを作成します。このファイルは、ストレージバックエンドを設定する場所です。defineStorage 関数を使用してストレージをインスタンス化し、ストレージバケットの name を指定します。この name はバックエンド設定でバケットを識別するためのフレンドリー名です。Amplify は UUID を使用してアプリの一意の識別子を生成します。name 属性はアプリで使用するためのものです。

amplify/storage/resource.ts
import { defineStorage } from '@aws-amplify/backend';
export const storage = defineStorage({
  name: 'amplifyTeamDrive'

バックエンド定義を含む amplify/backend.ts ファイルにストレージ定義をインポートします。defineBackend にストレージを追加します。

amplify/backend.ts
import { defineBackend } from '@aws-amplify/backend';
import { auth } from './auth/resource';
import { storage } from './storage/resource';
defineBackend({

npx ampx sandbox を実行するか、Amplify にアプリをデプロイすると、ファイルが保存される Amazon S3 バケットが設定されます。ストレージ内のファイルをアプリケーションでアクセスする前に、ストレージアクセスルールを設定する必要があります。

これらの変更をデプロイするには、変更を git にコミットし、変更をアップストリームにプッシュします。Amplify の CI/CD システムが自動的に変更を検出し、ビルドとデプロイを実行します。

Terminal

git commit -am "add storage backend"
git push

ファイルパスアクセスの定義

デフォルトでは、ユーザーやその他のプロジェクトリソースはストレージバケット内のファイルにアクセスできません。アクセスは defineStorage 内の access コールバックを使用して明示的に許可する必要があります。

アクセスコールバックはオブジェクトを返します。このオブジェクトの各キーはファイルパスであり、各値はそのパスに適用されるアクセスルールの配列です。

以下の例は、一般的な写真共有アプリのファイルストレージ構造を設定する方法を示しています。ここでは、

ゲストはすべてのプロフィール画像を表示でき、プロフィール画像をアップロードしたユーザーのみが置き換えまたは削除できます。ユーザーはこの場合、Identity Pool ID（identityID）で識別されます。
すべてのユーザーが画像を送信できる一般的なプールもあります。

ファイルパスへのアクセスのカスタマイズについて詳しく学ぶ。

amplify/storage/resource.ts
export const storage = defineStorage({
  name: 'amplifyTeamDrive',
  access: (allow) => ({
    'profile-pictures/{entity_id}/*': [
      allow.guest.to(['read']),
      allow.entity('identity').to(['read', 'write', 'delete'])
    'picture-submissions/*': [
      allow.authenticated.to(['read','write']),
      allow.guest.to(['read', 'write'])

追加のストレージバケットを設定する

Amplify Storage は、複数のストレージリソースを自動的にプロビジョニングおよび管理するようにバックエンドを設定する柔軟性を提供します。

同じ defineStorage 関数を使用して追加のストレージバケットを定義し、ストレージバケットを識別するための一意の説明的な name を指定できます。この name をストレージ API に渡して、アクションを実行するバケットを指定できます。定義したストレージバケット間でこの name 属性が一意であることを確認して、正しいバケットを確実に識別し、競合を防いでください。

追加のストレージバケットが定義されている場合、そのうちの 1 つを isDefault フラグでデフォルトとしてマークする必要があります。

amplify/storage/resource.ts
export const firstBucket = defineStorage({
  name: 'firstBucket',
  isDefault: true, // デフォルトストレージバケットを識別（必須）
export const secondBucket = defineStorage({
  name: 'secondBucket',
  access: (allow) => ({
    'private/{entity_id}/*': [
      allow.entity('identity').to(['read', 'write', 'delete'])

バックエンド定義に追加のストレージリソースを追加します。

amplify/backend.ts
import { defineBackend } from '@aws-amplify/backend';
import { auth } from './auth/resource';
import { firstBucket, secondBucket } from './storage/resource';
defineBackend({
  firstBucket,
  secondBucket

ストレージバケットクライアントの使用

追加のストレージバケットは、Amplify Storage API に bucket オプションを渡すことでアプリケーションコードから参照できます。Amplify Backend で割り当てられたターゲットバケットの名前を指定できます。

import { downloadData } from 'aws-amplify/storage';
  const result = downloadData({
    path: "album/2024/1.jpg",
    options: {
      // Amplify Backend で割り当てられた名前を使用してターゲットバケットを指定する
      bucket: "secondBucket"
  }).result;
} catch (error) {
  console.log(`Error: ${error}`)

または、コンソールからバケット名とリージョンを指定してオブジェクトを渡すこともできます。各 Amplify Storage API ページで追加の使用例を確認してください。

import { downloadData } from 'aws-amplify/storage';
  const result = downloadData({
    path: 'album/2024/1.jpg',
    options: {
      // または、コンソールからバケット名と関連するリージョンを指定する
      bucket: {
        bucketName: 'second-bucket-name-from-console',
        region: 'us-east-2'
  }).result;
} catch (error) {
  console.log(`Error: ${error}`);

ストレージ削除動作の設定

デフォルトでは、ストレージリソースを削除するか Amplify アプリを削除するときに、Amplify は S3 バケットとそのすべてのオブジェクトを削除します。バケットとそのデータを保持するには、keepOnDelete を true に設定します。

amplify/storage/resource.ts
export const storage = defineStorage({
  name: 'myProjectFiles',
  // リソースが削除されたときにバケットを保持する
  keepOnDelete: true,

設定	動作
`keepOnDelete: false`（デフォルト）	バケットとそのすべてのオブジェクトは削除時に削除されます。
`keepOnDelete: true`	バケットは削除時に保持されます。不要になった場合は手動で削除する必要があります。

保持されたバケットは引き続き S3 ストレージコストが発生します。予期しない請求を避けるため、不要になったら AWS S3 コンソールまたは AWS CLI（your-bucket-name を置き換える：aws s3 rb s3://your-bucket-name --force）を使用して保持されたバケットを手動で削除してください。

npx ampx sandbox を使用する場合、keepOnDelete 設定に関係なくバケットは常に削除されます。これは開発中のリソース蓄積を防ぎます。keepOnDelete 設定は、デプロイされた環境（接続された Git ブランチ）でのみ有効になります。

アプリコードをストレージバックエンドに接続する

Amplify Storage ライブラリは、定義したバックエンドリソースに接続するクライアント API を提供します。

プロジェクトで Amplify を設定する

設定ファイルをアプリにインポートしてロードします。Amplify 設定ステップをアプリのルートエントリポイントに追加することをお勧めします。たとえば、React の index.js または Angular の main.ts です。

import { Amplify } from 'aws-amplify';
import outputs from '../amplify_outputs.json';
Amplify.configure(outputs);

アプリケーションのライフサイクルの早期に Amplify.configure を呼び出すようにしてください。他の Amplify JavaScript API の前に Amplify.configure が呼び出されていない場合、設定不足またはエラーが発生します。

最初のファイルをアップロードする

次に、picture-submissions/ パスに写真をアップロードしましょう。

import { uploadData } from "aws-amplify/storage";
const file = document.getElementById("file");
const upload = document.getElementById("upload");
upload.addEventListener("click", () => {
  const fileReader = new FileReader();
  fileReader.readAsArrayBuffer(file.files[0]);
  fileReader.onload = async (event) => {
    console.log("Complete File read successfully!", event.target.result);
      await uploadData({
        data: event.target.result,
        path: `picture-submissions/${file.files[0].name}`
    } catch (e) {
      console.log("error", e);