ストレージの設定
このガイドでは、Amplify アプリでストレージを設定する方法を学びます。バックエンドリソースを設定し、ファイルの一覧表示、アップロード、ダウンロードを有効にします。
まだ Amplify アプリを作成していない場合は、クイックスタートガイドをご覧ください。
Amplify Storage は、Amazon Simple Storage Service(Amazon S3)の上に構築されたファイルストレージおよび管理機能をフロントエンド Web およびモバイルアプリにシームレスに統合します。コアファイル操作用の直感的な API と UI コンポーネントを提供し、開発者がクラウドサービスの複雑さに対処することなく、スケーラブルで安全なファイルストレージソリューションを構築できるようにします。
ストレージバックエンドの構築
最初に、amplify/storage/resource.ts ファイルを作成します。このファイルは、ストレージバックエンドを設定する場所です。defineStorage 関数を使用してストレージをインスタンス化し、ストレージバケットの name を指定します。この name はバックエンド設定でバケットを識別するためのフレンドリー名です。Amplify は UUID を使用してアプリの一意の識別子を生成します。name 属性はアプリで使用するためのものです。
import { defineStorage } from '@aws-amplify/backend';
export const storage = defineStorage({ name: 'amplifyTeamDrive'});バックエンド定義を含む amplify/backend.ts ファイルにストレージ定義をインポートします。defineBackend にストレージを追加します。
import { defineBackend } from '@aws-amplify/backend';import { auth } from './auth/resource';import { storage } from './storage/resource';
defineBackend({ auth, storage});npx ampx sandbox を実行するか、Amplify にアプリをデプロイすると、ファイルが保存される Amazon S3 バケットが設定されます。ストレージ内のファイルをアプリケーションでアクセスする前に、ストレージアクセスルールを設定する必要があります。
これらの変更をデプロイするには、変更を git にコミットし、変更をアップストリームにプッシュします。Amplify の CI/CD システムが自動的に変更を検出し、ビルドとデプロイを実行します。
git commit -am "add storage backend"git pushファイルパスアクセスの定義
デフォルトでは、ユーザーやその他のプロジェクトリソースはストレージバケット内のファイルにアクセスできません。アクセスは defineStorage 内の access コールバックを使用して明示的に許可する必要があります。
アクセスコールバックはオブジェクトを返します。このオブジェクトの各キーはファイルパスであり、各値はそのパスに適用されるアクセスルールの配列です。
以下の例は、一般的な写真共有アプリのファイルストレージ構造を設定する方法を示しています。ここでは、
- ゲストはすべてのプロフィール画像を表示でき、プロフィール画像をアップロードしたユーザーのみが置き換えまたは削除できます。ユーザーはこの場合、Identity Pool ID(identityID)で識別されます。
- すべてのユーザーが画像を送信できる一般的なプールもあります。
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 フラグでデフォルトとしてマークする必要があります。
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']) ] })})バックエンド定義に追加のストレージリソースを追加します。
import { defineBackend } from '@aws-amplify/backend';import { auth } from './auth/resource';import { firstBucket, secondBucket } from './storage/resource';
defineBackend({ auth, firstBucket, secondBucket});ストレージバケットクライアントの使用
追加のストレージバケットは、Amplify Storage API に bucket オプションを渡すことでアプリケーションコードから参照できます。Amplify Backend で割り当てられたターゲットバケットの名前を指定できます。
import 'package:amplify_flutter/amplify_flutter.dart';
try { final result = await Amplify.Storage.downloadData( path: const StoragePath.fromString('album/2024/1.jpg'), options: StorageDownloadDataOptions( // Amplify Backend で割り当てられた名前を使用してターゲットバケットを指定する bucket: StorageBucket.fromOutputs('secondBucket'), ), ).result;} on Exception catch (e) { print('Error: $e');}または、コンソールからバケット名とリージョンを指定してオブジェクトを渡すこともできます。各 Amplify Storage API ページで追加の使用例を確認してください。
import 'package:amplify_flutter/amplify_flutter.dart';
try { final result = await Amplify.Storage.downloadData( path: const StoragePath.fromString('album/2024/1.jpg'), options: const StorageDownloadDataOptions( // または、コンソールからバケット名と関連するリージョンを指定する bucket: StorageBucket.fromBucketInfo( BucketInfo( bucketName: 'second-bucket-name-from-console', region: 'us-east-2', ), ), ), ).result;} on Exception catch (e) { print('Error: $e');}ストレージ削除動作の設定
デフォルトでは、ストレージリソースを削除するか Amplify アプリを削除するときに、Amplify は S3 バケットとそのすべてのオブジェクトを削除します。バケットとそのデータを保持するには、keepOnDelete を true に設定します。
export const storage = defineStorage({ name: 'myProjectFiles', // リソースが削除されたときにバケットを保持する keepOnDelete: true,});| 設定 | 動作 |
|---|---|
keepOnDelete: false(デフォルト) | バケットとそのすべてのオブジェクトは削除時に削除されます。 |
keepOnDelete: true | バケットは削除時に保持されます。不要になった場合は手動で削除する必要があります。 |
アプリコードをストレージバックエンドに接続する
Amplify Storage ライブラリは、定義したバックエンドリソースに接続するクライアント API を提供します。
前提条件
Amplify Flutter は、iOS(13.0)、Android(API レベル 24)、macOS(10.15)の最小ターゲットプラットフォームが必要です。Web、Windows、または Linux をターゲットとする場合は、Flutter のサポートされているデプロイメント プラットフォームを参照してください。
Amplify ライブラリをインストールする
以下の依存関係を app の pubspec.yaml に追加します。これは、上記の前提条件で追加したその他の依存関係とともにあります。
dependencies: flutter: sdk: flutter
amplify_auth_cognito: ^2.0.0 amplify_flutter: ^2.0.0 amplify_storage_s3: ^2.0.0プロジェクトで Amplify を設定する
Amplify Auth および Storage カテゴリを初期化するには、各プラグインに対して Amplify.addPlugin() を呼び出すか、すべてのプラグインを Amplify.addPlugins() に渡します。初期化を完了するには、Amplify.configure() を呼び出します。
コードは次のようになります。
import 'package:amplify_auth_cognito/amplify_auth_cognito.dart';import 'package:amplify_flutter/amplify_flutter.dart';import 'package:amplify_storage_s3/amplify_storage_s3.dart';import 'package:flutter/material.dart';
import 'amplify_outputs.dart';
Future<void> _configureAmplify() async { try { final auth = AmplifyAuthCognito(); final storage = AmplifyStorageS3(); await Amplify.addPlugins([auth, storage]);
// アプリケーション内で初期化されたカテゴリを使用するために Amplify.configure を呼び出す await Amplify.configure(amplifyConfig); } on Exception catch (e) { safePrint('An error occurred configuring Amplify: $e'); }}
Future<void> main() async { WidgetsFlutterBinding.ensureInitialized(); await _configureAmplify(); runApp(const MyApp());}
class MyApp extends StatefulWidget { const MyApp({Key? key}) : super(key: key);
// ...}最初のファイルをアップロードする
次に、picture-submissions/ パスに写真をアップロードしましょう。
import 'package:amplify_flutter/amplify_flutter.dart';
Future<void> uploadFile() async { try { final result = await Amplify.Storage.uploadFile( localFile: AWSFile.fromPath('/path/to/local/myPhoto.png'), path: const StoragePath.fromString('picture-submissions/myPhoto.png'), ).result; safePrint('Uploaded file: ${result.uploadedItem.path}'); } on StorageException catch (e) { safePrint(e.message); }}import 'dart:io' show File;
import 'package:amplify_flutter/amplify_flutter.dart';import 'package:aws_common/vm.dart';
Future<void> uploadFile(File file) async { try { final result = await Amplify.Storage.uploadFile( localFile: AWSFilePlatform.fromFile(file), path: const StoragePath.fromString('picture-submissions/myPhoto.png'), ).result; safePrint('Uploaded file: ${result.uploadedItem.path}'); } on StorageException catch (e) { safePrint(e.message); }}import 'dart:html' show File;
import 'package:amplify_flutter/amplify_flutter.dart';import 'package:aws_common/web.dart';
Future<void> uploadFile(File file) async { final awsFile = AWSFilePlatform.fromFile(file); try { final result = await Amplify.Storage.uploadFile( localFile: awsFile, path: const StoragePath.fromString('picture-submissions/myPhoto.png'), ).result; safePrint('Uploaded file: ${result.uploadedItem.path}'); } on StorageException catch (e) { safePrint(e.message); }}Amplify コンソールでのファイル管理
ストレージバックエンドをデプロイし、プロジェクトをクライアント API に接続した後、Amplify コンソールでファイルとフォルダを管理できます。コンソールの Storage タブでアップロード、ダウンロード、コピーなどのオンデマンドアクションを実行できます。詳細については、Amplify コンソールでのファイル管理ガイドを参照してください。
まとめ
おめでとうございます!Amplify Storage の設定ガイドを完了しました。このガイドでは、バックエンドリソースを設定して接続し、ファイルパスとアクセス定義をカスタマイズし、アプリケーションをバックエンドに接続してファイルのアップロードとダウンロードなどの機能を実装しました。
次のステップ
Amplify アプリでストレージの設定が完了したので、ファイル管理機能をアプリに追加できます。以下のガイドを使用してアップロード機能とダウンロード機能を実装するか、左側のナビゲーションからさらに多くの機能にアクセスできます。