Amplify Storage: Amplify のフルスタック TypeScript 開発体験から利用できる Amazon S3

AWS Amplify を使用したファイルストレージの新しい体験をご紹介できることを喜ばしく思います。
この強力なストレージソリューションは、Amazon Simple Storage Service (Amazon S3)と簡単に統合でき、Amplify のフルスタック TypeScript 開発者体験を通じて、開発者がファイル構造をより詳細に制御し、柔軟に設定できるようになります。経験豊富な開発者でも、これから始める初心者の方でも、Amplify Storage ならクラウドベースのファイル保管を直感的に管理でき、アプリケーションの要件に応じて確実に実装できます。

本日、AWS Amplify Storage におけるフルスタック TypeScript エクスペリエンスを発表します。Amplify Storage を使うことで、以下のことが可能になります。

5 行に満たないコードでストレージバケットを定義
パスベースのアクセス許可を構成
Amplify のゼロコンフィグ UI コンポーネントとクライアントライブラリを使用して、ストレージバックエンドからファイルのアップロードとダウンロード
Amplify コンソールの新しくデザインされたファイルブラウザを使用して、ファイルとフォルダを管理

先週、新しい開発者体験である Amplify Gen 2 が一般提供されました。ストレージ以外のこのリリースについて詳しく知りたい方は、フルスタック TypeScript : AWS Amplify を再び紹介をお読みください。

Amazon S3 上に構築された、簡素化された新しいストレージインターフェイス

Amplify Storage の機能をより深く理解するため、コードサンプルを用いて説明します。このブログ記事で紹介されている Storage 機能の実働サンプルはこちらのソーシャルルームデモアプリを参照してください。

5 行未満のコードでストレージバケットをデプロイ

Amplify Gen2 で注目すべき機能の 1 つが、TypeScript ベースのバックエンド構築体験です。これにより、わずか数行のコードでストレージリソースを構成および管理できます。さらに、サンドボックス環境でストレージ機能を即座にテストできるため、チームの全開発者が独立して反復処理を行えます。

バックエンド構成にストレージを追加するには、新しいフォルダ amplify/storage と、amplify/storage/ の下にresource.ts ファイルを作成します。

Adding storage folder and backend file

ストレージバックエンドを定義するには、defineStorage関数を使用して、ストレージリソースの分かりやすい名前を指定します。この名前はストレージリソースを簡単に識別するエイリアスとして機能しますが、実際に作成される S3 バケットには、アプリケーションの個別かつセキュアなストレージ場所を確保するために、一意の識別子が付加されることに注意が必要です。
下記のコードは、新しく作成された amplify/storage/resource.tsファイルに記述されます。ここでは、ストレージバックエンドオブジェクトを定義し、ストレージリソースに「gen2-multi-cursor-demo-app」という名前を付けています。


import { defineStorage } from "@ aws-amplify/backend";

export const storage = defineStorage({
  name: 'gen2-multi-cursor-demo-app'
  })
});

次に、このストレージオブジェクトを amplify/backend.ts ファイルのバックエンド定義に含めます。
これで backend.ts ファイルは次のようになるはずです。


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

const backend = defineBackend({
  auth,
  data,
  storage 
});

ストレージリソースを定義すると、サンドボックス環境はその変更をすぐに認識し、ローカル開発用のストレージリソースのデプロイを開始します。このシームレスな統合により、ローカル開発環境ですぐに強力なクラウドストレージ機能を活用できます。

ストレージバックエンドのパスベースアクセス許可のカスタマイズ

Amplify Storage では、ストレージリソースへのアクセス管理を細かく制御できます。ゲストユーザー、認証済みユーザー、所有者、ユーザーグループ、さらには関数まで、さまざまなユーザーロールに対して個々のファイルパスへの細かなアクセス許可を定義でき、特定の要件に合わせることができます。デモアプリでは、サインイン済みのユーザーが各ルームで画像をアップロードできるようにします。また、サインインしていない「ゲストユーザー」はアップロードされた画像を閲覧できるようにします。この機能を実現するには、ストレージリソースに特定のアクセス制御を定義する必要があります。目的のアクセス権限は次のとおりです。

ゲストユーザーは読み取り専用アクセスを持ち、アップロードされた画像を閲覧できるようにします。
認証済み (サインイン済み)のユーザーは、フルアクセス権を持ち、新しい画像のアップロード、既存の画像の閲覧、必要に応じてすべての画像の削除ができるようにします。

上記の規則に基づいて、アクセス定義は次のようになります。


import { defineStorage } from "@ aws-amplify/backend";

export const storage = defineStorage({
  name: 'gen2-multi-cursor-demo-app',
  access: allow => ({
    'room/*': [ 
      allow.guest.to(['get']),
      allow.authenticated.to(['get', 'write', 'delete'])
    ] 
  })
});

ストレージリソースでは、デフォルト拒否 (deny-by-default) ポリシーを導入していることに注意が必要です。これにより、amplify/storage/resource.tsファイルを通して明示的にアクセスが許可されない限り、ユーザーがストレージリソース内のあらゆるファイルパスやディレクトリにアクセスできません。この原則に従うことで、アクセス権限を厳密に管理し、潜在的な脆弱性を最小限に抑えられます。

さらに、ユーザーグループに全アクセス権を付与することもできます。この例では、管理者ユーザーにストレージリソースへの完全なアクセス権を付与したい場合、まず認証バックエンド( amplify/auth/resource.ts ファイル)でユーザーグループを作成する必要があります。このグループリソースを「admin」と命名します。amplify/auth/resource.ts ファイルは次のようになります。


import { defineAuth } from '@ aws-amplify/backend';

export const auth = defineAuth({
  loginWith: {
    email: true 
  },
  groups: ['admin'] 
});

このグループへのアクセスは、amplify/storage/resource.ts ファイル内で個別に指定できるようになりました。


export const storage = defineStorage({
  name: 'gen2-multi-cursor-demo-app',
  access: (allow) => ({
    'room/*': [ 
      allow.guest.to(['get']),
      allow.authenticated.to(['get', 'write', 'delete']),
      allow.groups(['admin']).to(['read', 'write', 'delete'])
    ] 
  })
});

ストレージバックエンド定義にアクセス認証機能を組み込むための詳細については、こちらの包括的なドキュメントを参照してください。

Amplify の UI とクライアントライブラリによるファイルのアップロードとダウンロード

Amplify の UI コンポーネント Storage Image と Storage Manager を使用して、画像表示やファイルアップロードの機能を数分で実装したり、Amplify ライブラリでファイル管理機能をさらにカスタマイズして、アプリの要件を満たすことができます。クライアント API の新しい path パラメータを使用すると、カスタム定義されたストレージ構造やアクセス権限を利用できます。

デモアプリを拡張する前に、ターミナルウィンドウで npx ampx sandbox を実行していることを確認してください。このクラウドサンドボックスを使用すると、構成されたストレージバックエンドに対してアプリをテストできます。

ストレージバックエンドを設定したので、次はこの新機能とやり取りするようアプリを更新する時間です。フルスタック TypeScript : AWS Amplify を再び紹介で紹介したデモアプリを使います。また、サンプルリポジトリ (branch: day 1)からクローンすることもできます。

Base state of app

Amplify Storage の uploadData API を使って、画像を設定済みのストレージバックエンドにアップロードします。アップロードした画像の一時 URL (プライベートファイルへのセキュアなアクセスを提供する一時的な URL)を取得するため、getUrl API も使用し、画像を表示できるようにします。

次のコードサンプルでは、getUrl と uploadData API の使用例を確認できます。データモデルの更新を含む残りのコードサンプルについては、PictureManager.tsx を参照してください。


import { getUrl, uploadData } from "aws-amplify/storage";
// ...
// getUrl API 
  const imageUrls = (
    await Promise.all(
      pictures.map(async (item) => await getUrl({ path: item.path }))
    )
  ).map((item) => item.url.toString());
// ...
// uploadData API 
  const result = await uploadData({
    path: `room/${ roomId }/${ file.name } `,
    data: file,
  }).result ;

次に、ユーザーがアップロードした画像を消去して、リフレッシュできるようにする方法を実装します。これには、Amplify Storage の remove API を使用します。

await Promise.all(pictures.map((item) => remove({ path: item.path })));

注意:
このデモアプリケーションの完全な動作サンプルについては、Amplify Social Room サンプルアプリ (ブランチ: day 2)を参照してください。以下のように、部屋ごとに画像のアップロードとクリアができます。

Demo app with files uploaded

コミットした変更内容はgit pushでワーキングブランチにプッシュします。バックエンド側の変更はすべて、Amplify のCI/CD ワークフローの一環として自動的にデプロイされます。ビルドが完了すれば、更新内容をチームで共有できるURL にアクセスできます！

Amplify コンソールでストレージファイルブラウザを再設計

これらの新しいストレージ機能を補完するため、Amplify コンソールにストレージリソースのコンテンツを管理する専用のタブが追加されました。デプロイされたアプリをテストすると、このインターフェースでストレージリソースの更新状況を確認できます。ファイルやフォルダを簡単に追加、移動、削除できるので、オンデマンドでストレージリソースを整理、管理できます。ユーザーフレンドリーなコンソール環境から直接管理できます。

Amplify Console's Storage tab

まとめ

おめでとうございます！ Amplify Gen 2 の最新のバックエンド構築と保管機能を使って、完全に機能するアプリの実装とデプロイが完了しました！これからも新しい Amplify の機能を次々と公開していく予定ですので、引き続き最新情報に注目してください！
Amplify はオープンソースプロジェクトであり、高いパフォーマンスでスケーラブルなアプリを構築するために、どのように支援できるかコミュニティからのフィードバックを常に歓迎しています。Discord サーバーでの議論に参加したり、各種の GitHub プロジェクトで機能リクエストやバグを報告したりすることで、お客様からのご意見をお聞かせください。Amplify の詳細を知り、構築を始めるには、ドキュメントガイドをご覧ください。

この記事は、Amplify Storage: Now with fullstack TypeScript, powered by Amazon S3 を翻訳したものです。翻訳はソリューションアーキテクトの髙柴元が担当致しました。

Amazon Web Services ブログ